UNPKG

15.8 kBCSSView Raw
1/**
2 * @license
3 * Copyright Google LLC All Rights Reserved.
4 *
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
7 */
8.mdc-touch-target-wrapper {
9 display: inline;
10}
11
12.mdc-radio {
13 padding: calc((40px - 20px) / 2);
14}
15.mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
16 border-color: rgba(0, 0, 0, 0.54);
17}
18.mdc-radio .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
19 border-color: #018786;
20 /* @alternate */
21 border-color: var(--mdc-theme-secondary, #018786);
22}
23.mdc-radio .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
24 border-color: #018786;
25 /* @alternate */
26 border-color: var(--mdc-theme-secondary, #018786);
27}
28.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
29.mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
30 border-color: rgba(0, 0, 0, 0.38);
31}
32.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
33.mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
34 border-color: rgba(0, 0, 0, 0.38);
35}
36.mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
37.mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
38 border-color: rgba(0, 0, 0, 0.38);
39}
40.mdc-radio .mdc-radio__background::before {
41 background-color: #018786;
42 /* @alternate */
43 background-color: var(--mdc-theme-secondary, #018786);
44}
45.mdc-radio .mdc-radio__background::before {
46 top: calc(-1 * (40px - 20px) / 2);
47 left: calc(-1 * (40px - 20px) / 2);
48 width: 40px;
49 height: 40px;
50}
51.mdc-radio .mdc-radio__native-control {
52 top: calc((40px - 40px) / 2);
53 right: calc((40px - 40px) / 2);
54 left: calc((40px - 40px) / 2);
55 width: 40px;
56 height: 40px;
57}
58@media screen and (forced-colors: active), (-ms-high-contrast: active) {
59 .mdc-radio.mdc-radio--disabled [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
60.mdc-radio.mdc-radio--disabled .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
61 border-color: GrayText;
62 }
63 .mdc-radio.mdc-radio--disabled [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
64.mdc-radio.mdc-radio--disabled .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
65 border-color: GrayText;
66 }
67 .mdc-radio.mdc-radio--disabled [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
68.mdc-radio.mdc-radio--disabled .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
69 border-color: GrayText;
70 }
71}
72
73.mdc-radio {
74 display: inline-block;
75 position: relative;
76 flex: 0 0 auto;
77 box-sizing: content-box;
78 width: 20px;
79 height: 20px;
80 cursor: pointer;
81 /* @alternate */
82 will-change: opacity, transform, border-color, color;
83}
84.mdc-radio__background {
85 display: inline-block;
86 position: relative;
87 box-sizing: border-box;
88 width: 20px;
89 height: 20px;
90}
91.mdc-radio__background::before {
92 position: absolute;
93 -webkit-transform: scale(0, 0);
94 transform: scale(0, 0);
95 border-radius: 50%;
96 opacity: 0;
97 pointer-events: none;
98 content: "";
99 transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
100 transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
101 transition: opacity 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
102}
103.mdc-radio__outer-circle {
104 position: absolute;
105 top: 0;
106 left: 0;
107 box-sizing: border-box;
108 width: 100%;
109 height: 100%;
110 border-width: 2px;
111 border-style: solid;
112 border-radius: 50%;
113 transition: border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
114}
115.mdc-radio__inner-circle {
116 position: absolute;
117 top: 0;
118 left: 0;
119 box-sizing: border-box;
120 width: 100%;
121 height: 100%;
122 -webkit-transform: scale(0, 0);
123 transform: scale(0, 0);
124 border-width: 10px;
125 border-style: solid;
126 border-radius: 50%;
127 transition: border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
128 transition: transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
129 transition: transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 120ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
130}
131.mdc-radio__native-control {
132 position: absolute;
133 margin: 0;
134 padding: 0;
135 opacity: 0;
136 cursor: inherit;
137 z-index: 1;
138}
139.mdc-radio--touch {
140 margin-top: 4px;
141 margin-bottom: 4px;
142 margin-right: 4px;
143 margin-left: 4px;
144}
145.mdc-radio--touch .mdc-radio__native-control {
146 top: calc((40px - 48px) / 2);
147 right: calc((40px - 48px) / 2);
148 left: calc((40px - 48px) / 2);
149 width: 48px;
150 height: 48px;
151}
152.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring {
153 pointer-events: none;
154 border: 2px solid transparent;
155 border-radius: 6px;
156 box-sizing: content-box;
157 position: absolute;
158 top: 50%;
159 /* @noflip */
160 /*rtl:ignore*/
161 left: 50%;
162 /* @noflip */
163 /*rtl:ignore*/
164 -webkit-transform: translate(-50%, -50%);
165 transform: translate(-50%, -50%);
166 height: 100%;
167 width: 100%;
168}
169@media screen and (forced-colors: active) {
170 .mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring {
171 border-color: CanvasText;
172 }
173}
174.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring::after, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring::after {
175 content: "";
176 border: 2px solid transparent;
177 border-radius: 8px;
178 display: block;
179 position: absolute;
180 top: 50%;
181 /* @noflip */
182 /*rtl:ignore*/
183 left: 50%;
184 /* @noflip */
185 /*rtl:ignore*/
186 -webkit-transform: translate(-50%, -50%);
187 transform: translate(-50%, -50%);
188 height: calc(100% + 4px);
189 width: calc(100% + 4px);
190}
191@media screen and (forced-colors: active) {
192 .mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring::after, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring::after {
193 border-color: CanvasText;
194 }
195}
196
197.mdc-radio__native-control:checked + .mdc-radio__background,
198.mdc-radio__native-control:disabled + .mdc-radio__background {
199 transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
200 transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
201 transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
202}
203.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
204.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__outer-circle {
205 transition: border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
206}
207.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle,
208.mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
209 transition: border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
210 transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
211 transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
212}
213
214.mdc-radio--disabled {
215 cursor: default;
216 pointer-events: none;
217}
218
219.mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__inner-circle {
220 -webkit-transform: scale(0.5);
221 transform: scale(0.5);
222 transition: border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
223 transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
224 transition: transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), border-color 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
225}
226
227.mdc-radio__native-control:disabled + .mdc-radio__background,
228[aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background {
229 cursor: default;
230}
231
232.mdc-radio__native-control:focus + .mdc-radio__background::before {
233 -webkit-transform: scale(1);
234 transform: scale(1);
235 opacity: 0.12;
236 transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
237 transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
238 transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1);
239}
240
241@-webkit-keyframes mdc-ripple-fg-radius-in {
242 from {
243 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
244 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
245 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
246 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
247 }
248 to {
249 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
250 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
251 }
252}
253
254@keyframes mdc-ripple-fg-radius-in {
255 from {
256 -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
257 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
258 -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
259 transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
260 }
261 to {
262 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
263 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
264 }
265}
266@-webkit-keyframes mdc-ripple-fg-opacity-in {
267 from {
268 -webkit-animation-timing-function: linear;
269 animation-timing-function: linear;
270 opacity: 0;
271 }
272 to {
273 opacity: var(--mdc-ripple-fg-opacity, 0);
274 }
275}
276@keyframes mdc-ripple-fg-opacity-in {
277 from {
278 -webkit-animation-timing-function: linear;
279 animation-timing-function: linear;
280 opacity: 0;
281 }
282 to {
283 opacity: var(--mdc-ripple-fg-opacity, 0);
284 }
285}
286@-webkit-keyframes mdc-ripple-fg-opacity-out {
287 from {
288 -webkit-animation-timing-function: linear;
289 animation-timing-function: linear;
290 opacity: var(--mdc-ripple-fg-opacity, 0);
291 }
292 to {
293 opacity: 0;
294 }
295}
296@keyframes mdc-ripple-fg-opacity-out {
297 from {
298 -webkit-animation-timing-function: linear;
299 animation-timing-function: linear;
300 opacity: var(--mdc-ripple-fg-opacity, 0);
301 }
302 to {
303 opacity: 0;
304 }
305}
306.mdc-radio {
307 --mdc-ripple-fg-size: 0;
308 --mdc-ripple-left: 0;
309 --mdc-ripple-top: 0;
310 --mdc-ripple-fg-scale: 1;
311 --mdc-ripple-fg-translate-end: 0;
312 --mdc-ripple-fg-translate-start: 0;
313 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
314 will-change: transform, opacity;
315}
316.mdc-radio .mdc-radio__ripple::before,
317.mdc-radio .mdc-radio__ripple::after {
318 position: absolute;
319 border-radius: 50%;
320 opacity: 0;
321 pointer-events: none;
322 content: "";
323}
324.mdc-radio .mdc-radio__ripple::before {
325 transition: opacity 15ms linear, background-color 15ms linear;
326 z-index: 1;
327 /* @alternate */
328 z-index: var(--mdc-ripple-z-index, 1);
329}
330.mdc-radio .mdc-radio__ripple::after {
331 z-index: 0;
332 /* @alternate */
333 z-index: var(--mdc-ripple-z-index, 0);
334}
335.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before {
336 -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
337 transform: scale(var(--mdc-ripple-fg-scale, 1));
338}
339.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
340 top: 0;
341 /* @noflip */
342 /*rtl:ignore*/
343 left: 0;
344 -webkit-transform: scale(0);
345 transform: scale(0);
346 -webkit-transform-origin: center center;
347 transform-origin: center center;
348}
349.mdc-radio.mdc-ripple-upgraded--unbounded .mdc-radio__ripple::after {
350 top: var(--mdc-ripple-top, 0);
351 /* @noflip */
352 /*rtl:ignore*/
353 left: var(--mdc-ripple-left, 0);
354}
355.mdc-radio.mdc-ripple-upgraded--foreground-activation .mdc-radio__ripple::after {
356 -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
357 animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
358}
359.mdc-radio.mdc-ripple-upgraded--foreground-deactivation .mdc-radio__ripple::after {
360 -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
361 animation: mdc-ripple-fg-opacity-out 150ms;
362 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
363 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
364}
365.mdc-radio .mdc-radio__ripple::before,
366.mdc-radio .mdc-radio__ripple::after {
367 top: calc(50% - 50%);
368 /* @noflip */
369 /*rtl:ignore*/
370 left: calc(50% - 50%);
371 width: 100%;
372 height: 100%;
373}
374.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::before,
375.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
376 top: var(--mdc-ripple-top, calc(50% - 50%));
377 /* @noflip */
378 /*rtl:ignore*/
379 left: var(--mdc-ripple-left, calc(50% - 50%));
380 width: var(--mdc-ripple-fg-size, 100%);
381 height: var(--mdc-ripple-fg-size, 100%);
382}
383.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple::after {
384 width: var(--mdc-ripple-fg-size, 100%);
385 height: var(--mdc-ripple-fg-size, 100%);
386}
387.mdc-radio .mdc-radio__ripple::before, .mdc-radio .mdc-radio__ripple::after {
388 background-color: #018786;
389 /* @alternate */
390 background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786));
391}
392.mdc-radio:hover .mdc-radio__ripple::before, .mdc-radio.mdc-ripple-surface--hover .mdc-radio__ripple::before {
393 opacity: 0.04;
394 /* @alternate */
395 opacity: var(--mdc-ripple-hover-opacity, 0.04);
396}
397.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__ripple::before, .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__ripple::before {
398 transition-duration: 75ms;
399 opacity: 0.12;
400 /* @alternate */
401 opacity: var(--mdc-ripple-focus-opacity, 0.12);
402}
403.mdc-radio:not(.mdc-ripple-upgraded) .mdc-radio__ripple::after {
404 transition: opacity 150ms linear;
405}
406.mdc-radio:not(.mdc-ripple-upgraded):active .mdc-radio__ripple::after {
407 transition-duration: 75ms;
408 opacity: 0.12;
409 /* @alternate */
410 opacity: var(--mdc-ripple-press-opacity, 0.12);
411}
412.mdc-radio.mdc-ripple-upgraded {
413 --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
414}
415.mdc-radio.mdc-ripple-upgraded .mdc-radio__background::before, .mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__background::before {
416 content: none;
417}
418
419.mdc-radio__ripple {
420 position: absolute;
421 top: 0;
422 left: 0;
423 width: 100%;
424 height: 100%;
425 pointer-events: none;
426}
427
428/*# sourceMappingURL=mdc.radio.css.map*/
\No newline at end of file