resources/tools/dash/app/pal/static/sass/bootstrap/forms/_form-range.scss

   1 // Range
   2 //
   3 // Style range inputs the same across browsers. Vendor-specific rules for pseudo
   4 // elements cannot be mixed. As such, there are no shared styles for focus or
   5 // active states on prefixed selectors.
   6
   7 .form-range {
   8   width: 100%;
   9   height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
  10   padding: 0; // Need to reset padding
  11   background-color: transparent;
  12   appearance: none;
  13
  14   &:focus {
  15     outline: 0;
  16
  17     // Pseudo-elements must be split across multiple rulesets to have an effect.
  18     // No box-shadow() mixin for focus accessibility.
  19     &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
  20     &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
  21   }
  22
  23   &::-moz-focus-outer {
  24     border: 0;
  25   }
  26
  27   &::-webkit-slider-thumb {
  28     width: $form-range-thumb-width;
  29     height: $form-range-thumb-height;
  30     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
  31     @include gradient-bg($form-range-thumb-bg);
  32     border: $form-range-thumb-border;
  33     @include border-radius($form-range-thumb-border-radius);
  34     @include box-shadow($form-range-thumb-box-shadow);
  35     @include transition($form-range-thumb-transition);
  36     appearance: none;
  37
  38     &:active {
  39       @include gradient-bg($form-range-thumb-active-bg);
  40     }
  41   }
  42
  43   &::-webkit-slider-runnable-track {
  44     width: $form-range-track-width;
  45     height: $form-range-track-height;
  46     color: transparent; // Why?
  47     cursor: $form-range-track-cursor;
  48     background-color: $form-range-track-bg;
  49     border-color: transparent;
  50     @include border-radius($form-range-track-border-radius);
  51     @include box-shadow($form-range-track-box-shadow);
  52   }
  53
  54   &::-moz-range-thumb {
  55     width: $form-range-thumb-width;
  56     height: $form-range-thumb-height;
  57     @include gradient-bg($form-range-thumb-bg);
  58     border: $form-range-thumb-border;
  59     @include border-radius($form-range-thumb-border-radius);
  60     @include box-shadow($form-range-thumb-box-shadow);
  61     @include transition($form-range-thumb-transition);
  62     appearance: none;
  63
  64     &:active {
  65       @include gradient-bg($form-range-thumb-active-bg);
  66     }
  67   }
  68
  69   &::-moz-range-track {
  70     width: $form-range-track-width;
  71     height: $form-range-track-height;
  72     color: transparent;
  73     cursor: $form-range-track-cursor;
  74     background-color: $form-range-track-bg;
  75     border-color: transparent; // Firefox specific?
  76     @include border-radius($form-range-track-border-radius);
  77     @include box-shadow($form-range-track-box-shadow);
  78   }
  79
  80   &:disabled {
  81     pointer-events: none;
  82
  83     &::-webkit-slider-thumb {
  84       background-color: $form-range-thumb-disabled-bg;
  85     }
  86
  87     &::-moz-range-thumb {
  88       background-color: $form-range-thumb-disabled-bg;
  89     }
  90   }
  91 }