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

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