]>
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 | */ | |
52 | ||
53 | @import "../variables"; | |
54 | ||
55 | .claro .dijitSliderBar { | |
56 | border-style: solid; | |
57 | outline: 1px; | |
58 | } | |
59 | .claro .dijitSliderFocused .dijitSliderBar { | |
60 | border-color: @focused-border-color; | |
61 | } | |
62 | .claro .dijitSliderHover .dijitSliderBar { | |
63 | border-color: @hovered-border-color; | |
64 | } | |
65 | .claro .dijitSliderDisabled .dijitSliderBar { | |
66 | background-image: none; | |
67 | border-color: @disabled-border-color; | |
68 | } | |
1354d172 AD |
69 | .claro .dijitRuleLabel { |
70 | color: @text-color; | |
71 | } | |
81bea17a AD |
72 | |
73 | /* Horizontal Slider */ | |
74 | ||
75 | .claro .dijitRuleLabelsContainerH { | |
76 | padding: 2px 0; | |
77 | } | |
78 | .claro .dijitSlider .dijitSliderProgressBarH, | |
79 | .claro .dijitSlider .dijitSliderLeftBumper{ | |
1354d172 | 80 | background-image: url("../@{image-form-slider-horizontal}"); |
81bea17a AD |
81 | background-repeat:repeat-x; |
82 | background-position:0 -20px; | |
83 | border-color: @border-color; | |
84 | background-color: @slider-fullbar-background-color; | |
85 | } | |
86 | .claro .dijitSlider .dijitSliderRemainingBarH, | |
87 | .claro .dijitSlider .dijitSliderRightBumper{ | |
1354d172 | 88 | background-image: url("../@{image-form-slider-horizontal}"); |
81bea17a AD |
89 | background-repeat:repeat-x; |
90 | background-position:0 -11px; | |
91 | border-color: @border-color; | |
92 | background-color: @slider-remainingbar-background-color; | |
93 | } | |
94 | .claro .dijitSliderRightBumper { | |
95 | border-right: solid 1px @border-color; | |
96 | } | |
97 | .claro .dijitSliderLeftBumper { | |
98 | border-left: solid 1px @border-color; | |
99 | } | |
100 | .claro .dijitSliderHover .dijitSliderProgressBarH, | |
101 | .claro .dijitSliderHover .dijitSliderLeftBumper{ | |
102 | background-position:0 -20px; | |
103 | background-color: @slider-hovered-fullbar-background-color; | |
104 | border-color: @hovered-border-color; | |
105 | } | |
106 | .claro .dijitSliderHover .dijitSliderRemainingBarH, | |
107 | .claro .dijitSliderHover .dijitSliderRightBumper{ | |
108 | background-position:0 0; | |
109 | background-color: @slider-hovered-remainingbar-background-color; | |
110 | border-color: @hovered-border-color; | |
111 | } | |
112 | .claro .dijitSliderFocused .dijitSliderProgressBarH, | |
113 | .claro .dijitSliderFocused .dijitSliderLeftBumper{ | |
114 | background-position:0 -30px; | |
115 | background-color: @slider-focused-fullbar-background-color; | |
116 | border-color: @focused-border-color; | |
117 | } | |
118 | .claro .dijitSliderFocused .dijitSliderRemainingBarH, | |
119 | .claro .dijitSliderFocused .dijitSliderRightBumper{ | |
120 | background-position:0 -9px; | |
121 | background-color: @slider-focused-remainingbar-background-color; | |
122 | border-color: @focused-border-color; | |
123 | } | |
124 | .claro .dijitSliderDisabled .dijitSliderProgressBarH, | |
125 | .claro .dijitSliderDisabled .dijitSliderLeftBumper{ | |
126 | background-color: @disabled-border-color; /* left side of slider, fill matches border */ | |
127 | background-image:none; | |
128 | } | |
129 | .claro .dijitSliderDisabled .dijitSliderRemainingBarH, | |
130 | .claro .dijitSliderDisabled .dijitSliderRightBumper{ | |
131 | background-color: @disabled-background-color; | |
132 | } | |
133 | ||
134 | /* Vertical Slider */ | |
135 | ||
136 | .claro .dijitRuleLabelsContainerV { | |
137 | padding: 0 2px; | |
138 | } | |
139 | .claro .dijitSlider .dijitSliderProgressBarV, | |
140 | .claro .dijitSlider .dijitSliderBottomBumper{ | |
1354d172 | 141 | background-image: url("../@{image-form-slider-vertical}"); |
81bea17a AD |
142 | background-repeat:repeat-y; |
143 | background-position:-36px 0; | |
144 | border-color: @border-color; | |
145 | background-color: @slider-fullbar-background-color; | |
146 | } | |
147 | .claro .dijitSlider .dijitSliderRemainingBarV, | |
148 | .claro .dijitSlider .dijitSliderTopBumper{ | |
1354d172 | 149 | background-image: url("../@{image-form-slider-vertical}"); |
81bea17a AD |
150 | background-repeat:repeat-y; |
151 | background-position:-3px 0; | |
152 | border-color: @border-color; | |
153 | background-color: @slider-remainingbar-background-color; | |
154 | } | |
155 | .claro .dijitSliderBottomBumper { | |
156 | border-bottom: solid 1px @border-color; | |
157 | } | |
158 | .claro .dijitSliderTopBumper { | |
159 | border-top: solid 1px @border-color; | |
160 | } | |
161 | .claro .dijitSliderHover .dijitSliderProgressBarV, | |
162 | .claro .dijitSliderHover .dijitSliderBottomBumper{ | |
163 | background-position:-36px 0; | |
164 | background-color: @slider-hovered-fullbar-background-color; | |
165 | } | |
166 | .claro .dijitSliderHover .dijitSliderRemainingBarV, | |
167 | .claro .dijitSliderHover .dijitSliderTopBumper{ | |
168 | background-position:0 0; | |
169 | background-color: @slider-hovered-remainingbar-background-color; | |
170 | } | |
171 | .claro .dijitSliderFocused .dijitSliderProgressBarV, | |
172 | .claro .dijitSliderFocused .dijitSliderBottomBumper{ | |
173 | background-position:-56px 0; | |
174 | background-color: @slider-focused-fullbar-background-color; | |
175 | } | |
176 | .claro .dijitSliderFocused .dijitSliderRemainingBarV, | |
177 | .claro .dijitSliderFocused .dijitSliderTopBumper{ | |
178 | background-position:-18px 0; | |
179 | background-color: @slider-focused-remainingbar-background-color; | |
180 | } | |
181 | .claro .dijitSliderDisabled .dijitSliderProgressBarV, | |
182 | .claro .dijitSliderDisabled .dijitSliderBottomBumper{ | |
183 | background-color: @disabled-border-color; /* bottom side of slider, fill matches border */ | |
184 | } | |
185 | .claro .dijitSliderDisabled .dijitSliderRemainingBarV, | |
186 | .claro .dijitSliderDisabled .dijitSliderTopBumper{ | |
187 | background-color: @disabled-background-color; | |
188 | } | |
189 | ||
190 | ||
191 | /* ------- Thumbs ------- */ | |
192 | ||
193 | .claro .dijitSliderImageHandleH { | |
194 | border: 0; | |
195 | width: 18px; | |
196 | height: 16px; | |
1354d172 | 197 | background-image: url("../@{image-form-slider-thumbs}"); |
81bea17a AD |
198 | background-repeat:no-repeat; |
199 | background-position:0 0; | |
200 | } | |
201 | .claro .dijitSliderHover .dijitSliderImageHandleH { | |
202 | background-position:-18px 0; | |
203 | } | |
204 | .claro .dijitSliderFocused .dijitSliderImageHandleH { | |
205 | background-position:-36px 0; | |
206 | } | |
207 | .claro .dijitSliderProgressBarH .dijitSliderThumbHover{ | |
208 | background-position:-36px 0; | |
209 | } | |
210 | .claro .dijitSliderProgressBarH .dijitSliderThumbActive{ | |
211 | background-position:-36px 0; | |
212 | } | |
213 | .claro .dijitSliderReadOnly .dijitSliderImageHandleH, | |
214 | .claro .dijitSliderDisabled .dijitSliderImageHandleH { | |
215 | background-position:-54px 0; | |
216 | } | |
217 | .claro .dijitSliderImageHandleV { | |
218 | border: 0; | |
219 | width: 18px; | |
220 | height: 16px; | |
1354d172 | 221 | background-image: url("../@{image-form-slider-thumbs}"); |
81bea17a AD |
222 | background-repeat:no-repeat; |
223 | background-position:-289px 0; | |
224 | } | |
225 | .claro .dijitSliderHover .dijitSliderImageHandleV { | |
226 | background-position:-307px 0; | |
227 | } | |
228 | .claro .dijitSliderFocused .dijitSliderImageHandleV { | |
229 | background-position:-325px 0; | |
230 | } | |
231 | .claro .dijitSliderProgressBarV .dijitSliderThumbHover{ | |
232 | background-position:-325px 0; | |
233 | } | |
234 | .claro .dijitSliderProgressBarV .dijitSliderThumbActive{ | |
235 | background-position:-325px 0; | |
236 | } | |
237 | .claro .dijitSliderReadOnly .dijitSliderImageHandleV, | |
238 | .claro .dijitSliderDisabled .dijitSliderImageHandleV { | |
239 | background-position:-343px 0; | |
240 | } | |
241 | ||
242 | /* ---- Increment/Decrement Buttons ---- */ | |
243 | ||
244 | .claro .dijitSliderButtonContainerH{ | |
245 | padding: 1px 3px 1px 2px; | |
246 | } | |
247 | .claro .dijitSliderButtonContainerV{ | |
248 | padding: 3px 1px 2px 1px; | |
249 | } | |
250 | .claro .dijitSliderDecrementIconH, | |
251 | .claro .dijitSliderIncrementIconH, | |
252 | .claro .dijitSliderDecrementIconV, | |
253 | .claro .dijitSliderIncrementIconV { | |
1354d172 | 254 | background-image: url("../@{image-form-common-arrows}"); |
81bea17a AD |
255 | background-repeat:no-repeat; |
256 | background-color: @arrowbutton-background-color; | |
257 | .border-radius(2px); | |
258 | border: solid 1px @border-color; | |
259 | font-size: 1px; | |
260 | } | |
261 | .claro .dijitSliderDecrementIconH, | |
262 | .claro .dijitSliderIncrementIconH { | |
263 | height: 12px; | |
264 | width: 9px; | |
265 | } | |
266 | .claro .dijitSliderDecrementIconV, | |
267 | .claro .dijitSliderIncrementIconV { | |
268 | height: 9px; | |
269 | width: 12px; | |
270 | } | |
271 | .claro .dijitSliderActive .dijitSliderDecrementIconH, | |
272 | .claro .dijitSliderActive .dijitSliderIncrementIconH, | |
273 | .claro .dijitSliderActive .dijitSliderDecrementIconV, | |
274 | .claro .dijitSliderActive .dijitSliderIncrementIconV, | |
275 | .claro .dijitSliderHover .dijitSliderDecrementIconH, | |
276 | .claro .dijitSliderHover .dijitSliderIncrementIconH, | |
277 | .claro .dijitSliderHover .dijitSliderDecrementIconV, | |
278 | .claro .dijitSliderHover .dijitSliderIncrementIconV { | |
279 | /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ | |
280 | border: solid 1px @hovered-border-color; | |
281 | background-color: @slider-hoveredButton-background-color; | |
282 | } | |
283 | ||
284 | .claro .dijitSliderDecrementIconH { | |
285 | background-position:-357px 50%; | |
286 | } | |
287 | .claro .dijitSliderActive .dijitSliderDecrementIconH | |
288 | .claro .dijitSliderHover .dijitSliderDecrementIconH { | |
289 | background-position:-393px 50%; | |
290 | } | |
291 | .claro .dijitSliderIncrementIconH { | |
292 | background-position:-251px 50%; | |
293 | } | |
294 | .claro .dijitSliderActive .dijitSliderIncrementIconH | |
295 | .claro .dijitSliderHover .dijitSliderIncrementIconH { | |
296 | background-position:-283px 50%; | |
297 | } | |
298 | .claro .dijitSliderDecrementIconV { | |
299 | background-position:-38px 50%; | |
300 | } | |
301 | .claro .dijitSliderActive .dijitSliderDecrementIconV | |
302 | .claro .dijitSliderHover .dijitSliderDecrementIconV { | |
303 | background-position:-73px 50%; | |
304 | } | |
305 | .claro .dijitSliderIncrementIconV { | |
306 | background-position:-143px 49%; | |
307 | } | |
308 | .claro .dijitSliderActive .dijitSliderIncrementIconV | |
309 | .claro .dijitSliderHover .dijitSliderIncrementIconV { | |
310 | background-position:-178px 49%; | |
311 | } | |
312 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, | |
313 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, | |
314 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, | |
315 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { | |
316 | background-color: @slider-button-hovered-background-color; | |
317 | } | |
318 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, | |
319 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, | |
320 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, | |
321 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { | |
322 | background-color: @slider-button-pressed-background-color; | |
323 | border-color:@pressed-border-color; | |
324 | } | |
325 | .claro .dijitSliderButtonInner { | |
326 | visibility: hidden; | |
327 | } | |
328 | .claro .dijitSliderDisabled .dijitSliderBar{ | |
329 | border-color: @disabled-border-color; | |
330 | } | |
331 | .claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { | |
332 | border-color: @disabled-border-color; | |
333 | color: @disabled-text-color; | |
334 | } | |
335 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconH, | |
336 | .claro .dijitSliderDisabled .dijitSliderDecrementIconH { | |
337 | background-position:-321px 50%; | |
338 | background-color:@disabled-background-color; | |
339 | } | |
340 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconH, | |
341 | .claro .dijitSliderDisabled .dijitSliderIncrementIconH { | |
342 | background-position:-215px 50%; | |
343 | background-color:@disabled-background-color; | |
344 | } | |
345 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconV, | |
346 | .claro .dijitSliderDisabled .dijitSliderDecrementIconV { | |
347 | background-position:-3px 49%; | |
348 | background-color:@disabled-background-color; | |
349 | } | |
350 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconV, | |
351 | .claro .dijitSliderDisabled .dijitSliderIncrementIconV { | |
352 | background-position:-107px 49%; | |
353 | background-color:@disabled-background-color; | |
354 | } | |
355 | ||
356 | .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, | |
357 | .dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, | |
358 | .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, | |
359 | .dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, | |
360 | .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, | |
361 | .dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, | |
362 | .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, | |
363 | .dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { | |
364 | background-image:none; | |
365 | } |