bootstrap/forms/_form-range.scss

0001 // Range
0002 //
0003 // Style range inputs the same across browsers. Vendor-specific rules for pseudo
0004 // elements cannot be mixed. As such, there are no shared styles for focus or
0005 // active states on prefixed selectors.
0006
0007 .form-range {
0008   width: 100%;
0009   height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
0010   padding: 0; // Need to reset padding
0011   background-color: transparent;
0012   appearance: none;
0013
0014   &:focus {
0015     outline: none;
0016
0017     // Pseudo-elements must be split across multiple rulesets to have an effect.
0018     // No box-shadow() mixin for focus accessibility.
0019     &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
0020     &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
0021   }
0022
0023   &::-moz-focus-outer {
0024     border: 0;
0025   }
0026
0027   &::-webkit-slider-thumb {
0028     width: $form-range-thumb-width;
0029     height: $form-range-thumb-height;
0030     margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
0031     @include gradient-bg($form-range-thumb-bg);
0032     border: $form-range-thumb-border;
0033     @include border-radius($form-range-thumb-border-radius);
0034     @include box-shadow($form-range-thumb-box-shadow);
0035     @include transition($form-range-thumb-transition);
0036     appearance: none;
0037
0038     &:active {
0039       @include gradient-bg($form-range-thumb-active-bg);
0040     }
0041   }
0042
0043   &::-webkit-slider-runnable-track {
0044     width: $form-range-track-width;
0045     height: $form-range-track-height;
0046     color: transparent; // Why?
0047     cursor: $form-range-track-cursor;
0048     background-color: $form-range-track-bg;
0049     border-color: transparent;
0050     @include border-radius($form-range-track-border-radius);
0051     @include box-shadow($form-range-track-box-shadow);
0052   }
0053
0054   &::-moz-range-thumb {
0055     width: $form-range-thumb-width;
0056     height: $form-range-thumb-height;
0057     @include gradient-bg($form-range-thumb-bg);
0058     border: $form-range-thumb-border;
0059     @include border-radius($form-range-thumb-border-radius);
0060     @include box-shadow($form-range-thumb-box-shadow);
0061     @include transition($form-range-thumb-transition);
0062     appearance: none;
0063
0064     &:active {
0065       @include gradient-bg($form-range-thumb-active-bg);
0066     }
0067   }
0068
0069   &::-moz-range-track {
0070     width: $form-range-track-width;
0071     height: $form-range-track-height;
0072     color: transparent;
0073     cursor: $form-range-track-cursor;
0074     background-color: $form-range-track-bg;
0075     border-color: transparent; // Firefox specific?
0076     @include border-radius($form-range-track-border-radius);
0077     @include box-shadow($form-range-track-box-shadow);
0078   }
0079
0080   &:disabled {
0081     pointer-events: none;
0082
0083     &::-webkit-slider-thumb {
0084       background-color: $form-range-thumb-disabled-bg;
0085     }
0086
0087     &::-moz-range-thumb {
0088       background-color: $form-range-thumb-disabled-bg;
0089     }
0090   }
0091 }