]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Slider |
2 | * | |
3 | * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) | |
4 | * | |
5 | * Slider progress bar: | |
6 | * 1. Slider progress bar (default styling): | |
7 | * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider | |
8 | * .dijitSliderLeftBumper - bar at the left of horizontal slider | |
9 | * .dijitSliderRightBumper - bar at the right of horizontal slider | |
10 | * .dijitSliderProgressBarV - progress bar at the middle of vertical slider | |
11 | * .dijitSliderTopBumper - bar at the top of vertical slider | |
12 | * .dijitSliderBottomtBumper - bar at the bottom of vertical slider | |
13 | * | |
14 | * 2. hovered Slider progress bar (ie, mouse hover on progress bar) | |
15 | * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border | |
16 | * | |
17 | * 3. focused Slider progress bar (ie, mouse focused on progress bar) | |
18 | * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border | |
19 | * | |
20 | * 4. disabled/read-only Slider progress bar | |
21 | * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled | |
22 | * | |
23 | * | |
24 | * Slider Thumbs: | |
25 | * 1. Slider Thumbs (default styling): | |
26 | * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar | |
27 | * | |
28 | * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) | |
29 | * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style | |
30 | * | |
31 | * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) | |
32 | * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style | |
33 | * | |
34 | * | |
35 | * Slider Increment/Decrement Buttons: | |
36 | * 1. Slider Increment/Decrement Buttons (default styling): | |
37 | * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider | |
38 | * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider | |
39 | * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider | |
40 | * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider | |
41 | * | |
42 | * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) | |
43 | * .dijitSliderHover .dijitSliderDecrementIconH - for background, border | |
44 | * | |
45 | * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) | |
46 | * .dijitSliderActive .dijitSliderIncrementIconV - for background, border | |
47 | * | |
48 | * 4. disabled/read-only Slider Increment/Decrement Buttons | |
49 | * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider | |
50 | * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider | |
51 | */ | |
2f01fe57 | 52 | .claro .dijitSliderBar { |
81bea17a AD |
53 | border-style: solid; |
54 | outline: 1px; | |
2f01fe57 AD |
55 | } |
56 | .claro .dijitSliderFocused .dijitSliderBar { | |
81bea17a | 57 | border-color: #769dc0; |
2f01fe57 AD |
58 | } |
59 | .claro .dijitSliderHover .dijitSliderBar { | |
81bea17a | 60 | border-color: #769dc0; |
2f01fe57 AD |
61 | } |
62 | .claro .dijitSliderDisabled .dijitSliderBar { | |
81bea17a AD |
63 | background-image: none; |
64 | border-color: #d3d3d3; | |
2f01fe57 | 65 | } |
81bea17a | 66 | /* Horizontal Slider */ |
2f01fe57 | 67 | .claro .dijitRuleLabelsContainerH { |
81bea17a AD |
68 | padding: 2px 0; |
69 | } | |
70 | .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { | |
71 | background-image: url("images/sliderHorizontal.png"); | |
72 | background-repeat: repeat-x; | |
73 | background-position: 0 -20px; | |
74 | border-color: #b5bcc7; | |
75 | background-color: #cfe5fa; | |
76 | } | |
77 | .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { | |
78 | background-image: url("images/sliderHorizontal.png"); | |
79 | background-repeat: repeat-x; | |
80 | background-position: 0 -11px; | |
81 | border-color: #b5bcc7; | |
82 | background-color: #ffffff; | |
2f01fe57 AD |
83 | } |
84 | .claro .dijitSliderRightBumper { | |
81bea17a | 85 | border-right: solid 1px #b5bcc7; |
2f01fe57 AD |
86 | } |
87 | .claro .dijitSliderLeftBumper { | |
81bea17a AD |
88 | border-left: solid 1px #b5bcc7; |
89 | } | |
90 | .claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { | |
91 | background-position: 0 -20px; | |
92 | background-color: #abd6ff; | |
93 | border-color: #769dc0; | |
94 | } | |
95 | .claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { | |
96 | background-position: 0 0; | |
97 | background-color: #ffffff; | |
98 | border-color: #769dc0; | |
99 | } | |
100 | .claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { | |
101 | background-position: 0 -30px; | |
102 | background-color: #abd6ff; | |
103 | border-color: #769dc0; | |
104 | } | |
105 | .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { | |
106 | background-position: 0 -9px; | |
107 | background-color: #ffffff; | |
108 | border-color: #769dc0; | |
109 | } | |
110 | .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { | |
111 | background-color: #d3d3d3; | |
112 | /* left side of slider, fill matches border */ | |
113 | ||
114 | background-image: none; | |
2f01fe57 | 115 | } |
81bea17a AD |
116 | .claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper { |
117 | background-color: #efefef; | |
118 | } | |
119 | /* Vertical Slider */ | |
2f01fe57 | 120 | .claro .dijitRuleLabelsContainerV { |
81bea17a AD |
121 | padding: 0 2px; |
122 | } | |
123 | .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { | |
124 | background-image: url("images/sliderVertical.png"); | |
125 | background-repeat: repeat-y; | |
126 | background-position: -36px 0; | |
127 | border-color: #b5bcc7; | |
128 | background-color: #cfe5fa; | |
129 | } | |
130 | .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { | |
131 | background-image: url("images/sliderVertical.png"); | |
132 | background-repeat: repeat-y; | |
133 | background-position: -3px 0; | |
134 | border-color: #b5bcc7; | |
135 | background-color: #ffffff; | |
2f01fe57 AD |
136 | } |
137 | .claro .dijitSliderBottomBumper { | |
81bea17a | 138 | border-bottom: solid 1px #b5bcc7; |
2f01fe57 AD |
139 | } |
140 | .claro .dijitSliderTopBumper { | |
81bea17a | 141 | border-top: solid 1px #b5bcc7; |
2f01fe57 | 142 | } |
81bea17a AD |
143 | .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { |
144 | background-position: -36px 0; | |
145 | background-color: #abd6ff; | |
2f01fe57 | 146 | } |
81bea17a AD |
147 | .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { |
148 | background-position: 0 0; | |
149 | background-color: #ffffff; | |
2f01fe57 | 150 | } |
81bea17a AD |
151 | .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { |
152 | background-position: -56px 0; | |
153 | background-color: #abd6ff; | |
2f01fe57 | 154 | } |
81bea17a AD |
155 | .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { |
156 | background-position: -18px 0; | |
157 | background-color: #ffffff; | |
2f01fe57 | 158 | } |
81bea17a AD |
159 | .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { |
160 | background-color: #d3d3d3; | |
161 | /* bottom side of slider, fill matches border */ | |
162 | ||
2f01fe57 | 163 | } |
81bea17a AD |
164 | .claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { |
165 | background-color: #efefef; | |
2f01fe57 | 166 | } |
81bea17a | 167 | /* ------- Thumbs ------- */ |
2f01fe57 | 168 | .claro .dijitSliderImageHandleH { |
81bea17a AD |
169 | border: 0; |
170 | width: 18px; | |
171 | height: 16px; | |
172 | background-image: url("images/sliderThumbs.png"); | |
173 | background-repeat: no-repeat; | |
174 | background-position: 0 0; | |
2f01fe57 AD |
175 | } |
176 | .claro .dijitSliderHover .dijitSliderImageHandleH { | |
81bea17a | 177 | background-position: -18px 0; |
2f01fe57 AD |
178 | } |
179 | .claro .dijitSliderFocused .dijitSliderImageHandleH { | |
81bea17a | 180 | background-position: -36px 0; |
2f01fe57 | 181 | } |
81bea17a AD |
182 | .claro .dijitSliderProgressBarH .dijitSliderThumbHover { |
183 | background-position: -36px 0; | |
2f01fe57 | 184 | } |
81bea17a AD |
185 | .claro .dijitSliderProgressBarH .dijitSliderThumbActive { |
186 | background-position: -36px 0; | |
2f01fe57 | 187 | } |
81bea17a AD |
188 | .claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { |
189 | background-position: -54px 0; | |
2f01fe57 AD |
190 | } |
191 | .claro .dijitSliderImageHandleV { | |
81bea17a AD |
192 | border: 0; |
193 | width: 18px; | |
194 | height: 16px; | |
195 | background-image: url("images/sliderThumbs.png"); | |
196 | background-repeat: no-repeat; | |
197 | background-position: -289px 0; | |
2f01fe57 AD |
198 | } |
199 | .claro .dijitSliderHover .dijitSliderImageHandleV { | |
81bea17a | 200 | background-position: -307px 0; |
2f01fe57 AD |
201 | } |
202 | .claro .dijitSliderFocused .dijitSliderImageHandleV { | |
81bea17a | 203 | background-position: -325px 0; |
2f01fe57 | 204 | } |
81bea17a AD |
205 | .claro .dijitSliderProgressBarV .dijitSliderThumbHover { |
206 | background-position: -325px 0; | |
2f01fe57 | 207 | } |
81bea17a AD |
208 | .claro .dijitSliderProgressBarV .dijitSliderThumbActive { |
209 | background-position: -325px 0; | |
2f01fe57 | 210 | } |
81bea17a AD |
211 | .claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { |
212 | background-position: -343px 0; | |
2f01fe57 | 213 | } |
81bea17a AD |
214 | /* ---- Increment/Decrement Buttons ---- */ |
215 | .claro .dijitSliderButtonContainerH { | |
216 | padding: 1px 3px 1px 2px; | |
2f01fe57 | 217 | } |
81bea17a AD |
218 | .claro .dijitSliderButtonContainerV { |
219 | padding: 3px 1px 2px 1px; | |
2f01fe57 AD |
220 | } |
221 | .claro .dijitSliderDecrementIconH, | |
222 | .claro .dijitSliderIncrementIconH, | |
223 | .claro .dijitSliderDecrementIconV, | |
224 | .claro .dijitSliderIncrementIconV { | |
81bea17a AD |
225 | background-image: url('images/commonFormArrows.png'); |
226 | background-repeat: no-repeat; | |
227 | background-color: #efefef; | |
228 | -moz-border-radius: 2px; | |
229 | border-radius: 2px; | |
230 | border: solid 1px #b5bcc7; | |
231 | font-size: 1px; | |
232 | } | |
233 | .claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH { | |
234 | height: 12px; | |
235 | width: 9px; | |
236 | } | |
237 | .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { | |
238 | height: 9px; | |
239 | width: 12px; | |
2f01fe57 AD |
240 | } |
241 | .claro .dijitSliderActive .dijitSliderDecrementIconH, | |
242 | .claro .dijitSliderActive .dijitSliderIncrementIconH, | |
243 | .claro .dijitSliderActive .dijitSliderDecrementIconV, | |
244 | .claro .dijitSliderActive .dijitSliderIncrementIconV, | |
245 | .claro .dijitSliderHover .dijitSliderDecrementIconH, | |
246 | .claro .dijitSliderHover .dijitSliderIncrementIconH, | |
247 | .claro .dijitSliderHover .dijitSliderDecrementIconV, | |
248 | .claro .dijitSliderHover .dijitSliderIncrementIconV { | |
81bea17a AD |
249 | /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ |
250 | ||
251 | border: solid 1px #769dc0; | |
252 | background-color: #ffffff; | |
2f01fe57 AD |
253 | } |
254 | .claro .dijitSliderDecrementIconH { | |
81bea17a | 255 | background-position: -357px 50%; |
2f01fe57 | 256 | } |
81bea17a AD |
257 | .claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { |
258 | background-position: -393px 50%; | |
2f01fe57 AD |
259 | } |
260 | .claro .dijitSliderIncrementIconH { | |
81bea17a | 261 | background-position: -251px 50%; |
2f01fe57 | 262 | } |
81bea17a AD |
263 | .claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { |
264 | background-position: -283px 50%; | |
2f01fe57 AD |
265 | } |
266 | .claro .dijitSliderDecrementIconV { | |
81bea17a | 267 | background-position: -38px 50%; |
2f01fe57 | 268 | } |
81bea17a AD |
269 | .claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { |
270 | background-position: -73px 50%; | |
2f01fe57 AD |
271 | } |
272 | .claro .dijitSliderIncrementIconV { | |
81bea17a | 273 | background-position: -143px 49%; |
2f01fe57 | 274 | } |
81bea17a AD |
275 | .claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV { |
276 | background-position: -178px 49%; | |
2f01fe57 AD |
277 | } |
278 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, | |
279 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, | |
280 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, | |
281 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { | |
81bea17a | 282 | background-color: #cfe5fa; |
2f01fe57 AD |
283 | } |
284 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, | |
285 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, | |
286 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, | |
287 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { | |
81bea17a AD |
288 | background-color: #abd6ff; |
289 | border-color: #769dc0; | |
2f01fe57 AD |
290 | } |
291 | .claro .dijitSliderButtonInner { | |
81bea17a | 292 | visibility: hidden; |
2f01fe57 | 293 | } |
81bea17a AD |
294 | .claro .dijitSliderDisabled .dijitSliderBar { |
295 | border-color: #d3d3d3; | |
2f01fe57 | 296 | } |
81bea17a AD |
297 | .claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { |
298 | border-color: #d3d3d3; | |
299 | color: #818181; | |
2f01fe57 | 300 | } |
81bea17a AD |
301 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { |
302 | background-position: -321px 50%; | |
303 | background-color: #efefef; | |
2f01fe57 | 304 | } |
81bea17a AD |
305 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { |
306 | background-position: -215px 50%; | |
307 | background-color: #efefef; | |
2f01fe57 | 308 | } |
81bea17a AD |
309 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { |
310 | background-position: -3px 49%; | |
311 | background-color: #efefef; | |
2f01fe57 | 312 | } |
81bea17a AD |
313 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { |
314 | background-position: -107px 49%; | |
315 | background-color: #efefef; | |
2f01fe57 AD |
316 | } |
317 | .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, | |
318 | .dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, | |
319 | .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, | |
320 | .dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, | |
321 | .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, | |
322 | .dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, | |
323 | .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, | |
324 | .dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { | |
81bea17a | 325 | background-image: none; |
2f01fe57 | 326 | } |