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 .dijitRuleLabelsContainer {
  67   color: #000000;
  68 }
  69 /* Horizontal Slider */
  70 .claro .dijitRuleLabelsContainerH {
  71   padding: 2px 0;
  72 }
  73 .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper {
  74   border-color: #b5bcc7;
  75   background-color: #cfe5fa;
  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);
  80 }
  81 .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper {
  82   border-color: #b5bcc7;
  83   background-color: #ffffff;
  84 }
  85 .claro .dijitSliderRightBumper {
  86   border-right: solid 1px #b5bcc7;
  87 }
  88 .claro .dijitSliderLeftBumper {
  89   border-left: solid 1px #b5bcc7;
  90 }
  91 .claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper {
  92   background-color: #abd6ff;
  93   border-color: #759dc0;
  94 }
  95 .claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper {
  96   background-color: #ffffff;
  97   border-color: #759dc0;
  98 }
  99 .claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper {
 100   background-color: #abd6ff;
 101   border-color: #759dc0;
 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);
 105 }
 106 .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper {
 107   background-color: #ffffff;
 108   border-color: #759dc0;
 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);
 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   border-color: #b5bcc7;
 128   background-color: #cfe5fa;
 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);
 133 }
 134 .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper {
 135   border-color: #b5bcc7;
 136   background-color: #ffffff;
 137 }
 138 .claro .dijitSliderBottomBumper {
 139   border-bottom: solid 1px #b5bcc7;
 140 }
 141 .claro .dijitSliderTopBumper {
 142   border-top: solid 1px #b5bcc7;
 143 }
 144 .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper {
 145   background-color: #abd6ff;
 146   border-color: #759dc0;
 147 }
 148 .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper {
 149   background-color: #ffffff;
 150   border-color: #759dc0;
 151 }
 152 .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper {
 153   background-color: #abd6ff;
 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);
 158 }
 159 .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper {
 160   background-color: #ffffff;
 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);
 165 }
 166 .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper {
 167   background-color: #d3d3d3;
 168   /* bottom side of slider, fill matches border */
 169
 170 }
 171 .claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper {
 172   background-color: #efefef;
 173 }
 174 /* ------- Thumbs ------- */
 175 .claro .dijitSliderImageHandleH {
 176   border: 0;
 177   width: 18px;
 178   height: 16px;
 179   background-image: url("../form/images/sliderThumbs.png");
 180   background-repeat: no-repeat;
 181   background-position: 0 0;
 182 }
 183 .claro .dijitSliderHover .dijitSliderImageHandleH {
 184   background-position: -18px 0;
 185 }
 186 .claro .dijitSliderFocused .dijitSliderImageHandleH {
 187   background-position: -36px 0;
 188 }
 189 .claro .dijitSliderProgressBarH .dijitSliderThumbHover {
 190   background-position: -36px 0;
 191 }
 192 .claro .dijitSliderProgressBarH .dijitSliderThumbActive {
 193   background-position: -36px 0;
 194 }
 195 .claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH {
 196   background-position: -54px 0;
 197 }
 198 .claro .dijitSliderImageHandleV {
 199   border: 0;
 200   width: 18px;
 201   height: 16px;
 202   background-image: url("../form/images/sliderThumbs.png");
 203   background-repeat: no-repeat;
 204   background-position: -289px 0;
 205 }
 206 .claro .dijitSliderHover .dijitSliderImageHandleV {
 207   background-position: -307px 0;
 208 }
 209 .claro .dijitSliderFocused .dijitSliderImageHandleV {
 210   background-position: -325px 0;
 211 }
 212 .claro .dijitSliderProgressBarV .dijitSliderThumbHover {
 213   background-position: -325px 0;
 214 }
 215 .claro .dijitSliderProgressBarV .dijitSliderThumbActive {
 216   background-position: -325px 0;
 217 }
 218 .claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV {
 219   background-position: -343px 0;
 220 }
 221 /* ---- Increment/Decrement Buttons ---- */
 222 .claro .dijitSliderButtonContainerH {
 223   padding: 1px 3px 1px 2px;
 224 }
 225 .claro .dijitSliderButtonContainerV {
 226   padding: 3px 1px 2px 1px;
 227 }
 228 .claro .dijitSliderDecrementIconH,
 229 .claro .dijitSliderIncrementIconH,
 230 .claro .dijitSliderDecrementIconV,
 231 .claro .dijitSliderIncrementIconV {
 232   background-image: url("../form/images/commonFormArrows.png");
 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;
 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 {
 256   /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */
 257
 258   border: solid 1px #759dc0;
 259   background-color: #ffffff;
 260 }
 261 .claro .dijitSliderDecrementIconH {
 262   background-position: -357px 50%;
 263 }
 264 .claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH {
 265   background-position: -393px 50%;
 266 }
 267 .claro .dijitSliderIncrementIconH {
 268   background-position: -251px 50%;
 269 }
 270 .claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH {
 271   background-position: -283px 50%;
 272 }
 273 .claro .dijitSliderDecrementIconV {
 274   background-position: -38px 50%;
 275 }
 276 .claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV {
 277   background-position: -73px 50%;
 278 }
 279 .claro .dijitSliderIncrementIconV {
 280   background-position: -143px 49%;
 281 }
 282 .claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV {
 283   background-position: -178px 49%;
 284 }
 285 .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover,
 286 .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover,
 287 .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover,
 288 .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover {
 289   background-color: #cfe5fa;
 290 }
 291 .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive,
 292 .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive,
 293 .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive,
 294 .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive {
 295   background-color: #abd6ff;
 296   border-color: #759dc0;
 297 }
 298 .claro .dijitSliderButtonInner {
 299   visibility: hidden;
 300 }
 301 .claro .dijitSliderDisabled .dijitSliderBar {
 302   border-color: #d3d3d3;
 303 }
 304 .claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * {
 305   border-color: #d3d3d3;
 306   color: #818181;
 307 }
 308 .claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH {
 309   background-position: -321px 50%;
 310   background-color: #efefef;
 311 }
 312 .claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH {
 313   background-position: -215px 50%;
 314   background-color: #efefef;
 315 }
 316 .claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV {
 317   background-position: -3px 49%;
 318   background-color: #efefef;
 319 }
 320 .claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV {
 321   background-position: -107px 49%;
 322   background-color: #efefef;
 323 }