1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | .mdc-elevation-overlay {
|
9 | position: absolute;
|
10 | border-radius: inherit;
|
11 | pointer-events: none;
|
12 | opacity: 0;
|
13 |
|
14 | opacity: var(--mdc-elevation-overlay-opacity, 0);
|
15 | transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
16 | background-color: #fff;
|
17 |
|
18 | background-color: var(--mdc-elevation-overlay-color, #fff);
|
19 | }
|
20 |
|
21 | .mdc-switch {
|
22 | align-items: center;
|
23 | background: none;
|
24 | border: none;
|
25 | cursor: pointer;
|
26 | display: inline-flex;
|
27 | flex-shrink: 0;
|
28 | margin: 0;
|
29 | outline: none;
|
30 | overflow: visible;
|
31 | padding: 0;
|
32 | position: relative;
|
33 | }
|
34 | .mdc-switch:disabled {
|
35 | cursor: default;
|
36 | pointer-events: none;
|
37 | }
|
38 |
|
39 | .mdc-switch__track {
|
40 | overflow: hidden;
|
41 | position: relative;
|
42 | width: 100%;
|
43 | }
|
44 | .mdc-switch__track::before, .mdc-switch__track::after {
|
45 | border: 1px solid transparent;
|
46 | border-radius: inherit;
|
47 | box-sizing: border-box;
|
48 | content: "";
|
49 | height: 100%;
|
50 |
|
51 |
|
52 | left: 0;
|
53 | position: absolute;
|
54 | width: 100%;
|
55 | }
|
56 | @media screen and (forced-colors: active) {
|
57 | .mdc-switch__track::before, .mdc-switch__track::after {
|
58 | border-color: currentColor;
|
59 | }
|
60 | }
|
61 | .mdc-switch__track::before {
|
62 | transition: -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
63 | transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
64 | transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
65 | -webkit-transform: translateX(0);
|
66 | transform: translateX(0);
|
67 | }
|
68 | .mdc-switch__track::after {
|
69 | transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
|
70 | transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
|
71 | transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
|
72 | -webkit-transform: translateX(-100%);
|
73 | transform: translateX(-100%);
|
74 | }
|
75 | [dir=rtl] .mdc-switch__track::after, .mdc-switch__track[dir=rtl]::after {
|
76 |
|
77 | -webkit-transform: translateX(100%);
|
78 | transform: translateX(100%);
|
79 |
|
80 | }
|
81 |
|
82 | .mdc-switch--selected .mdc-switch__track::before {
|
83 | transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
|
84 | transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
|
85 | transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
|
86 | -webkit-transform: translateX(100%);
|
87 | transform: translateX(100%);
|
88 | }
|
89 | [dir=rtl] .mdc-switch--selected .mdc-switch__track::before, .mdc-switch--selected .mdc-switch__track[dir=rtl]::before {
|
90 |
|
91 | -webkit-transform: translateX(-100%);
|
92 | transform: translateX(-100%);
|
93 |
|
94 | }
|
95 |
|
96 | .mdc-switch--selected .mdc-switch__track::after {
|
97 | transition: -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
98 | transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
99 | transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
100 | -webkit-transform: translateX(0);
|
101 | transform: translateX(0);
|
102 | }
|
103 |
|
104 | .mdc-switch__handle-track {
|
105 | height: 100%;
|
106 | pointer-events: none;
|
107 | position: absolute;
|
108 | top: 0;
|
109 | transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
110 | transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
111 | transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
112 |
|
113 |
|
114 | left: 0;
|
115 |
|
116 |
|
117 | right: auto;
|
118 | -webkit-transform: translateX(0);
|
119 | transform: translateX(0);
|
120 | }
|
121 | [dir=rtl] .mdc-switch__handle-track, .mdc-switch__handle-track[dir=rtl] {
|
122 |
|
123 |
|
124 |
|
125 | left: auto;
|
126 |
|
127 |
|
128 | right: 0;
|
129 |
|
130 | }
|
131 |
|
132 | .mdc-switch--selected .mdc-switch__handle-track {
|
133 | -webkit-transform: translateX(100%);
|
134 | transform: translateX(100%);
|
135 | }
|
136 | [dir=rtl] .mdc-switch--selected .mdc-switch__handle-track, .mdc-switch--selected .mdc-switch__handle-track[dir=rtl] {
|
137 |
|
138 | -webkit-transform: translateX(-100%);
|
139 | transform: translateX(-100%);
|
140 |
|
141 | }
|
142 |
|
143 | .mdc-switch__handle {
|
144 | display: flex;
|
145 | pointer-events: auto;
|
146 | position: absolute;
|
147 | top: 50%;
|
148 | -webkit-transform: translateY(-50%);
|
149 | transform: translateY(-50%);
|
150 |
|
151 |
|
152 | left: 0;
|
153 |
|
154 |
|
155 | right: auto;
|
156 | }
|
157 | [dir=rtl] .mdc-switch__handle, .mdc-switch__handle[dir=rtl] {
|
158 |
|
159 |
|
160 |
|
161 | left: auto;
|
162 |
|
163 |
|
164 | right: 0;
|
165 |
|
166 | }
|
167 |
|
168 | .mdc-switch__handle::before, .mdc-switch__handle::after {
|
169 | border: 1px solid transparent;
|
170 | border-radius: inherit;
|
171 | box-sizing: border-box;
|
172 | content: "";
|
173 | width: 100%;
|
174 | height: 100%;
|
175 |
|
176 |
|
177 | left: 0;
|
178 | position: absolute;
|
179 | top: 0;
|
180 | transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
181 | z-index: -1;
|
182 | }
|
183 | @media screen and (forced-colors: active) {
|
184 | .mdc-switch__handle::before, .mdc-switch__handle::after {
|
185 | border-color: currentColor;
|
186 | }
|
187 | }
|
188 |
|
189 | .mdc-switch__shadow {
|
190 | border-radius: inherit;
|
191 | bottom: 0;
|
192 |
|
193 |
|
194 | left: 0;
|
195 | position: absolute;
|
196 |
|
197 |
|
198 | right: 0;
|
199 | top: 0;
|
200 | }
|
201 |
|
202 | .mdc-elevation-overlay {
|
203 | bottom: 0;
|
204 |
|
205 |
|
206 | left: 0;
|
207 |
|
208 |
|
209 | right: 0;
|
210 | top: 0;
|
211 | }
|
212 |
|
213 | .mdc-switch__ripple {
|
214 |
|
215 |
|
216 | left: 50%;
|
217 | position: absolute;
|
218 | top: 50%;
|
219 | -webkit-transform: translate(-50%, -50%);
|
220 | transform: translate(-50%, -50%);
|
221 | z-index: -1;
|
222 | }
|
223 | .mdc-switch:disabled .mdc-switch__ripple {
|
224 | display: none;
|
225 | }
|
226 |
|
227 | .mdc-switch__icons {
|
228 | height: 100%;
|
229 | position: relative;
|
230 | width: 100%;
|
231 | z-index: 1;
|
232 | }
|
233 |
|
234 | .mdc-switch__icon {
|
235 | bottom: 0;
|
236 |
|
237 |
|
238 | left: 0;
|
239 | margin: auto;
|
240 | position: absolute;
|
241 |
|
242 |
|
243 | right: 0;
|
244 | top: 0;
|
245 | opacity: 0;
|
246 | transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1);
|
247 | }
|
248 |
|
249 | .mdc-switch--selected .mdc-switch__icon--on,
|
250 | .mdc-switch--unselected .mdc-switch__icon--off {
|
251 | opacity: 1;
|
252 | transition: opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1);
|
253 | }
|
254 |
|
255 | .mdc-switch {
|
256 | --mdc-ripple-fg-size: 0;
|
257 | --mdc-ripple-left: 0;
|
258 | --mdc-ripple-top: 0;
|
259 | --mdc-ripple-fg-scale: 1;
|
260 | --mdc-ripple-fg-translate-end: 0;
|
261 | --mdc-ripple-fg-translate-start: 0;
|
262 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
263 | will-change: transform, opacity;
|
264 | }
|
265 | @-webkit-keyframes mdc-ripple-fg-radius-in {
|
266 | from {
|
267 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
268 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
269 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
270 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
271 | }
|
272 | to {
|
273 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
274 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
275 | }
|
276 | }
|
277 | @keyframes mdc-ripple-fg-radius-in {
|
278 | from {
|
279 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
280 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
281 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
282 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
283 | }
|
284 | to {
|
285 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
286 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
287 | }
|
288 | }
|
289 | @-webkit-keyframes mdc-ripple-fg-opacity-in {
|
290 | from {
|
291 | -webkit-animation-timing-function: linear;
|
292 | animation-timing-function: linear;
|
293 | opacity: 0;
|
294 | }
|
295 | to {
|
296 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
297 | }
|
298 | }
|
299 | @keyframes mdc-ripple-fg-opacity-in {
|
300 | from {
|
301 | -webkit-animation-timing-function: linear;
|
302 | animation-timing-function: linear;
|
303 | opacity: 0;
|
304 | }
|
305 | to {
|
306 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
307 | }
|
308 | }
|
309 | @-webkit-keyframes mdc-ripple-fg-opacity-out {
|
310 | from {
|
311 | -webkit-animation-timing-function: linear;
|
312 | animation-timing-function: linear;
|
313 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
314 | }
|
315 | to {
|
316 | opacity: 0;
|
317 | }
|
318 | }
|
319 | @keyframes mdc-ripple-fg-opacity-out {
|
320 | from {
|
321 | -webkit-animation-timing-function: linear;
|
322 | animation-timing-function: linear;
|
323 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
324 | }
|
325 | to {
|
326 | opacity: 0;
|
327 | }
|
328 | }
|
329 | .mdc-switch .mdc-switch__ripple::before,
|
330 | .mdc-switch .mdc-switch__ripple::after {
|
331 | position: absolute;
|
332 | border-radius: 50%;
|
333 | opacity: 0;
|
334 | pointer-events: none;
|
335 | content: "";
|
336 | }
|
337 | .mdc-switch .mdc-switch__ripple::before {
|
338 | transition: opacity 15ms linear, background-color 15ms linear;
|
339 | z-index: 1;
|
340 |
|
341 | z-index: var(--mdc-ripple-z-index, 1);
|
342 | }
|
343 | .mdc-switch .mdc-switch__ripple::after {
|
344 | z-index: 0;
|
345 |
|
346 | z-index: var(--mdc-ripple-z-index, 0);
|
347 | }
|
348 | .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before {
|
349 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
|
350 | transform: scale(var(--mdc-ripple-fg-scale, 1));
|
351 | }
|
352 | .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
|
353 | top: 0;
|
354 |
|
355 |
|
356 | left: 0;
|
357 | -webkit-transform: scale(0);
|
358 | transform: scale(0);
|
359 | -webkit-transform-origin: center center;
|
360 | transform-origin: center center;
|
361 | }
|
362 | .mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after {
|
363 | top: var(--mdc-ripple-top, 0);
|
364 |
|
365 |
|
366 | left: var(--mdc-ripple-left, 0);
|
367 | }
|
368 | .mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::after {
|
369 | -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
370 | animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
371 | }
|
372 | .mdc-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::after {
|
373 | -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
|
374 | animation: mdc-ripple-fg-opacity-out 150ms;
|
375 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
376 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
377 | }
|
378 | .mdc-switch .mdc-switch__ripple::before,
|
379 | .mdc-switch .mdc-switch__ripple::after {
|
380 | top: calc(50% - 50%);
|
381 |
|
382 |
|
383 | left: calc(50% - 50%);
|
384 | width: 100%;
|
385 | height: 100%;
|
386 | }
|
387 | .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before,
|
388 | .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
|
389 | top: var(--mdc-ripple-top, calc(50% - 50%));
|
390 |
|
391 |
|
392 | left: var(--mdc-ripple-left, calc(50% - 50%));
|
393 | width: var(--mdc-ripple-fg-size, 100%);
|
394 | height: var(--mdc-ripple-fg-size, 100%);
|
395 | }
|
396 | .mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
|
397 | width: var(--mdc-ripple-fg-size, 100%);
|
398 | height: var(--mdc-ripple-fg-size, 100%);
|
399 | }
|
400 | .mdc-switch .mdc-switch__focus-ring-wrapper {
|
401 | width: 100%;
|
402 | position: absolute;
|
403 | top: 50%;
|
404 |
|
405 |
|
406 | left: 50%;
|
407 |
|
408 |
|
409 | -webkit-transform: translate(-50%, -50%);
|
410 | transform: translate(-50%, -50%);
|
411 | }
|
412 | .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring {
|
413 | pointer-events: none;
|
414 | border: 2px solid transparent;
|
415 | border-radius: 6px;
|
416 | box-sizing: content-box;
|
417 | position: absolute;
|
418 | top: 50%;
|
419 |
|
420 |
|
421 | left: 50%;
|
422 |
|
423 |
|
424 | -webkit-transform: translate(-50%, -50%);
|
425 | transform: translate(-50%, -50%);
|
426 | height: calc(
|
427 | 100% + 4px
|
428 | );
|
429 | width: calc(
|
430 | 100% + 4px
|
431 | );
|
432 | }
|
433 | @media screen and (forced-colors: active) {
|
434 | .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring {
|
435 | border-color: CanvasText;
|
436 | }
|
437 | }
|
438 | .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring::after, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring::after {
|
439 | content: "";
|
440 | border: 2px solid transparent;
|
441 | border-radius: 8px;
|
442 | display: block;
|
443 | position: absolute;
|
444 | top: 50%;
|
445 |
|
446 |
|
447 | left: 50%;
|
448 |
|
449 |
|
450 | -webkit-transform: translate(-50%, -50%);
|
451 | transform: translate(-50%, -50%);
|
452 | height: calc(100% + 4px);
|
453 | width: calc(100% + 4px);
|
454 | }
|
455 | @media screen and (forced-colors: active) {
|
456 | .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring::after, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring::after {
|
457 | border-color: CanvasText;
|
458 | }
|
459 | }
|
460 |
|
461 | .mdc-switch {
|
462 | width: 36px;
|
463 |
|
464 | width: var(--mdc-switch-track-width, 36px);
|
465 | }
|
466 | .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
|
467 | background: #6200ee;
|
468 |
|
469 | background: var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #6200ee));
|
470 | }
|
471 |
|
472 | .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {
|
473 | background: #310077;
|
474 |
|
475 | background: var(--mdc-switch-selected-hover-handle-color, #310077);
|
476 | }
|
477 |
|
478 | .mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after {
|
479 | background: #310077;
|
480 |
|
481 | background: var(--mdc-switch-selected-focus-handle-color, #310077);
|
482 | }
|
483 |
|
484 | .mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after {
|
485 | background: #310077;
|
486 |
|
487 | background: var(--mdc-switch-selected-pressed-handle-color, #310077);
|
488 | }
|
489 |
|
490 | .mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after {
|
491 | background: #424242;
|
492 |
|
493 | background: var(--mdc-switch-disabled-selected-handle-color, #424242);
|
494 | }
|
495 |
|
496 | .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after {
|
497 | background: #616161;
|
498 |
|
499 | background: var(--mdc-switch-unselected-handle-color, #616161);
|
500 | }
|
501 |
|
502 | .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {
|
503 | background: #212121;
|
504 |
|
505 | background: var(--mdc-switch-unselected-hover-handle-color, #212121);
|
506 | }
|
507 |
|
508 | .mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after {
|
509 | background: #212121;
|
510 |
|
511 | background: var(--mdc-switch-unselected-focus-handle-color, #212121);
|
512 | }
|
513 |
|
514 | .mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after {
|
515 | background: #212121;
|
516 |
|
517 | background: var(--mdc-switch-unselected-pressed-handle-color, #212121);
|
518 | }
|
519 |
|
520 | .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after {
|
521 | background: #424242;
|
522 |
|
523 | background: var(--mdc-switch-disabled-unselected-handle-color, #424242);
|
524 | }
|
525 |
|
526 | .mdc-switch .mdc-switch__handle::before {
|
527 | background: #fff;
|
528 |
|
529 | background: var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff));
|
530 | }
|
531 | .mdc-switch:enabled .mdc-switch__shadow {
|
532 | --mdc-elevation-box-shadow-for-gss: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
|
533 | box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
|
534 |
|
535 | box-shadow: var(--mdc-switch-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));
|
536 | }
|
537 | .mdc-switch:disabled .mdc-switch__shadow {
|
538 | --mdc-elevation-box-shadow-for-gss: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
|
539 | box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
|
540 |
|
541 | box-shadow: var(--mdc-switch-disabled-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));
|
542 | }
|
543 | .mdc-switch .mdc-switch__focus-ring-wrapper,
|
544 | .mdc-switch .mdc-switch__handle {
|
545 | height: 20px;
|
546 |
|
547 | height: var(--mdc-switch-handle-height, 20px);
|
548 | }
|
549 | .mdc-switch:disabled .mdc-switch__handle::after {
|
550 | opacity: 0.38;
|
551 |
|
552 | opacity: var(--mdc-switch-disabled-handle-opacity, 0.38);
|
553 | }
|
554 |
|
555 | .mdc-switch .mdc-switch__handle {
|
556 | border-radius: 10px;
|
557 |
|
558 | border-radius: var(--mdc-switch-handle-shape, 10px);
|
559 | }
|
560 | .mdc-switch .mdc-switch__handle {
|
561 | width: 20px;
|
562 |
|
563 | width: var(--mdc-switch-handle-width, 20px);
|
564 | }
|
565 | .mdc-switch .mdc-switch__handle-track {
|
566 | width: calc(100% - 20px);
|
567 |
|
568 | width: calc(100% - var(--mdc-switch-handle-width, 20px));
|
569 | }
|
570 | .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {
|
571 | fill: #fff;
|
572 |
|
573 | fill: var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff));
|
574 | }
|
575 |
|
576 | .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {
|
577 | fill: #fff;
|
578 |
|
579 | fill: var(--mdc-switch-disabled-selected-icon-color, var(--mdc-theme-on-primary, #fff));
|
580 | }
|
581 |
|
582 | .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {
|
583 | fill: #fff;
|
584 |
|
585 | fill: var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff));
|
586 | }
|
587 |
|
588 | .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {
|
589 | fill: #fff;
|
590 |
|
591 | fill: var(--mdc-switch-disabled-unselected-icon-color, var(--mdc-theme-on-primary, #fff));
|
592 | }
|
593 |
|
594 | .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {
|
595 | opacity: 0.38;
|
596 |
|
597 | opacity: var(--mdc-switch-disabled-selected-icon-opacity, 0.38);
|
598 | }
|
599 |
|
600 | .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {
|
601 | opacity: 0.38;
|
602 |
|
603 | opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 0.38);
|
604 | }
|
605 |
|
606 | .mdc-switch.mdc-switch--selected .mdc-switch__icon {
|
607 | width: 18px;
|
608 |
|
609 | width: var(--mdc-switch-selected-icon-size, 18px);
|
610 | height: 18px;
|
611 |
|
612 | height: var(--mdc-switch-selected-icon-size, 18px);
|
613 | }
|
614 |
|
615 | .mdc-switch.mdc-switch--unselected .mdc-switch__icon {
|
616 | width: 18px;
|
617 |
|
618 | width: var(--mdc-switch-unselected-icon-size, 18px);
|
619 | height: 18px;
|
620 |
|
621 | height: var(--mdc-switch-unselected-icon-size, 18px);
|
622 | }
|
623 |
|
624 | .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before,
|
625 | .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after {
|
626 | background-color: #6200ee;
|
627 |
|
628 | background-color: var(--mdc-switch-selected-hover-state-layer-color, var(--mdc-theme-primary, #6200ee));
|
629 | }
|
630 |
|
631 | .mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before,
|
632 | .mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after {
|
633 | background-color: #6200ee;
|
634 |
|
635 | background-color: var(--mdc-switch-selected-focus-state-layer-color, var(--mdc-theme-primary, #6200ee));
|
636 | }
|
637 |
|
638 | .mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before,
|
639 | .mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after {
|
640 | background-color: #6200ee;
|
641 |
|
642 | background-color: var(--mdc-switch-selected-pressed-state-layer-color, var(--mdc-theme-primary, #6200ee));
|
643 | }
|
644 |
|
645 | .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before,
|
646 | .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after {
|
647 | background-color: #424242;
|
648 |
|
649 | background-color: var(--mdc-switch-unselected-hover-state-layer-color, #424242);
|
650 | }
|
651 |
|
652 | .mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before,
|
653 | .mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after {
|
654 | background-color: #424242;
|
655 |
|
656 | background-color: var(--mdc-switch-unselected-focus-state-layer-color, #424242);
|
657 | }
|
658 |
|
659 | .mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before,
|
660 | .mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after {
|
661 | background-color: #424242;
|
662 |
|
663 | background-color: var(--mdc-switch-unselected-pressed-state-layer-color, #424242);
|
664 | }
|
665 |
|
666 | .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {
|
667 | opacity: 0.04;
|
668 |
|
669 | opacity: var(--mdc-switch-selected-hover-state-layer-opacity, 0.04);
|
670 | }
|
671 |
|
672 | .mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {
|
673 | transition-duration: 75ms;
|
674 | opacity: 0.12;
|
675 |
|
676 | opacity: var(--mdc-switch-selected-focus-state-layer-opacity, 0.12);
|
677 | }
|
678 |
|
679 | .mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {
|
680 | transition: opacity 150ms linear;
|
681 | }
|
682 | .mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {
|
683 | transition-duration: 75ms;
|
684 | opacity: 0.1;
|
685 |
|
686 | opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);
|
687 | }
|
688 | .mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded {
|
689 | --mdc-ripple-fg-opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);
|
690 | }
|
691 |
|
692 | .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {
|
693 | opacity: 0.04;
|
694 |
|
695 | opacity: var(--mdc-switch-unselected-hover-state-layer-opacity, 0.04);
|
696 | }
|
697 |
|
698 | .mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {
|
699 | transition-duration: 75ms;
|
700 | opacity: 0.12;
|
701 |
|
702 | opacity: var(--mdc-switch-unselected-focus-state-layer-opacity, 0.12);
|
703 | }
|
704 |
|
705 | .mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {
|
706 | transition: opacity 150ms linear;
|
707 | }
|
708 | .mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {
|
709 | transition-duration: 75ms;
|
710 | opacity: 0.1;
|
711 |
|
712 | opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);
|
713 | }
|
714 | .mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded {
|
715 | --mdc-ripple-fg-opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);
|
716 | }
|
717 |
|
718 | .mdc-switch .mdc-switch__ripple {
|
719 | height: 48px;
|
720 |
|
721 | height: var(--mdc-switch-state-layer-size, 48px);
|
722 | width: 48px;
|
723 |
|
724 | width: var(--mdc-switch-state-layer-size, 48px);
|
725 | }
|
726 | .mdc-switch .mdc-switch__track {
|
727 | height: 14px;
|
728 |
|
729 | height: var(--mdc-switch-track-height, 14px);
|
730 | }
|
731 | .mdc-switch:disabled .mdc-switch__track {
|
732 | opacity: 0.12;
|
733 |
|
734 | opacity: var(--mdc-switch-disabled-track-opacity, 0.12);
|
735 | }
|
736 |
|
737 | .mdc-switch:enabled .mdc-switch__track::after {
|
738 | background: #d7bbff;
|
739 |
|
740 | background: var(--mdc-switch-selected-track-color, #d7bbff);
|
741 | }
|
742 |
|
743 | .mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after {
|
744 | background: #d7bbff;
|
745 |
|
746 | background: var(--mdc-switch-selected-hover-track-color, #d7bbff);
|
747 | }
|
748 |
|
749 | .mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {
|
750 | background: #d7bbff;
|
751 |
|
752 | background: var(--mdc-switch-selected-focus-track-color, #d7bbff);
|
753 | }
|
754 |
|
755 | .mdc-switch:enabled:active .mdc-switch__track::after {
|
756 | background: #d7bbff;
|
757 |
|
758 | background: var(--mdc-switch-selected-pressed-track-color, #d7bbff);
|
759 | }
|
760 |
|
761 | .mdc-switch:disabled .mdc-switch__track::after {
|
762 | background: #424242;
|
763 |
|
764 | background: var(--mdc-switch-disabled-selected-track-color, #424242);
|
765 | }
|
766 |
|
767 | .mdc-switch:enabled .mdc-switch__track::before {
|
768 | background: #e0e0e0;
|
769 |
|
770 | background: var(--mdc-switch-unselected-track-color, #e0e0e0);
|
771 | }
|
772 |
|
773 | .mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before {
|
774 | background: #e0e0e0;
|
775 |
|
776 | background: var(--mdc-switch-unselected-hover-track-color, #e0e0e0);
|
777 | }
|
778 |
|
779 | .mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before {
|
780 | background: #e0e0e0;
|
781 |
|
782 | background: var(--mdc-switch-unselected-focus-track-color, #e0e0e0);
|
783 | }
|
784 |
|
785 | .mdc-switch:enabled:active .mdc-switch__track::before {
|
786 | background: #e0e0e0;
|
787 |
|
788 | background: var(--mdc-switch-unselected-pressed-track-color, #e0e0e0);
|
789 | }
|
790 |
|
791 | .mdc-switch:disabled .mdc-switch__track::before {
|
792 | background: #424242;
|
793 |
|
794 | background: var(--mdc-switch-disabled-unselected-track-color, #424242);
|
795 | }
|
796 |
|
797 | .mdc-switch .mdc-switch__track {
|
798 | border-radius: 7px;
|
799 |
|
800 | border-radius: var(--mdc-switch-track-shape, 7px);
|
801 | }
|
802 |
|
803 | @media screen and (forced-colors: active), (-ms-high-contrast: active) {
|
804 | .mdc-switch:enabled .mdc-switch__shadow {
|
805 |
|
806 | }
|
807 | .mdc-switch:disabled .mdc-switch__shadow {
|
808 |
|
809 | }
|
810 | .mdc-switch:disabled .mdc-switch__handle::after {
|
811 | opacity: 1;
|
812 |
|
813 | opacity: var(--mdc-switch-disabled-handle-opacity, 1);
|
814 | }
|
815 |
|
816 | .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {
|
817 | fill: ButtonText;
|
818 |
|
819 | fill: var(--mdc-switch-selected-icon-color, ButtonText);
|
820 | }
|
821 |
|
822 | .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {
|
823 | fill: GrayText;
|
824 |
|
825 | fill: var(--mdc-switch-disabled-selected-icon-color, GrayText);
|
826 | }
|
827 |
|
828 | .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {
|
829 | fill: ButtonText;
|
830 |
|
831 | fill: var(--mdc-switch-unselected-icon-color, ButtonText);
|
832 | }
|
833 |
|
834 | .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {
|
835 | fill: GrayText;
|
836 |
|
837 | fill: var(--mdc-switch-disabled-unselected-icon-color, GrayText);
|
838 | }
|
839 |
|
840 | .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {
|
841 | opacity: 1;
|
842 |
|
843 | opacity: var(--mdc-switch-disabled-selected-icon-opacity, 1);
|
844 | }
|
845 |
|
846 | .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {
|
847 | opacity: 1;
|
848 |
|
849 | opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 1);
|
850 | }
|
851 |
|
852 | .mdc-switch:disabled .mdc-switch__track {
|
853 | opacity: 1;
|
854 |
|
855 | opacity: var(--mdc-switch-disabled-track-opacity, 1);
|
856 | }
|
857 | }
|
858 |
|
859 |
|
\ | No newline at end of file |