mdc.checkbox.css 26 KB

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