lib/dijit/themes/claro/form/Slider.less

   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 }
  69 .claro .dijitRuleLabel {
  70         color: @text-color;
  71 }
  72
  73 /* Horizontal Slider */
  74
  75 .claro .dijitRuleLabelsContainerH {
  76         padding: 2px 0;
  77 }
  78 .claro .dijitSlider .dijitSliderProgressBarH,
  79 .claro .dijitSlider .dijitSliderLeftBumper{
  80         background-image: url("../@{image-form-slider-horizontal}");
  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{
  88         background-image: url("../@{image-form-slider-horizontal}");
  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{
 141         background-image: url("../@{image-form-slider-vertical}");
 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{
 149         background-image: url("../@{image-form-slider-vertical}");
 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;
 197         background-image: url("../@{image-form-slider-thumbs}");
 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;
 221         background-image: url("../@{image-form-slider-thumbs}");
 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 {
 254         background-image: url("../@{image-form-common-arrows}");
 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 }