mdc.checkbox.css 33 KB

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