]>
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 { | |
1354d172 | 57 | border-color: #759dc0; |
2f01fe57 AD |
58 | } |
59 | .claro .dijitSliderHover .dijitSliderBar { | |
1354d172 | 60 | border-color: #759dc0; |
2f01fe57 AD |
61 | } |
62 | .claro .dijitSliderDisabled .dijitSliderBar { | |
81bea17a AD |
63 | background-image: none; |
64 | border-color: #d3d3d3; | |
2f01fe57 | 65 | } |
f0cfe83e | 66 | .claro .dijitRuleLabelsContainer { |
1354d172 AD |
67 | color: #000000; |
68 | } | |
81bea17a | 69 | /* Horizontal Slider */ |
2f01fe57 | 70 | .claro .dijitRuleLabelsContainerH { |
81bea17a AD |
71 | padding: 2px 0; |
72 | } | |
73 | .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { | |
81bea17a AD |
74 | border-color: #b5bcc7; |
75 | background-color: #cfe5fa; | |
f0cfe83e AD |
76 | background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); |
77 | background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); | |
78 | background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); | |
79 | background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); | |
81bea17a AD |
80 | } |
81 | .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { | |
81bea17a AD |
82 | border-color: #b5bcc7; |
83 | background-color: #ffffff; | |
2f01fe57 AD |
84 | } |
85 | .claro .dijitSliderRightBumper { | |
81bea17a | 86 | border-right: solid 1px #b5bcc7; |
2f01fe57 AD |
87 | } |
88 | .claro .dijitSliderLeftBumper { | |
81bea17a AD |
89 | border-left: solid 1px #b5bcc7; |
90 | } | |
91 | .claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { | |
81bea17a | 92 | background-color: #abd6ff; |
1354d172 | 93 | border-color: #759dc0; |
81bea17a AD |
94 | } |
95 | .claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { | |
81bea17a | 96 | background-color: #ffffff; |
1354d172 | 97 | border-color: #759dc0; |
81bea17a AD |
98 | } |
99 | .claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { | |
81bea17a | 100 | background-color: #abd6ff; |
1354d172 | 101 | border-color: #759dc0; |
f0cfe83e AD |
102 | -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); |
103 | -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); | |
104 | box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); | |
81bea17a AD |
105 | } |
106 | .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { | |
81bea17a | 107 | background-color: #ffffff; |
1354d172 | 108 | border-color: #759dc0; |
f0cfe83e AD |
109 | -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); |
110 | -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); | |
111 | box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); | |
81bea17a AD |
112 | } |
113 | .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { | |
114 | background-color: #d3d3d3; | |
115 | /* left side of slider, fill matches border */ | |
116 | ||
117 | background-image: none; | |
2f01fe57 | 118 | } |
81bea17a AD |
119 | .claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper { |
120 | background-color: #efefef; | |
121 | } | |
122 | /* Vertical Slider */ | |
2f01fe57 | 123 | .claro .dijitRuleLabelsContainerV { |
81bea17a AD |
124 | padding: 0 2px; |
125 | } | |
126 | .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { | |
81bea17a AD |
127 | border-color: #b5bcc7; |
128 | background-color: #cfe5fa; | |
f0cfe83e AD |
129 | background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); |
130 | background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); | |
131 | background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); | |
132 | background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); | |
81bea17a AD |
133 | } |
134 | .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { | |
81bea17a AD |
135 | border-color: #b5bcc7; |
136 | background-color: #ffffff; | |
2f01fe57 AD |
137 | } |
138 | .claro .dijitSliderBottomBumper { | |
81bea17a | 139 | border-bottom: solid 1px #b5bcc7; |
2f01fe57 AD |
140 | } |
141 | .claro .dijitSliderTopBumper { | |
81bea17a | 142 | border-top: solid 1px #b5bcc7; |
2f01fe57 | 143 | } |
81bea17a | 144 | .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { |
81bea17a | 145 | background-color: #abd6ff; |
f0cfe83e | 146 | border-color: #759dc0; |
2f01fe57 | 147 | } |
81bea17a | 148 | .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { |
81bea17a | 149 | background-color: #ffffff; |
f0cfe83e | 150 | border-color: #759dc0; |
2f01fe57 | 151 | } |
81bea17a | 152 | .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { |
81bea17a | 153 | background-color: #abd6ff; |
f0cfe83e AD |
154 | border-color: #759dc0; |
155 | -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); | |
156 | -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); | |
157 | box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); | |
2f01fe57 | 158 | } |
81bea17a | 159 | .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { |
81bea17a | 160 | background-color: #ffffff; |
f0cfe83e AD |
161 | border-color: #759dc0; |
162 | -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); | |
163 | -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); | |
164 | box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); | |
2f01fe57 | 165 | } |
81bea17a AD |
166 | .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { |
167 | background-color: #d3d3d3; | |
168 | /* bottom side of slider, fill matches border */ | |
169 | ||
2f01fe57 | 170 | } |
81bea17a AD |
171 | .claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { |
172 | background-color: #efefef; | |
2f01fe57 | 173 | } |
81bea17a | 174 | /* ------- Thumbs ------- */ |
2f01fe57 | 175 | .claro .dijitSliderImageHandleH { |
81bea17a AD |
176 | border: 0; |
177 | width: 18px; | |
178 | height: 16px; | |
1354d172 | 179 | background-image: url("../form/images/sliderThumbs.png"); |
81bea17a AD |
180 | background-repeat: no-repeat; |
181 | background-position: 0 0; | |
2f01fe57 AD |
182 | } |
183 | .claro .dijitSliderHover .dijitSliderImageHandleH { | |
81bea17a | 184 | background-position: -18px 0; |
2f01fe57 AD |
185 | } |
186 | .claro .dijitSliderFocused .dijitSliderImageHandleH { | |
81bea17a | 187 | background-position: -36px 0; |
2f01fe57 | 188 | } |
81bea17a AD |
189 | .claro .dijitSliderProgressBarH .dijitSliderThumbHover { |
190 | background-position: -36px 0; | |
2f01fe57 | 191 | } |
81bea17a AD |
192 | .claro .dijitSliderProgressBarH .dijitSliderThumbActive { |
193 | background-position: -36px 0; | |
2f01fe57 | 194 | } |
81bea17a AD |
195 | .claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { |
196 | background-position: -54px 0; | |
2f01fe57 AD |
197 | } |
198 | .claro .dijitSliderImageHandleV { | |
81bea17a AD |
199 | border: 0; |
200 | width: 18px; | |
201 | height: 16px; | |
1354d172 | 202 | background-image: url("../form/images/sliderThumbs.png"); |
81bea17a AD |
203 | background-repeat: no-repeat; |
204 | background-position: -289px 0; | |
2f01fe57 AD |
205 | } |
206 | .claro .dijitSliderHover .dijitSliderImageHandleV { | |
81bea17a | 207 | background-position: -307px 0; |
2f01fe57 AD |
208 | } |
209 | .claro .dijitSliderFocused .dijitSliderImageHandleV { | |
81bea17a | 210 | background-position: -325px 0; |
2f01fe57 | 211 | } |
81bea17a AD |
212 | .claro .dijitSliderProgressBarV .dijitSliderThumbHover { |
213 | background-position: -325px 0; | |
2f01fe57 | 214 | } |
81bea17a AD |
215 | .claro .dijitSliderProgressBarV .dijitSliderThumbActive { |
216 | background-position: -325px 0; | |
2f01fe57 | 217 | } |
81bea17a AD |
218 | .claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { |
219 | background-position: -343px 0; | |
2f01fe57 | 220 | } |
81bea17a AD |
221 | /* ---- Increment/Decrement Buttons ---- */ |
222 | .claro .dijitSliderButtonContainerH { | |
223 | padding: 1px 3px 1px 2px; | |
2f01fe57 | 224 | } |
81bea17a AD |
225 | .claro .dijitSliderButtonContainerV { |
226 | padding: 3px 1px 2px 1px; | |
2f01fe57 AD |
227 | } |
228 | .claro .dijitSliderDecrementIconH, | |
229 | .claro .dijitSliderIncrementIconH, | |
230 | .claro .dijitSliderDecrementIconV, | |
231 | .claro .dijitSliderIncrementIconV { | |
1354d172 | 232 | background-image: url("../form/images/commonFormArrows.png"); |
81bea17a AD |
233 | background-repeat: no-repeat; |
234 | background-color: #efefef; | |
235 | -moz-border-radius: 2px; | |
236 | border-radius: 2px; | |
237 | border: solid 1px #b5bcc7; | |
238 | font-size: 1px; | |
239 | } | |
240 | .claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH { | |
241 | height: 12px; | |
242 | width: 9px; | |
243 | } | |
244 | .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { | |
245 | height: 9px; | |
246 | width: 12px; | |
2f01fe57 AD |
247 | } |
248 | .claro .dijitSliderActive .dijitSliderDecrementIconH, | |
249 | .claro .dijitSliderActive .dijitSliderIncrementIconH, | |
250 | .claro .dijitSliderActive .dijitSliderDecrementIconV, | |
251 | .claro .dijitSliderActive .dijitSliderIncrementIconV, | |
252 | .claro .dijitSliderHover .dijitSliderDecrementIconH, | |
253 | .claro .dijitSliderHover .dijitSliderIncrementIconH, | |
254 | .claro .dijitSliderHover .dijitSliderDecrementIconV, | |
255 | .claro .dijitSliderHover .dijitSliderIncrementIconV { | |
81bea17a AD |
256 | /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ |
257 | ||
1354d172 | 258 | border: solid 1px #759dc0; |
81bea17a | 259 | background-color: #ffffff; |
2f01fe57 AD |
260 | } |
261 | .claro .dijitSliderDecrementIconH { | |
81bea17a | 262 | background-position: -357px 50%; |
2f01fe57 | 263 | } |
81bea17a AD |
264 | .claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { |
265 | background-position: -393px 50%; | |
2f01fe57 AD |
266 | } |
267 | .claro .dijitSliderIncrementIconH { | |
81bea17a | 268 | background-position: -251px 50%; |
2f01fe57 | 269 | } |
81bea17a AD |
270 | .claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { |
271 | background-position: -283px 50%; | |
2f01fe57 AD |
272 | } |
273 | .claro .dijitSliderDecrementIconV { | |
81bea17a | 274 | background-position: -38px 50%; |
2f01fe57 | 275 | } |
81bea17a AD |
276 | .claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { |
277 | background-position: -73px 50%; | |
2f01fe57 AD |
278 | } |
279 | .claro .dijitSliderIncrementIconV { | |
81bea17a | 280 | background-position: -143px 49%; |
2f01fe57 | 281 | } |
81bea17a AD |
282 | .claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV { |
283 | background-position: -178px 49%; | |
2f01fe57 AD |
284 | } |
285 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, | |
286 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, | |
287 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, | |
288 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { | |
81bea17a | 289 | background-color: #cfe5fa; |
2f01fe57 AD |
290 | } |
291 | .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, | |
292 | .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, | |
293 | .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, | |
294 | .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { | |
81bea17a | 295 | background-color: #abd6ff; |
1354d172 | 296 | border-color: #759dc0; |
2f01fe57 AD |
297 | } |
298 | .claro .dijitSliderButtonInner { | |
81bea17a | 299 | visibility: hidden; |
2f01fe57 | 300 | } |
81bea17a AD |
301 | .claro .dijitSliderDisabled .dijitSliderBar { |
302 | border-color: #d3d3d3; | |
2f01fe57 | 303 | } |
81bea17a AD |
304 | .claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { |
305 | border-color: #d3d3d3; | |
306 | color: #818181; | |
2f01fe57 | 307 | } |
81bea17a AD |
308 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { |
309 | background-position: -321px 50%; | |
310 | background-color: #efefef; | |
2f01fe57 | 311 | } |
81bea17a AD |
312 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { |
313 | background-position: -215px 50%; | |
314 | background-color: #efefef; | |
2f01fe57 | 315 | } |
81bea17a AD |
316 | .claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { |
317 | background-position: -3px 49%; | |
318 | background-color: #efefef; | |
2f01fe57 | 319 | } |
81bea17a AD |
320 | .claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { |
321 | background-position: -107px 49%; | |
322 | background-color: #efefef; | |
2f01fe57 | 323 | } |