mdc.chips.css 21 KB

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