1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
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;
|
11 | background-color: transparent;
|
12 | appearance: none;
|
13 |
|
14 | &:focus {
|
15 | outline: 0;
|
16 |
|
17 |
|
18 |
|
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;
|
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;
|
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;
|
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 | }
|