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 .dijitRuleLabelsContainer {
  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         border-color: @border-color;
  81         background-color: @slider-fullbar-background-color;
  82         .alpha-white-gradient (top, 1,0px, 1,1px, 0,2px);
  83 }
  84 .claro .dijitSlider .dijitSliderRemainingBarH,
  85 .claro .dijitSlider .dijitSliderRightBumper{
  86         border-color: @border-color;
  87         background-color: @slider-remainingbar-background-color;
  88 }
  89 .claro .dijitSliderRightBumper {
  90         border-right: solid 1px @border-color;
  91 }
  92 .claro .dijitSliderLeftBumper {
  93         border-left: solid 1px @border-color;
  94 }
  95 .claro .dijitSliderHover .dijitSliderProgressBarH,
  96 .claro .dijitSliderHover .dijitSliderLeftBumper{
  97         background-color: @slider-hovered-fullbar-background-color;
  98         border-color: @hovered-border-color;
  99 }
 100 .claro .dijitSliderHover .dijitSliderRemainingBarH,
 101 .claro .dijitSliderHover .dijitSliderRightBumper{
 102         background-color: @slider-hovered-remainingbar-background-color;
 103         border-color: @hovered-border-color;
 104 }
 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));
 110 }
 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));
 116 }
 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;
 121 }
 122 .claro .dijitSliderDisabled .dijitSliderRemainingBarH,
 123 .claro .dijitSliderDisabled .dijitSliderRightBumper{
 124         background-color: @disabled-background-color;
 125 }
 126
 127 /* Vertical Slider */
 128
 129 .claro .dijitRuleLabelsContainerV {
 130         padding: 0 2px;
 131 }
 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);
 137 }
 138 .claro .dijitSlider .dijitSliderRemainingBarV,
 139 .claro .dijitSlider .dijitSliderTopBumper{
 140         border-color: @border-color;
 141         background-color: @slider-remainingbar-background-color;
 142 }
 143 .claro .dijitSliderBottomBumper {
 144         border-bottom: solid 1px @border-color;
 145 }
 146 .claro .dijitSliderTopBumper {
 147         border-top: solid 1px @border-color;
 148 }
 149 .claro .dijitSliderHover .dijitSliderProgressBarV,
 150 .claro .dijitSliderHover .dijitSliderBottomBumper{
 151         background-color: @slider-hovered-fullbar-background-color;
 152         border-color: @hovered-border-color;
 153 }
 154 .claro .dijitSliderHover .dijitSliderRemainingBarV,
 155 .claro .dijitSliderHover .dijitSliderTopBumper{
 156         background-color: @slider-hovered-remainingbar-background-color;
 157         border-color: @hovered-border-color;
 158 }
 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));
 164 }
 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));
 170 }
 171 .claro .dijitSliderDisabled .dijitSliderProgressBarV,
 172 .claro .dijitSliderDisabled .dijitSliderBottomBumper{
 173         background-color: @disabled-border-color;       /* bottom side of slider, fill matches border */
 174 }
 175 .claro .dijitSliderDisabled .dijitSliderRemainingBarV,
 176 .claro .dijitSliderDisabled .dijitSliderTopBumper{
 177         background-color: @disabled-background-color;
 178 }
 179
 180
 181 /* ------- Thumbs ------- */
 182
 183 .claro .dijitSliderImageHandleH {
 184         border: 0;
 185         width: 18px;
 186         height: 16px;
 187         background-image: url("../@{image-form-slider-thumbs}");
 188         background-repeat:no-repeat;
 189         background-position:0 0;
 190 }
 191 .claro .dijitSliderHover .dijitSliderImageHandleH {
 192         background-position:-18px 0;
 193 }
 194 .claro .dijitSliderFocused .dijitSliderImageHandleH {
 195         background-position:-36px 0;
 196 }
 197 .claro .dijitSliderProgressBarH .dijitSliderThumbHover{
 198         background-position:-36px 0;
 199 }
 200 .claro .dijitSliderProgressBarH .dijitSliderThumbActive{
 201         background-position:-36px 0;
 202 }
 203 .claro .dijitSliderReadOnly .dijitSliderImageHandleH,
 204 .claro .dijitSliderDisabled .dijitSliderImageHandleH {
 205         background-position:-54px 0;
 206 }
 207 .claro .dijitSliderImageHandleV {
 208         border: 0;
 209         width: 18px;
 210         height: 16px;
 211         background-image: url("../@{image-form-slider-thumbs}");
 212         background-repeat:no-repeat;
 213         background-position:-289px 0;
 214 }
 215 .claro .dijitSliderHover .dijitSliderImageHandleV {
 216         background-position:-307px 0;
 217 }
 218 .claro .dijitSliderFocused .dijitSliderImageHandleV {
 219         background-position:-325px 0;
 220 }
 221 .claro .dijitSliderProgressBarV .dijitSliderThumbHover{
 222         background-position:-325px 0;
 223 }
 224 .claro .dijitSliderProgressBarV .dijitSliderThumbActive{
 225         background-position:-325px 0;
 226 }
 227 .claro .dijitSliderReadOnly .dijitSliderImageHandleV,
 228 .claro .dijitSliderDisabled .dijitSliderImageHandleV {
 229         background-position:-343px 0;
 230 }
 231
 232 /* ---- Increment/Decrement Buttons ---- */
 233
 234 .claro .dijitSliderButtonContainerH{
 235         padding: 1px 3px 1px 2px;
 236 }
 237 .claro .dijitSliderButtonContainerV{
 238         padding: 3px 1px 2px 1px;
 239 }
 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;
 247         .border-radius(2px);
 248         border: solid 1px @border-color;
 249         font-size: 1px;
 250 }
 251 .claro .dijitSliderDecrementIconH,
 252 .claro .dijitSliderIncrementIconH {
 253         height: 12px;
 254         width: 9px;
 255 }
 256 .claro .dijitSliderDecrementIconV,
 257 .claro .dijitSliderIncrementIconV {
 258         height: 9px;
 259         width: 12px;
 260 }
 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;
 272 }
 273
 274 .claro .dijitSliderDecrementIconH {
 275         background-position:-357px 50%;
 276 }
 277 .claro .dijitSliderActive .dijitSliderDecrementIconH
 278 .claro .dijitSliderHover .dijitSliderDecrementIconH {
 279         background-position:-393px 50%;
 280 }
 281 .claro .dijitSliderIncrementIconH {
 282         background-position:-251px 50%;
 283 }
 284 .claro .dijitSliderActive .dijitSliderIncrementIconH
 285 .claro .dijitSliderHover .dijitSliderIncrementIconH {
 286         background-position:-283px 50%;
 287 }
 288 .claro .dijitSliderDecrementIconV {
 289         background-position:-38px 50%;
 290 }
 291 .claro .dijitSliderActive .dijitSliderDecrementIconV
 292 .claro .dijitSliderHover .dijitSliderDecrementIconV {
 293         background-position:-73px 50%;
 294 }
 295 .claro .dijitSliderIncrementIconV {
 296         background-position:-143px 49%;
 297 }
 298 .claro .dijitSliderActive .dijitSliderIncrementIconV
 299 .claro .dijitSliderHover .dijitSliderIncrementIconV {
 300         background-position:-178px 49%;
 301 }
 302 .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover,
 303 .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover,
 304 .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover,
 305 .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover {
 306         background-color: @slider-button-hovered-background-color;
 307 }
 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;
 314 }
 315 .claro .dijitSliderButtonInner {
 316         visibility: hidden;
 317 }
 318 .claro .dijitSliderDisabled .dijitSliderBar{
 319         border-color: @disabled-border-color;
 320 }
 321 .claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * {
 322         border-color: @disabled-border-color;
 323         color: @disabled-text-color;
 324 }
 325 .claro .dijitSliderReadOnly .dijitSliderDecrementIconH,
 326 .claro .dijitSliderDisabled .dijitSliderDecrementIconH {
 327         background-position:-321px 50%;
 328         background-color:@disabled-background-color;
 329 }
 330 .claro .dijitSliderReadOnly .dijitSliderIncrementIconH,
 331 .claro .dijitSliderDisabled .dijitSliderIncrementIconH {
 332         background-position:-215px 50%;
 333         background-color:@disabled-background-color;
 334 }
 335 .claro .dijitSliderReadOnly .dijitSliderDecrementIconV,
 336 .claro .dijitSliderDisabled .dijitSliderDecrementIconV {
 337         background-position:-3px 49%;
 338         background-color:@disabled-background-color;
 339 }
 340 .claro .dijitSliderReadOnly .dijitSliderIncrementIconV,
 341 .claro .dijitSliderDisabled .dijitSliderIncrementIconV {
 342         background-position:-107px 49%;
 343         background-color:@disabled-background-color;
 344 }