1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | .mdc-switch__thumb-underlay {
|
9 |
|
10 | left: -14px;
|
11 |
|
12 | right: initial;
|
13 | top: -17px;
|
14 | width: 48px;
|
15 | height: 48px;
|
16 | }
|
17 | [dir=rtl] .mdc-switch__thumb-underlay, .mdc-switch__thumb-underlay[dir=rtl] {
|
18 |
|
19 | left: initial;
|
20 |
|
21 | right: -14px;
|
22 | }
|
23 |
|
24 | .mdc-switch__native-control {
|
25 | width: 64px;
|
26 | height: 48px;
|
27 | }
|
28 |
|
29 | .mdc-switch {
|
30 | display: inline-block;
|
31 | position: relative;
|
32 | outline: none;
|
33 | -webkit-user-select: none;
|
34 | -moz-user-select: none;
|
35 | -ms-user-select: none;
|
36 | user-select: none;
|
37 | }
|
38 | .mdc-switch.mdc-switch--checked .mdc-switch__track {
|
39 | background-color: #018786;
|
40 |
|
41 | background-color: var(--mdc-theme-secondary, #018786);
|
42 | }
|
43 | .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
|
44 | background-color: #018786;
|
45 |
|
46 | background-color: var(--mdc-theme-secondary, #018786);
|
47 | border-color: #018786;
|
48 |
|
49 | border-color: var(--mdc-theme-secondary, #018786);
|
50 | }
|
51 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
|
52 | background-color: #000;
|
53 |
|
54 | background-color: var(--mdc-theme-on-surface, #000);
|
55 | }
|
56 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
|
57 | background-color: #fff;
|
58 |
|
59 | background-color: var(--mdc-theme-surface, #fff);
|
60 | border-color: #fff;
|
61 |
|
62 | border-color: var(--mdc-theme-surface, #fff);
|
63 | }
|
64 |
|
65 | .mdc-switch__native-control {
|
66 |
|
67 | left: 0;
|
68 |
|
69 | right: initial;
|
70 | position: absolute;
|
71 | top: 0;
|
72 | margin: 0;
|
73 | opacity: 0;
|
74 | cursor: pointer;
|
75 | pointer-events: auto;
|
76 | transition: -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
|
77 | transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
|
78 | transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
|
79 | }
|
80 | [dir=rtl] .mdc-switch__native-control, .mdc-switch__native-control[dir=rtl] {
|
81 |
|
82 | left: initial;
|
83 |
|
84 | right: 0;
|
85 | }
|
86 |
|
87 | .mdc-switch__track {
|
88 | box-sizing: border-box;
|
89 | width: 36px;
|
90 | height: 14px;
|
91 | border: 1px solid transparent;
|
92 | border-radius: 7px;
|
93 | opacity: 0.38;
|
94 | transition: opacity 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
|
95 | }
|
96 |
|
97 | .mdc-switch__thumb-underlay {
|
98 | display: flex;
|
99 | position: absolute;
|
100 | align-items: center;
|
101 | justify-content: center;
|
102 | -webkit-transform: translateX(0);
|
103 | transform: translateX(0);
|
104 | transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
|
105 | transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
|
106 | transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
|
107 | }
|
108 |
|
109 | .mdc-switch__thumb {
|
110 |
|
111 | box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
112 | box-sizing: border-box;
|
113 | width: 20px;
|
114 | height: 20px;
|
115 | border: 10px solid;
|
116 | border-radius: 50%;
|
117 | pointer-events: none;
|
118 | z-index: 1;
|
119 | }
|
120 |
|
121 | .mdc-switch--checked .mdc-switch__track {
|
122 | opacity: 0.54;
|
123 | }
|
124 | .mdc-switch--checked .mdc-switch__thumb-underlay {
|
125 | -webkit-transform: translateX(16px);
|
126 | transform: translateX(16px);
|
127 | }
|
128 | [dir=rtl] .mdc-switch--checked .mdc-switch__thumb-underlay, .mdc-switch--checked .mdc-switch__thumb-underlay[dir=rtl] {
|
129 | -webkit-transform: translateX(-16px);
|
130 | transform: translateX(-16px);
|
131 | }
|
132 | .mdc-switch--checked .mdc-switch__native-control {
|
133 | -webkit-transform: translateX(-16px);
|
134 | transform: translateX(-16px);
|
135 | }
|
136 | [dir=rtl] .mdc-switch--checked .mdc-switch__native-control, .mdc-switch--checked .mdc-switch__native-control[dir=rtl] {
|
137 | -webkit-transform: translateX(16px);
|
138 | transform: translateX(16px);
|
139 | }
|
140 |
|
141 | .mdc-switch--disabled {
|
142 | opacity: 0.38;
|
143 | pointer-events: none;
|
144 | }
|
145 | .mdc-switch--disabled .mdc-switch__thumb {
|
146 | border-width: 1px;
|
147 | }
|
148 | .mdc-switch--disabled .mdc-switch__native-control {
|
149 | cursor: default;
|
150 | pointer-events: none;
|
151 | }
|
152 |
|
153 | @-webkit-keyframes mdc-ripple-fg-radius-in {
|
154 | from {
|
155 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
156 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
157 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
158 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
159 | }
|
160 | to {
|
161 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
162 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
163 | }
|
164 | }
|
165 |
|
166 | @keyframes mdc-ripple-fg-radius-in {
|
167 | from {
|
168 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
169 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
170 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
171 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
172 | }
|
173 | to {
|
174 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
175 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
176 | }
|
177 | }
|
178 | @-webkit-keyframes mdc-ripple-fg-opacity-in {
|
179 | from {
|
180 | -webkit-animation-timing-function: linear;
|
181 | animation-timing-function: linear;
|
182 | opacity: 0;
|
183 | }
|
184 | to {
|
185 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
186 | }
|
187 | }
|
188 | @keyframes mdc-ripple-fg-opacity-in {
|
189 | from {
|
190 | -webkit-animation-timing-function: linear;
|
191 | animation-timing-function: linear;
|
192 | opacity: 0;
|
193 | }
|
194 | to {
|
195 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
196 | }
|
197 | }
|
198 | @-webkit-keyframes mdc-ripple-fg-opacity-out {
|
199 | from {
|
200 | -webkit-animation-timing-function: linear;
|
201 | animation-timing-function: linear;
|
202 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
203 | }
|
204 | to {
|
205 | opacity: 0;
|
206 | }
|
207 | }
|
208 | @keyframes mdc-ripple-fg-opacity-out {
|
209 | from {
|
210 | -webkit-animation-timing-function: linear;
|
211 | animation-timing-function: linear;
|
212 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
213 | }
|
214 | to {
|
215 | opacity: 0;
|
216 | }
|
217 | }
|
218 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::before, .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay::after {
|
219 | background-color: #9e9e9e;
|
220 |
|
221 | background-color: var(--mdc-ripple-color, #9e9e9e);
|
222 | }
|
223 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:hover::before, .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-surface--hover::before {
|
224 | opacity: 0.08;
|
225 |
|
226 | opacity: var(--mdc-ripple-hover-opacity, 0.08);
|
227 | }
|
228 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before, .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before {
|
229 | transition-duration: 75ms;
|
230 | opacity: 0.24;
|
231 |
|
232 | opacity: var(--mdc-ripple-focus-opacity, 0.24);
|
233 | }
|
234 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after {
|
235 | transition: opacity 150ms linear;
|
236 | }
|
237 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after {
|
238 | transition-duration: 75ms;
|
239 | opacity: 0.24;
|
240 |
|
241 | opacity: var(--mdc-ripple-press-opacity, 0.24);
|
242 | }
|
243 | .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded {
|
244 | --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
|
245 | }
|
246 |
|
247 | .mdc-switch__thumb-underlay {
|
248 | --mdc-ripple-fg-size: 0;
|
249 | --mdc-ripple-left: 0;
|
250 | --mdc-ripple-top: 0;
|
251 | --mdc-ripple-fg-scale: 1;
|
252 | --mdc-ripple-fg-translate-end: 0;
|
253 | --mdc-ripple-fg-translate-start: 0;
|
254 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
255 | will-change: transform, opacity;
|
256 | }
|
257 | .mdc-switch__thumb-underlay::before, .mdc-switch__thumb-underlay::after {
|
258 | position: absolute;
|
259 | border-radius: 50%;
|
260 | opacity: 0;
|
261 | pointer-events: none;
|
262 | content: "";
|
263 | }
|
264 | .mdc-switch__thumb-underlay::before {
|
265 | transition: opacity 15ms linear, background-color 15ms linear;
|
266 | z-index: 1;
|
267 |
|
268 | z-index: var(--mdc-ripple-z-index, 1);
|
269 | }
|
270 | .mdc-switch__thumb-underlay::after {
|
271 | z-index: 0;
|
272 |
|
273 | z-index: var(--mdc-ripple-z-index, 0);
|
274 | }
|
275 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded::before {
|
276 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
|
277 | transform: scale(var(--mdc-ripple-fg-scale, 1));
|
278 | }
|
279 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded::after {
|
280 | top: 0;
|
281 |
|
282 | left: 0;
|
283 | -webkit-transform: scale(0);
|
284 | transform: scale(0);
|
285 | -webkit-transform-origin: center center;
|
286 | transform-origin: center center;
|
287 | }
|
288 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded--unbounded::after {
|
289 | top: var(--mdc-ripple-top, 0);
|
290 |
|
291 | left: var(--mdc-ripple-left, 0);
|
292 | }
|
293 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-activation::after {
|
294 | -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
295 | animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
296 | }
|
297 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-deactivation::after {
|
298 | -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
|
299 | animation: mdc-ripple-fg-opacity-out 150ms;
|
300 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
301 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
302 | }
|
303 | .mdc-switch__thumb-underlay::before, .mdc-switch__thumb-underlay::after {
|
304 | top: calc(50% - 50%);
|
305 |
|
306 | left: calc(50% - 50%);
|
307 | width: 100%;
|
308 | height: 100%;
|
309 | }
|
310 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded::before, .mdc-switch__thumb-underlay.mdc-ripple-upgraded::after {
|
311 | top: var(--mdc-ripple-top, calc(50% - 50%));
|
312 |
|
313 | left: var(--mdc-ripple-left, calc(50% - 50%));
|
314 | width: var(--mdc-ripple-fg-size, 100%);
|
315 | height: var(--mdc-ripple-fg-size, 100%);
|
316 | }
|
317 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded::after {
|
318 | width: var(--mdc-ripple-fg-size, 100%);
|
319 | height: var(--mdc-ripple-fg-size, 100%);
|
320 | }
|
321 | .mdc-switch__thumb-underlay::before, .mdc-switch__thumb-underlay::after {
|
322 | background-color: #018786;
|
323 |
|
324 | background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786));
|
325 | }
|
326 | .mdc-switch__thumb-underlay:hover::before, .mdc-switch__thumb-underlay.mdc-ripple-surface--hover::before {
|
327 | opacity: 0.04;
|
328 |
|
329 | opacity: var(--mdc-ripple-hover-opacity, 0.04);
|
330 | }
|
331 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused::before, .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus::before {
|
332 | transition-duration: 75ms;
|
333 | opacity: 0.12;
|
334 |
|
335 | opacity: var(--mdc-ripple-focus-opacity, 0.12);
|
336 | }
|
337 | .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded)::after {
|
338 | transition: opacity 150ms linear;
|
339 | }
|
340 | .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active::after {
|
341 | transition-duration: 75ms;
|
342 | opacity: 0.12;
|
343 |
|
344 | opacity: var(--mdc-ripple-press-opacity, 0.12);
|
345 | }
|
346 | .mdc-switch__thumb-underlay.mdc-ripple-upgraded {
|
347 | --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
|
348 | }
|
349 |
|
350 |
|
\ | No newline at end of file |