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.
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;
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; }
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);
39 @include gradient-bg($form-range-thumb-active-bg);
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);
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);
65 @include gradient-bg($form-range-thumb-active-bg);
70 width: $form-range-track-width;
71 height: $form-range-track-height;
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);
83 &::-webkit-slider-thumb {
84 background-color: $form-range-thumb-disabled-bg;
88 background-color: $form-range-thumb-disabled-bg;