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