liquid_feedback_frontend
view style/mdl/slider/_slider.scss @ 1676:8fde003bdeb0
Added support for alternative DN string
| author | bsw |
|---|---|
| date | Mon Jun 07 20:58:31 2021 +0200 (2021-06-07) |
| parents | 32cc544d5a5b |
| children |
line source
1 /**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
17 @import "../variables";
19 // Some CSS magic to target only IE.
20 _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
21 -ms-appearance: none;
22 // The thumb can't overflow the track or the rest of the control in IE, so we
23 // need to make it tall enough to contain the largest version of the thumb.
24 height: 32px;
25 margin: 0;
26 }
28 // Slider component (styled input[type=range]).
29 .mdl-slider {
30 width: calc(100% - 40px);
31 margin: 0 20px;
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;
50 // Disable default focus on Firefox.
51 &::-moz-focus-outer {
52 border: 0;
53 }
55 // Disable tooltip on IE.
56 &::-ms-tooltip {
57 display: none;
58 }
61 /**************************** Tracks ****************************/
62 &::-webkit-slider-runnable-track {
63 background: transparent;
64 }
66 &::-moz-range-track {
67 background: transparent;
68 border: none;
69 }
71 &::-ms-track {
72 background: none;
73 color: transparent;
74 height: 2px;
75 width: 100%;
76 border: none;
77 }
79 &::-ms-fill-lower {
80 padding: 0;
81 // Margin on -ms-track doesn't work right, so we use gradients on the
82 // fills.
83 background: linear-gradient(to right,
84 transparent,
85 transparent 16px,
86 $range-color 16px,
87 $range-color 0);
88 }
90 &::-ms-fill-upper {
91 padding: 0;
92 // Margin on -ms-track doesn't work right, so we use gradients on the
93 // fills.
94 background: linear-gradient(to left,
95 transparent,
96 transparent 16px,
97 $range-bg-color 16px,
98 $range-bg-color 0);
99 }
102 /**************************** Thumbs ****************************/
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 }
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 // -moz-range-thumb doesn't currently support transitions.
127 }
129 &:focus:not(:active)::-webkit-slider-thumb {
130 box-shadow: 0 0 0 10px $range-faded-color;
131 }
133 &:focus:not(:active)::-moz-range-thumb {
134 box-shadow: 0 0 0 10px $range-faded-color;
135 }
137 &:active::-webkit-slider-thumb {
138 background-image: none;
139 background: $range-color;
140 transform: scale(1.5);
141 }
143 &:active::-moz-range-thumb {
144 background-image: none;
145 background: $range-color;
146 transform: scale(1.5);
147 }
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 // -ms-thumb doesn't currently support transitions, but leaving this here
157 // in case support ever gets added.
158 transition: transform 0.18s $animation-curve-default,
159 background 0.28s $animation-curve-default;
160 }
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 }
171 &:active::-ms-thumb {
172 background: $range-color;
173 transform: scale(0.5625);
174 }
177 /**************************** 0-value ****************************/
178 &.is-lowest-value::-webkit-slider-thumb {
179 border: 2px solid $range-bg-color;
180 background: transparent;
181 }
183 &.is-lowest-value::-moz-range-thumb {
184 border: 2px solid $range-bg-color;
185 background: transparent;
186 }
188 &.is-lowest-value +
189 .mdl-slider__background-flex > .mdl-slider__background-upper {
190 left: 6px;
191 }
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 }
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 }
203 &.is-lowest-value:active::-webkit-slider-thumb {
204 border: 1.6px solid $range-bg-color;
205 transform: scale(1.5);
206 }
208 &.is-lowest-value:active +
209 .mdl-slider__background-flex > .mdl-slider__background-upper {
210 left: 9px;
211 }
213 &.is-lowest-value:active::-moz-range-thumb {
214 border: 1.5px solid $range-bg-color;
215 transform: scale(1.5);
216 }
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 }
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 }
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 }
246 &.is-lowest-value::-ms-fill-lower {
247 background: transparent;
248 }
250 &.is-lowest-value::-ms-fill-upper {
251 margin-left: 6px;
252 }
254 &.is-lowest-value:active::-ms-fill-upper {
255 margin-left: 9px;
256 }
258 /**************************** Disabled ****************************/
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 }
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 }
274 &:disabled +
275 .mdl-slider__background-flex > .mdl-slider__background-lower {
276 background-color: $range-bg-color;
277 left: -6px;
278 }
280 &:disabled +
281 .mdl-slider__background-flex > .mdl-slider__background-upper {
282 left: 6px;
283 }
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 }
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 }
301 &.is-lowest-value:disabled:active +
302 .mdl-slider__background-flex > .mdl-slider__background-upper {
303 left: 6px;
304 }
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 }
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 }
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 }
333 &:disabled::-ms-fill-upper {
334 margin-left: 6px;
335 }
337 &.is-lowest-value:disabled:active::-ms-fill-upper {
338 margin-left: 6px;
339 }
340 }
341 }
343 // Since we need to specify a height of 32px in IE, we add a class here for a
344 // container that brings it back to a reasonable height.
345 .mdl-slider__ie-container {
346 height: 18px;
347 overflow: visible;
348 border: none;
349 margin: none;
350 padding: none;
351 }
353 // We use a set of divs behind the track to style it in all non-IE browsers.
354 // This one contains both the background and the slider.
355 .mdl-slider__container {
356 height: 18px;
357 position: relative;
358 background: none;
359 display: flex;
360 flex-direction: row;
361 }
363 // This one sets up a flex box for the styled upper and lower portions of the
364 // the slider track.
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 }
380 // This one styles the lower part of the slider track.
381 .mdl-slider__background-lower {
382 background: $range-color;
383 flex: 0;
384 position: relative;
385 border: 0;
386 padding: 0;
387 }
389 // This one styles the upper part of the slider track.
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 }