mdc.radio.css 16 KB

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