1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | @import "../variables";
|
18 |
|
19 |
|
20 | _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
|
21 | -ms-appearance: none;
|
22 |
|
23 |
|
24 | height: 32px;
|
25 | margin: 0;
|
26 | }
|
27 |
|
28 |
|
29 | .mdl-slider {
|
30 | width: calc(100% - 40px);
|
31 | margin: 0 20px;
|
32 |
|
33 | &.is-upgraded {
|
34 | -webkit-appearance: none;
|
35 | -moz-appearance: none;
|
36 | appearance: none;
|
37 | height: 2px;
|
38 | background: transparent;
|
39 | -webkit-user-select: none;
|
40 | -moz-user-select: none;
|
41 | user-select: none;
|
42 | outline: 0;
|
43 | padding: 0;
|
44 | color: $range-color;
|
45 | align-self: center;
|
46 | z-index: 1;
|
47 | cursor: pointer;
|
48 |
|
49 |
|
50 |
|
51 | &::-moz-focus-outer {
|
52 | border: 0;
|
53 | }
|
54 |
|
55 |
|
56 | &::-ms-tooltip {
|
57 | display: none;
|
58 | }
|
59 |
|
60 |
|
61 |
|
62 | &::-webkit-slider-runnable-track {
|
63 | background: transparent;
|
64 | }
|
65 |
|
66 | &::-moz-range-track {
|
67 | background: transparent;
|
68 | border: none;
|
69 | }
|
70 |
|
71 | &::-ms-track {
|
72 | background: none;
|
73 | color: transparent;
|
74 | height: 2px;
|
75 | width: 100%;
|
76 | border: none;
|
77 | }
|
78 |
|
79 | &::-ms-fill-lower {
|
80 | padding: 0;
|
81 |
|
82 |
|
83 | background: linear-gradient(to right,
|
84 | transparent,
|
85 | transparent 16px,
|
86 | $range-color 16px,
|
87 | $range-color 0);
|
88 | }
|
89 |
|
90 | &::-ms-fill-upper {
|
91 | padding: 0;
|
92 |
|
93 |
|
94 | background: linear-gradient(to left,
|
95 | transparent,
|
96 | transparent 16px,
|
97 | $range-bg-color 16px,
|
98 | $range-bg-color 0);
|
99 | }
|
100 |
|
101 |
|
102 |
|
103 | &::-webkit-slider-thumb {
|
104 | -webkit-appearance: none;
|
105 | width: 12px;
|
106 | height: 12px;
|
107 | box-sizing: border-box;
|
108 | border-radius: 50%;
|
109 | background: $range-color;
|
110 | border: none;
|
111 | transition: transform 0.18s $animation-curve-default,
|
112 | border 0.18s $animation-curve-default,
|
113 | box-shadow 0.18s $animation-curve-default,
|
114 | background 0.28s $animation-curve-default;
|
115 | }
|
116 |
|
117 | &::-moz-range-thumb {
|
118 | -moz-appearance: none;
|
119 | width: 12px;
|
120 | height: 12px;
|
121 | box-sizing: border-box;
|
122 | border-radius: 50%;
|
123 | background-image: none;
|
124 | background: $range-color;
|
125 | border: none;
|
126 |
|
127 | }
|
128 |
|
129 | &:focus:not(:active)::-webkit-slider-thumb {
|
130 | box-shadow: 0 0 0 10px $range-faded-color;
|
131 | }
|
132 |
|
133 | &:focus:not(:active)::-moz-range-thumb {
|
134 | box-shadow: 0 0 0 10px $range-faded-color;
|
135 | }
|
136 |
|
137 | &:active::-webkit-slider-thumb {
|
138 | background-image: none;
|
139 | background: $range-color;
|
140 | transform: scale(1.5);
|
141 | }
|
142 |
|
143 | &:active::-moz-range-thumb {
|
144 | background-image: none;
|
145 | background: $range-color;
|
146 | transform: scale(1.5);
|
147 | }
|
148 |
|
149 | &::-ms-thumb {
|
150 | width: 32px;
|
151 | height: 32px;
|
152 | border: none;
|
153 | border-radius: 50%;
|
154 | background: $range-color;
|
155 | transform: scale(0.375);
|
156 |
|
157 |
|
158 | transition: transform 0.18s $animation-curve-default,
|
159 | background 0.28s $animation-curve-default;
|
160 | }
|
161 |
|
162 | &:focus:not(:active)::-ms-thumb {
|
163 | background: radial-gradient(circle closest-side,
|
164 | $range-color 0%,
|
165 | $range-color 37.5%,
|
166 | $range-faded-color 37.5%,
|
167 | $range-faded-color 100%);
|
168 | transform: scale(1);
|
169 | }
|
170 |
|
171 | &:active::-ms-thumb {
|
172 | background: $range-color;
|
173 | transform: scale(0.5625);
|
174 | }
|
175 |
|
176 |
|
177 |
|
178 | &.is-lowest-value::-webkit-slider-thumb {
|
179 | border: 2px solid $range-bg-color;
|
180 | background: transparent;
|
181 | }
|
182 |
|
183 | &.is-lowest-value::-moz-range-thumb {
|
184 | border: 2px solid $range-bg-color;
|
185 | background: transparent;
|
186 | }
|
187 |
|
188 | &.is-lowest-value +
|
189 | .mdl-slider__background-flex > .mdl-slider__background-upper {
|
190 | left: 6px;
|
191 | }
|
192 |
|
193 | &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
|
194 | box-shadow: 0 0 0 10px $range-bg-focus-color;
|
195 | background: $range-bg-focus-color;
|
196 | }
|
197 |
|
198 | &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
|
199 | box-shadow: 0 0 0 10px $range-bg-focus-color;
|
200 | background: $range-bg-focus-color;
|
201 | }
|
202 |
|
203 | &.is-lowest-value:active::-webkit-slider-thumb {
|
204 | border: 1.6px solid $range-bg-color;
|
205 | transform: scale(1.5);
|
206 | }
|
207 |
|
208 | &.is-lowest-value:active +
|
209 | .mdl-slider__background-flex > .mdl-slider__background-upper {
|
210 | left: 9px;
|
211 | }
|
212 |
|
213 | &.is-lowest-value:active::-moz-range-thumb {
|
214 | border: 1.5px solid $range-bg-color;
|
215 | transform: scale(1.5);
|
216 | }
|
217 |
|
218 | &.is-lowest-value::-ms-thumb {
|
219 | background: radial-gradient(circle closest-side,
|
220 | transparent 0%,
|
221 | transparent 66.67%,
|
222 | $range-bg-color 66.67%,
|
223 | $range-bg-color 100%);
|
224 | }
|
225 |
|
226 | &.is-lowest-value:focus:not(:active)::-ms-thumb {
|
227 | background: radial-gradient(circle closest-side,
|
228 | $range-bg-focus-color 0%,
|
229 | $range-bg-focus-color 25%,
|
230 | $range-bg-color 25%,
|
231 | $range-bg-color 37.5%,
|
232 | $range-bg-focus-color 37.5%,
|
233 | $range-bg-focus-color 100%);
|
234 | transform: scale(1);
|
235 | }
|
236 |
|
237 | &.is-lowest-value:active::-ms-thumb {
|
238 | transform: scale(0.5625);
|
239 | background: radial-gradient(circle closest-side,
|
240 | transparent 0%,
|
241 | transparent 77.78%,
|
242 | $range-bg-color 77.78%,
|
243 | $range-bg-color 100%);
|
244 | }
|
245 |
|
246 | &.is-lowest-value::-ms-fill-lower {
|
247 | background: transparent;
|
248 | }
|
249 |
|
250 | &.is-lowest-value::-ms-fill-upper {
|
251 | margin-left: 6px;
|
252 | }
|
253 |
|
254 | &.is-lowest-value:active::-ms-fill-upper {
|
255 | margin-left: 9px;
|
256 | }
|
257 |
|
258 |
|
259 |
|
260 | &:disabled:focus::-webkit-slider-thumb,
|
261 | &:disabled:active::-webkit-slider-thumb,
|
262 | &:disabled::-webkit-slider-thumb {
|
263 | transform: scale(0.667);
|
264 | background: $range-bg-color;
|
265 | }
|
266 |
|
267 | &:disabled:focus::-moz-range-thumb,
|
268 | &:disabled:active::-moz-range-thumb,
|
269 | &:disabled::-moz-range-thumb {
|
270 | transform: scale(0.667);
|
271 | background: $range-bg-color;
|
272 | }
|
273 |
|
274 | &:disabled +
|
275 | .mdl-slider__background-flex > .mdl-slider__background-lower {
|
276 | background-color: $range-bg-color;
|
277 | left: -6px;
|
278 | }
|
279 |
|
280 | &:disabled +
|
281 | .mdl-slider__background-flex > .mdl-slider__background-upper {
|
282 | left: 6px;
|
283 | }
|
284 |
|
285 | &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
|
286 | &.is-lowest-value:disabled:active::-webkit-slider-thumb,
|
287 | &.is-lowest-value:disabled::-webkit-slider-thumb {
|
288 | border: 3px solid $range-bg-color;
|
289 | background: transparent;
|
290 | transform: scale(0.667);
|
291 | }
|
292 |
|
293 | &.is-lowest-value:disabled:focus::-moz-range-thumb,
|
294 | &.is-lowest-value:disabled:active::-moz-range-thumb,
|
295 | &.is-lowest-value:disabled::-moz-range-thumb {
|
296 | border: 3px solid $range-bg-color;
|
297 | background: transparent;
|
298 | transform: scale(0.667);
|
299 | }
|
300 |
|
301 | &.is-lowest-value:disabled:active +
|
302 | .mdl-slider__background-flex > .mdl-slider__background-upper {
|
303 | left: 6px;
|
304 | }
|
305 |
|
306 | &:disabled:focus::-ms-thumb,
|
307 | &:disabled:active::-ms-thumb,
|
308 | &:disabled::-ms-thumb {
|
309 | transform: scale(0.25);
|
310 | background: $range-bg-color;
|
311 | }
|
312 |
|
313 | &.is-lowest-value:disabled:focus::-ms-thumb,
|
314 | &.is-lowest-value:disabled:active::-ms-thumb,
|
315 | &.is-lowest-value:disabled::-ms-thumb {
|
316 | transform: scale(0.25);
|
317 | background: radial-gradient(circle closest-side,
|
318 | transparent 0%,
|
319 | transparent 50%,
|
320 | $range-bg-color 50%,
|
321 | $range-bg-color 100%);
|
322 | }
|
323 |
|
324 | &:disabled::-ms-fill-lower {
|
325 | margin-right: 6px;
|
326 | background: linear-gradient(to right,
|
327 | transparent,
|
328 | transparent 25px,
|
329 | $range-bg-color 25px,
|
330 | $range-bg-color 0);
|
331 | }
|
332 |
|
333 | &:disabled::-ms-fill-upper {
|
334 | margin-left: 6px;
|
335 | }
|
336 |
|
337 | &.is-lowest-value:disabled:active::-ms-fill-upper {
|
338 | margin-left: 6px;
|
339 | }
|
340 | }
|
341 | }
|
342 |
|
343 |
|
344 |
|
345 | .mdl-slider__ie-container {
|
346 | height: 18px;
|
347 | overflow: visible;
|
348 | border: none;
|
349 | margin: none;
|
350 | padding: none;
|
351 | }
|
352 |
|
353 |
|
354 |
|
355 | .mdl-slider__container {
|
356 | height: 18px;
|
357 | position: relative;
|
358 | background: none;
|
359 | display: flex;
|
360 | flex-direction: row;
|
361 | }
|
362 |
|
363 |
|
364 |
|
365 | .mdl-slider__background-flex {
|
366 | background: transparent;
|
367 | position: absolute;
|
368 | height: 2px;
|
369 | width: calc(100% - 52px);
|
370 | top: 50%;
|
371 | left: 0;
|
372 | margin: 0 26px;
|
373 | display: flex;
|
374 | overflow: hidden;
|
375 | border: 0;
|
376 | padding: 0;
|
377 | transform: translate(0, -1px);
|
378 | }
|
379 |
|
380 |
|
381 | .mdl-slider__background-lower {
|
382 | background: $range-color;
|
383 | flex: 0;
|
384 | position: relative;
|
385 | border: 0;
|
386 | padding: 0;
|
387 | }
|
388 |
|
389 |
|
390 | .mdl-slider__background-upper {
|
391 | background: $range-bg-color;
|
392 | flex: 0;
|
393 | position: relative;
|
394 | border: 0;
|
395 | padding: 0;
|
396 | transition: left 0.18s $animation-curve-default
|
397 | }
|