1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
// <copyright>
// This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
// </copyright>
// Begin: Scroll Bar skinning
::-webkit-scrollbar {
width: 11px;
height: 11px;
}
// Turn off single button up on top, and down on bottom
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none; // we have these off by default
}
// Turn off the down area up on top, and up area on bottom
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
// Turn off the down area up on top, and up area on bottom
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
display: none;
}
::-webkit-scrollbar-track:vertical {
background-color: $color-sb-border;
}
::-webkit-scrollbar-track:horizontal {
background-color: $color-sb-border;
}
// Track area above thumb and below up button
::-webkit-scrollbar-track-piece:vertical:start {
background-color: transparent;
}
// Track area left of thumb and right of button
::-webkit-scrollbar-track-piece:horizontal:start {
background-color: transparent;
}
// Track area below thumb and down button
::-webkit-scrollbar-track-piece:vertical:end {
background-color: transparent;
}
// Track area right of thumb and left of button
::-webkit-scrollbar-track-piece:horizontal:end {
background-color: transparent;
}
// The thumb itself
::-webkit-scrollbar-thumb:vertical {
border-color: $color-sb-border;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 6px;
background: -webkit-gradient(linear, left top, right top,
color-stop(0.16, $color-sb-1),
color-stop(0.49, $color-sb-2),
color-stop(0.82, $color-sb-1));
}
::-webkit-scrollbar-thumb:vertical:hover {
border-color: $color-sb-border;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 6px;
background: -webkit-gradient(linear, left top, right top,
color-stop(0.1, $color-sb-hover-1),
color-stop(0.50, $color-sb-hover-2),
color-stop(0.9, $color-sb-hover-1));
}
::-webkit-scrollbar-thumb:horizontal {
border-color: $color-sb-border;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 6px;
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0.1, $color-sb-1),
color-stop(0.5, $color-sb-2),
color-stop(0.9, $color-sb-1));
}
::-webkit-scrollbar-thumb:horizontal:hover {
border-color: $color-sb-border;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 6px;
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0.16, $color-sb-hover-1),
color-stop(0.49, $color-sb-hover-2),
color-stop(0.82, $color-sb-hover-1));
}
::-webkit-scrollbar-corner {
// background-color: black;
//For some reason this is the only way I can find to not show the corner.
//Setting the ::-webkit-scrollbar-corner:disabled style doesn't work as that
//pseudo-class seems to be ignored.
//John Mayhew
background-color: $color-sb-border;
}
::-webkit-scrollbar-corner:window-inactive {
background-color: $color-sb-border;
}
::-webkit-resizer {
background-image:url("../images/scrollbars/scrollbar_resizer.png");
background-repeat: no-repeat;
}
::-webkit-resizer:window-inactive {
background-image:url("../images/scrollbars/scrollbar_resizer.png");
background-repeat: no-repeat;
}
// disabled state
::-webkit-scrollbar-track:disabled {
display: none;
}
// These don't seem to be necessary or in some cases, they just seem to be ignored
:-webkit-scrollbar-track:vertical:disabled {
display: none;
}
::-webkit-scrollbar-track:horizontal:disabled {
display: none;
}
::-webkit-scrollbar-track-piece:disabled {
display: none;
}
::-webkit-scrollbar-button:disabled {
display: none;
}
::-webkit-scrollbar-corner:disabled {
display: none;
}
::-webkit-resizer:disabled {
display: none;
}
// End: Scroll Bar Skinning
|