3 * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar)
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
14 * 2. hovered Slider progress bar (ie, mouse hover on progress bar)
15 * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border
17 * 3. focused Slider progress bar (ie, mouse focused on progress bar)
18 * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border
20 * 4. disabled/read-only Slider progress bar
21 * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled
25 * 1. Slider Thumbs (default styling):
26 * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar
28 * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs)
29 * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style
31 * 3. focused Slider progress bar (ie, mouse focused on slider thumbs)
32 * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style
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
42 * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons)
43 * .dijitSliderHover .dijitSliderDecrementIconH - for background, border
45 * 3. active Slider Increment/Decrement Buttons (mouse down on the icons)
46 * .dijitSliderActive .dijitSliderIncrementIconV - for background, border
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
53 @import "../variables";
55 .claro .dijitSliderBar {
59 .claro .dijitSliderFocused .dijitSliderBar {
60 border-color: @focused-border-color;
62 .claro .dijitSliderHover .dijitSliderBar {
63 border-color: @hovered-border-color;
65 .claro .dijitSliderDisabled .dijitSliderBar {
66 background-image: none;
67 border-color: @disabled-border-color;
69 .claro .dijitRuleLabelsContainer {
73 /* Horizontal Slider */
75 .claro .dijitRuleLabelsContainerH {
78 .claro .dijitSlider .dijitSliderProgressBarH,
79 .claro .dijitSlider .dijitSliderLeftBumper{
80 border-color: @border-color;
81 background-color: @slider-fullbar-background-color;
82 .alpha-white-gradient (top, 1,0px, 1,1px, 0,2px);
84 .claro .dijitSlider .dijitSliderRemainingBarH,
85 .claro .dijitSlider .dijitSliderRightBumper{
86 border-color: @border-color;
87 background-color: @slider-remainingbar-background-color;
89 .claro .dijitSliderRightBumper {
90 border-right: solid 1px @border-color;
92 .claro .dijitSliderLeftBumper {
93 border-left: solid 1px @border-color;
95 .claro .dijitSliderHover .dijitSliderProgressBarH,
96 .claro .dijitSliderHover .dijitSliderLeftBumper{
97 background-color: @slider-hovered-fullbar-background-color;
98 border-color: @hovered-border-color;
100 .claro .dijitSliderHover .dijitSliderRemainingBarH,
101 .claro .dijitSliderHover .dijitSliderRightBumper{
102 background-color: @slider-hovered-remainingbar-background-color;
103 border-color: @hovered-border-color;
105 .claro .dijitSliderFocused .dijitSliderProgressBarH,
106 .claro .dijitSliderFocused .dijitSliderLeftBumper{
107 background-color: @slider-focused-fullbar-background-color;
108 border-color: @focused-border-color;
109 .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
111 .claro .dijitSliderFocused .dijitSliderRemainingBarH,
112 .claro .dijitSliderFocused .dijitSliderRightBumper{
113 background-color: @slider-focused-remainingbar-background-color;
114 border-color: @focused-border-color;
115 .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
117 .claro .dijitSliderDisabled .dijitSliderProgressBarH,
118 .claro .dijitSliderDisabled .dijitSliderLeftBumper{
119 background-color: @disabled-border-color; /* left side of slider, fill matches border */
120 background-image:none;
122 .claro .dijitSliderDisabled .dijitSliderRemainingBarH,
123 .claro .dijitSliderDisabled .dijitSliderRightBumper{
124 background-color: @disabled-background-color;
127 /* Vertical Slider */
129 .claro .dijitRuleLabelsContainerV {
132 .claro .dijitSlider .dijitSliderProgressBarV,
133 .claro .dijitSlider .dijitSliderBottomBumper{
134 border-color: @border-color;
135 background-color: @slider-fullbar-background-color;
136 .alpha-white-gradient (left, 1,0px, 0,1px);
138 .claro .dijitSlider .dijitSliderRemainingBarV,
139 .claro .dijitSlider .dijitSliderTopBumper{
140 border-color: @border-color;
141 background-color: @slider-remainingbar-background-color;
143 .claro .dijitSliderBottomBumper {
144 border-bottom: solid 1px @border-color;
146 .claro .dijitSliderTopBumper {
147 border-top: solid 1px @border-color;
149 .claro .dijitSliderHover .dijitSliderProgressBarV,
150 .claro .dijitSliderHover .dijitSliderBottomBumper{
151 background-color: @slider-hovered-fullbar-background-color;
152 border-color: @hovered-border-color;
154 .claro .dijitSliderHover .dijitSliderRemainingBarV,
155 .claro .dijitSliderHover .dijitSliderTopBumper{
156 background-color: @slider-hovered-remainingbar-background-color;
157 border-color: @hovered-border-color;
159 .claro .dijitSliderFocused .dijitSliderProgressBarV,
160 .claro .dijitSliderFocused .dijitSliderBottomBumper{
161 background-color: @slider-focused-fullbar-background-color;
162 border-color: @focused-border-color;
163 .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
165 .claro .dijitSliderFocused .dijitSliderRemainingBarV,
166 .claro .dijitSliderFocused .dijitSliderTopBumper{
167 background-color: @slider-focused-remainingbar-background-color;
168 border-color: @focused-border-color;
169 .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
171 .claro .dijitSliderDisabled .dijitSliderProgressBarV,
172 .claro .dijitSliderDisabled .dijitSliderBottomBumper{
173 background-color: @disabled-border-color; /* bottom side of slider, fill matches border */
175 .claro .dijitSliderDisabled .dijitSliderRemainingBarV,
176 .claro .dijitSliderDisabled .dijitSliderTopBumper{
177 background-color: @disabled-background-color;
181 /* ------- Thumbs ------- */
183 .claro .dijitSliderImageHandleH {
187 background-image: url("../@{image-form-slider-thumbs}");
188 background-repeat:no-repeat;
189 background-position:0 0;
191 .claro .dijitSliderHover .dijitSliderImageHandleH {
192 background-position:-18px 0;
194 .claro .dijitSliderFocused .dijitSliderImageHandleH {
195 background-position:-36px 0;
197 .claro .dijitSliderProgressBarH .dijitSliderThumbHover{
198 background-position:-36px 0;
200 .claro .dijitSliderProgressBarH .dijitSliderThumbActive{
201 background-position:-36px 0;
203 .claro .dijitSliderReadOnly .dijitSliderImageHandleH,
204 .claro .dijitSliderDisabled .dijitSliderImageHandleH {
205 background-position:-54px 0;
207 .claro .dijitSliderImageHandleV {
211 background-image: url("../@{image-form-slider-thumbs}");
212 background-repeat:no-repeat;
213 background-position:-289px 0;
215 .claro .dijitSliderHover .dijitSliderImageHandleV {
216 background-position:-307px 0;
218 .claro .dijitSliderFocused .dijitSliderImageHandleV {
219 background-position:-325px 0;
221 .claro .dijitSliderProgressBarV .dijitSliderThumbHover{
222 background-position:-325px 0;
224 .claro .dijitSliderProgressBarV .dijitSliderThumbActive{
225 background-position:-325px 0;
227 .claro .dijitSliderReadOnly .dijitSliderImageHandleV,
228 .claro .dijitSliderDisabled .dijitSliderImageHandleV {
229 background-position:-343px 0;
232 /* ---- Increment/Decrement Buttons ---- */
234 .claro .dijitSliderButtonContainerH{
235 padding: 1px 3px 1px 2px;
237 .claro .dijitSliderButtonContainerV{
238 padding: 3px 1px 2px 1px;
240 .claro .dijitSliderDecrementIconH,
241 .claro .dijitSliderIncrementIconH,
242 .claro .dijitSliderDecrementIconV,
243 .claro .dijitSliderIncrementIconV {
244 background-image: url("../@{image-form-common-arrows}");
245 background-repeat:no-repeat;
246 background-color: @arrowbutton-background-color;
248 border: solid 1px @border-color;
251 .claro .dijitSliderDecrementIconH,
252 .claro .dijitSliderIncrementIconH {
256 .claro .dijitSliderDecrementIconV,
257 .claro .dijitSliderIncrementIconV {
261 .claro .dijitSliderActive .dijitSliderDecrementIconH,
262 .claro .dijitSliderActive .dijitSliderIncrementIconH,
263 .claro .dijitSliderActive .dijitSliderDecrementIconV,
264 .claro .dijitSliderActive .dijitSliderIncrementIconV,
265 .claro .dijitSliderHover .dijitSliderDecrementIconH,
266 .claro .dijitSliderHover .dijitSliderIncrementIconH,
267 .claro .dijitSliderHover .dijitSliderDecrementIconV,
268 .claro .dijitSliderHover .dijitSliderIncrementIconV {
269 /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */
270 border: solid 1px @hovered-border-color;
271 background-color: @slider-hoveredButton-background-color;
274 .claro .dijitSliderDecrementIconH {
275 background-position:-357px 50%;
277 .claro .dijitSliderActive .dijitSliderDecrementIconH
278 .claro .dijitSliderHover .dijitSliderDecrementIconH {
279 background-position:-393px 50%;
281 .claro .dijitSliderIncrementIconH {
282 background-position:-251px 50%;
284 .claro .dijitSliderActive .dijitSliderIncrementIconH
285 .claro .dijitSliderHover .dijitSliderIncrementIconH {
286 background-position:-283px 50%;
288 .claro .dijitSliderDecrementIconV {
289 background-position:-38px 50%;
291 .claro .dijitSliderActive .dijitSliderDecrementIconV
292 .claro .dijitSliderHover .dijitSliderDecrementIconV {
293 background-position:-73px 50%;
295 .claro .dijitSliderIncrementIconV {
296 background-position:-143px 49%;
298 .claro .dijitSliderActive .dijitSliderIncrementIconV
299 .claro .dijitSliderHover .dijitSliderIncrementIconV {
300 background-position:-178px 49%;
302 .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover,
303 .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover,
304 .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover,
305 .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover {
306 background-color: @slider-button-hovered-background-color;
308 .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive,
309 .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive,
310 .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive,
311 .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive {
312 background-color: @slider-button-pressed-background-color;
313 border-color:@pressed-border-color;
315 .claro .dijitSliderButtonInner {
318 .claro .dijitSliderDisabled .dijitSliderBar{
319 border-color: @disabled-border-color;
321 .claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * {
322 border-color: @disabled-border-color;
323 color: @disabled-text-color;
325 .claro .dijitSliderReadOnly .dijitSliderDecrementIconH,
326 .claro .dijitSliderDisabled .dijitSliderDecrementIconH {
327 background-position:-321px 50%;
328 background-color:@disabled-background-color;
330 .claro .dijitSliderReadOnly .dijitSliderIncrementIconH,
331 .claro .dijitSliderDisabled .dijitSliderIncrementIconH {
332 background-position:-215px 50%;
333 background-color:@disabled-background-color;
335 .claro .dijitSliderReadOnly .dijitSliderDecrementIconV,
336 .claro .dijitSliderDisabled .dijitSliderDecrementIconV {
337 background-position:-3px 49%;
338 background-color:@disabled-background-color;
340 .claro .dijitSliderReadOnly .dijitSliderIncrementIconV,
341 .claro .dijitSliderDisabled .dijitSliderIncrementIconV {
342 background-position:-107px 49%;
343 background-color:@disabled-background-color;