mdc.fab.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  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-elevation-overlay {
  12. position: absolute;
  13. border-radius: inherit;
  14. pointer-events: none;
  15. opacity: 0;
  16. /* @alternate */
  17. opacity: var(--mdc-elevation-overlay-opacity, 0);
  18. transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
  19. background-color: #fff;
  20. /* @alternate */
  21. background-color: var(--mdc-elevation-overlay-color, #fff);
  22. }
  23. .mdc-fab {
  24. /* @alternate */
  25. position: relative;
  26. display: inline-flex;
  27. position: relative;
  28. align-items: center;
  29. justify-content: center;
  30. box-sizing: border-box;
  31. width: 56px;
  32. height: 56px;
  33. padding: 0;
  34. border: none;
  35. fill: currentColor;
  36. text-decoration: none;
  37. cursor: pointer;
  38. -webkit-user-select: none;
  39. -moz-user-select: none;
  40. -ms-user-select: none;
  41. user-select: none;
  42. -moz-appearance: none;
  43. -webkit-appearance: none;
  44. overflow: visible;
  45. transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  46. transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  47. transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  48. }
  49. .mdc-fab .mdc-elevation-overlay {
  50. width: 100%;
  51. height: 100%;
  52. top: 0;
  53. /* @noflip */
  54. /*rtl:ignore*/
  55. left: 0;
  56. }
  57. .mdc-fab[hidden] {
  58. display: none;
  59. }
  60. .mdc-fab::-moz-focus-inner {
  61. padding: 0;
  62. border: 0;
  63. }
  64. .mdc-fab:hover {
  65. box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  66. }
  67. .mdc-fab.mdc-ripple-upgraded--background-focused, .mdc-fab:not(.mdc-ripple-upgraded):focus {
  68. box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  69. }
  70. .mdc-fab .mdc-fab__focus-ring {
  71. position: absolute;
  72. }
  73. .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring {
  74. pointer-events: none;
  75. border: 2px solid transparent;
  76. border-radius: 6px;
  77. box-sizing: content-box;
  78. position: absolute;
  79. top: 50%;
  80. /* @noflip */
  81. /*rtl:ignore*/
  82. left: 50%;
  83. /* @noflip */
  84. /*rtl:ignore*/
  85. -webkit-transform: translate(-50%, -50%);
  86. transform: translate(-50%, -50%);
  87. height: calc(
  88. 100% + 4px
  89. );
  90. width: calc(
  91. 100% + 4px
  92. );
  93. }
  94. @media screen and (forced-colors: active) {
  95. .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring {
  96. border-color: CanvasText;
  97. }
  98. }
  99. .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring::after, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring::after {
  100. content: "";
  101. border: 2px solid transparent;
  102. border-radius: 8px;
  103. display: block;
  104. position: absolute;
  105. top: 50%;
  106. /* @noflip */
  107. /*rtl:ignore*/
  108. left: 50%;
  109. /* @noflip */
  110. /*rtl:ignore*/
  111. -webkit-transform: translate(-50%, -50%);
  112. transform: translate(-50%, -50%);
  113. height: calc(100% + 4px);
  114. width: calc(100% + 4px);
  115. }
  116. @media screen and (forced-colors: active) {
  117. .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring::after, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring::after {
  118. border-color: CanvasText;
  119. }
  120. }
  121. .mdc-fab:active, .mdc-fab:focus:active {
  122. box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  123. }
  124. .mdc-fab:active, .mdc-fab:focus {
  125. outline: none;
  126. }
  127. .mdc-fab:hover {
  128. cursor: pointer;
  129. }
  130. .mdc-fab > svg {
  131. width: 100%;
  132. }
  133. .mdc-fab--mini {
  134. width: 40px;
  135. height: 40px;
  136. }
  137. .mdc-fab--extended {
  138. -moz-osx-font-smoothing: grayscale;
  139. -webkit-font-smoothing: antialiased;
  140. font-family: Roboto, sans-serif;
  141. /* @alternate */
  142. font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  143. font-size: 0.875rem;
  144. /* @alternate */
  145. font-size: var(--mdc-typography-button-font-size, 0.875rem);
  146. line-height: 2.25rem;
  147. /* @alternate */
  148. line-height: var(--mdc-typography-button-line-height, 2.25rem);
  149. font-weight: 500;
  150. /* @alternate */
  151. font-weight: var(--mdc-typography-button-font-weight, 500);
  152. letter-spacing: 0.0892857143em;
  153. /* @alternate */
  154. letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em);
  155. text-decoration: none;
  156. /* @alternate */
  157. -webkit-text-decoration: var(--mdc-typography-button-text-decoration, none);
  158. text-decoration: var(--mdc-typography-button-text-decoration, none);
  159. text-transform: uppercase;
  160. /* @alternate */
  161. text-transform: var(--mdc-typography-button-text-transform, uppercase);
  162. border-radius: 24px;
  163. /* @noflip */
  164. /*rtl:ignore*/
  165. padding-left: 20px;
  166. /* @noflip */
  167. /*rtl:ignore*/
  168. padding-right: 20px;
  169. width: auto;
  170. max-width: 100%;
  171. height: 48px;
  172. /* @alternate */
  173. line-height: normal;
  174. }
  175. .mdc-fab--extended .mdc-fab__ripple {
  176. border-radius: 24px;
  177. }
  178. .mdc-fab--extended .mdc-fab__icon {
  179. /* @noflip */
  180. /*rtl:ignore*/
  181. margin-left: calc(12px - 20px);
  182. /* @noflip */
  183. /*rtl:ignore*/
  184. margin-right: 12px;
  185. }
  186. [dir=rtl] .mdc-fab--extended .mdc-fab__icon, .mdc-fab--extended .mdc-fab__icon[dir=rtl] {
  187. /*rtl:begin:ignore*/
  188. /* @noflip */
  189. /*rtl:ignore*/
  190. margin-left: 12px;
  191. /* @noflip */
  192. /*rtl:ignore*/
  193. margin-right: calc(12px - 20px);
  194. /*rtl:end:ignore*/
  195. }
  196. .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon {
  197. /* @noflip */
  198. /*rtl:ignore*/
  199. margin-left: 12px;
  200. /* @noflip */
  201. /*rtl:ignore*/
  202. margin-right: calc(12px - 20px);
  203. }
  204. [dir=rtl] .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon, .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon[dir=rtl] {
  205. /*rtl:begin:ignore*/
  206. /* @noflip */
  207. /*rtl:ignore*/
  208. margin-left: calc(12px - 20px);
  209. /* @noflip */
  210. /*rtl:ignore*/
  211. margin-right: 12px;
  212. /*rtl:end:ignore*/
  213. }
  214. .mdc-fab--touch {
  215. margin-top: 4px;
  216. margin-bottom: 4px;
  217. margin-right: 4px;
  218. margin-left: 4px;
  219. }
  220. .mdc-fab--touch .mdc-fab__touch {
  221. position: absolute;
  222. top: 50%;
  223. height: 48px;
  224. /* @noflip */
  225. /*rtl:ignore*/
  226. left: 50%;
  227. width: 48px;
  228. /* @noflip */
  229. /*rtl:ignore*/
  230. -webkit-transform: translate(-50%, -50%);
  231. transform: translate(-50%, -50%);
  232. }
  233. .mdc-fab::before {
  234. position: absolute;
  235. box-sizing: border-box;
  236. width: 100%;
  237. height: 100%;
  238. top: 0;
  239. /* @noflip */
  240. /*rtl:ignore*/
  241. left: 0;
  242. border: 1px solid transparent;
  243. border-radius: inherit;
  244. content: "";
  245. pointer-events: none;
  246. }
  247. @media screen and (forced-colors: active) {
  248. .mdc-fab::before {
  249. border-color: CanvasText;
  250. }
  251. }
  252. .mdc-fab__label {
  253. justify-content: flex-start;
  254. text-overflow: ellipsis;
  255. white-space: nowrap;
  256. overflow-x: hidden;
  257. overflow-y: visible;
  258. }
  259. .mdc-fab__icon {
  260. transition: -webkit-transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
  261. transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
  262. transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
  263. fill: currentColor;
  264. will-change: transform;
  265. }
  266. .mdc-fab .mdc-fab__icon {
  267. display: inline-flex;
  268. align-items: center;
  269. justify-content: center;
  270. }
  271. .mdc-fab--exited {
  272. -webkit-transform: scale(0);
  273. transform: scale(0);
  274. opacity: 0;
  275. transition: opacity 15ms linear 150ms, -webkit-transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);
  276. transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);
  277. transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);
  278. }
  279. .mdc-fab--exited .mdc-fab__icon {
  280. -webkit-transform: scale(0);
  281. transform: scale(0);
  282. transition: -webkit-transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
  283. transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
  284. transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
  285. }
  286. .mdc-fab {
  287. background-color: #018786;
  288. /* @alternate */
  289. background-color: var(--mdc-theme-secondary, #018786);
  290. box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  291. }
  292. .mdc-fab .mdc-fab__icon {
  293. width: 24px;
  294. height: 24px;
  295. font-size: 24px;
  296. }
  297. .mdc-fab, .mdc-fab:not(:disabled) .mdc-fab__icon, .mdc-fab:not(:disabled) .mdc-fab__label, .mdc-fab:disabled .mdc-fab__icon, .mdc-fab:disabled .mdc-fab__label {
  298. color: #fff;
  299. /* @alternate */
  300. color: var(--mdc-theme-on-secondary, #fff);
  301. }
  302. .mdc-fab:not(.mdc-fab--extended) {
  303. border-radius: 50%;
  304. }
  305. .mdc-fab:not(.mdc-fab--extended) .mdc-fab__ripple {
  306. border-radius: 50%;
  307. }
  308. @-webkit-keyframes mdc-ripple-fg-radius-in {
  309. from {
  310. -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  311. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  312. /* @noflip */
  313. /*rtl:ignore*/
  314. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  315. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  316. }
  317. to {
  318. /* @noflip */
  319. /*rtl:ignore*/
  320. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  321. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  322. }
  323. }
  324. @keyframes mdc-ripple-fg-radius-in {
  325. from {
  326. -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  327. animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  328. /* @noflip */
  329. /*rtl:ignore*/
  330. -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  331. transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  332. }
  333. to {
  334. /* @noflip */
  335. /*rtl:ignore*/
  336. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  337. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  338. }
  339. }
  340. @-webkit-keyframes mdc-ripple-fg-opacity-in {
  341. from {
  342. -webkit-animation-timing-function: linear;
  343. animation-timing-function: linear;
  344. opacity: 0;
  345. }
  346. to {
  347. opacity: var(--mdc-ripple-fg-opacity, 0);
  348. }
  349. }
  350. @keyframes mdc-ripple-fg-opacity-in {
  351. from {
  352. -webkit-animation-timing-function: linear;
  353. animation-timing-function: linear;
  354. opacity: 0;
  355. }
  356. to {
  357. opacity: var(--mdc-ripple-fg-opacity, 0);
  358. }
  359. }
  360. @-webkit-keyframes mdc-ripple-fg-opacity-out {
  361. from {
  362. -webkit-animation-timing-function: linear;
  363. animation-timing-function: linear;
  364. opacity: var(--mdc-ripple-fg-opacity, 0);
  365. }
  366. to {
  367. opacity: 0;
  368. }
  369. }
  370. @keyframes mdc-ripple-fg-opacity-out {
  371. from {
  372. -webkit-animation-timing-function: linear;
  373. animation-timing-function: linear;
  374. opacity: var(--mdc-ripple-fg-opacity, 0);
  375. }
  376. to {
  377. opacity: 0;
  378. }
  379. }
  380. .mdc-fab {
  381. --mdc-ripple-fg-size: 0;
  382. --mdc-ripple-left: 0;
  383. --mdc-ripple-top: 0;
  384. --mdc-ripple-fg-scale: 1;
  385. --mdc-ripple-fg-translate-end: 0;
  386. --mdc-ripple-fg-translate-start: 0;
  387. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  388. will-change: transform, opacity;
  389. }
  390. .mdc-fab .mdc-fab__ripple::before,
  391. .mdc-fab .mdc-fab__ripple::after {
  392. position: absolute;
  393. border-radius: 50%;
  394. opacity: 0;
  395. pointer-events: none;
  396. content: "";
  397. }
  398. .mdc-fab .mdc-fab__ripple::before {
  399. transition: opacity 15ms linear, background-color 15ms linear;
  400. z-index: 1;
  401. /* @alternate */
  402. z-index: var(--mdc-ripple-z-index, 1);
  403. }
  404. .mdc-fab .mdc-fab__ripple::after {
  405. z-index: 0;
  406. /* @alternate */
  407. z-index: var(--mdc-ripple-z-index, 0);
  408. }
  409. .mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple::before {
  410. -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
  411. transform: scale(var(--mdc-ripple-fg-scale, 1));
  412. }
  413. .mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple::after {
  414. top: 0;
  415. /* @noflip */
  416. /*rtl:ignore*/
  417. left: 0;
  418. -webkit-transform: scale(0);
  419. transform: scale(0);
  420. -webkit-transform-origin: center center;
  421. transform-origin: center center;
  422. }
  423. .mdc-fab.mdc-ripple-upgraded--unbounded .mdc-fab__ripple::after {
  424. top: var(--mdc-ripple-top, 0);
  425. /* @noflip */
  426. /*rtl:ignore*/
  427. left: var(--mdc-ripple-left, 0);
  428. }
  429. .mdc-fab.mdc-ripple-upgraded--foreground-activation .mdc-fab__ripple::after {
  430. -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
  431. animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
  432. }
  433. .mdc-fab.mdc-ripple-upgraded--foreground-deactivation .mdc-fab__ripple::after {
  434. -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
  435. animation: mdc-ripple-fg-opacity-out 150ms;
  436. /* @noflip */
  437. /*rtl:ignore*/
  438. -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  439. transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  440. }
  441. .mdc-fab .mdc-fab__ripple::before,
  442. .mdc-fab .mdc-fab__ripple::after {
  443. top: calc(50% - 100%);
  444. /* @noflip */
  445. /*rtl:ignore*/
  446. left: calc(50% - 100%);
  447. width: 200%;
  448. height: 200%;
  449. }
  450. .mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple::after {
  451. width: var(--mdc-ripple-fg-size, 100%);
  452. height: var(--mdc-ripple-fg-size, 100%);
  453. }
  454. .mdc-fab .mdc-fab__ripple::before, .mdc-fab .mdc-fab__ripple::after {
  455. background-color: #fff;
  456. /* @alternate */
  457. background-color: var(--mdc-ripple-color, var(--mdc-theme-on-secondary, #fff));
  458. }
  459. .mdc-fab:hover .mdc-fab__ripple::before, .mdc-fab.mdc-ripple-surface--hover .mdc-fab__ripple::before {
  460. opacity: 0.08;
  461. /* @alternate */
  462. opacity: var(--mdc-ripple-hover-opacity, 0.08);
  463. }
  464. .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__ripple::before, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__ripple::before {
  465. transition-duration: 75ms;
  466. opacity: 0.24;
  467. /* @alternate */
  468. opacity: var(--mdc-ripple-focus-opacity, 0.24);
  469. }
  470. .mdc-fab:not(.mdc-ripple-upgraded) .mdc-fab__ripple::after {
  471. transition: opacity 150ms linear;
  472. }
  473. .mdc-fab:not(.mdc-ripple-upgraded):active .mdc-fab__ripple::after {
  474. transition-duration: 75ms;
  475. opacity: 0.24;
  476. /* @alternate */
  477. opacity: var(--mdc-ripple-press-opacity, 0.24);
  478. }
  479. .mdc-fab.mdc-ripple-upgraded {
  480. --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
  481. }
  482. .mdc-fab .mdc-fab__ripple {
  483. position: absolute;
  484. top: 0;
  485. left: 0;
  486. width: 100%;
  487. height: 100%;
  488. pointer-events: none;
  489. overflow: hidden;
  490. }
  491. .mdc-fab {
  492. z-index: 0;
  493. }
  494. .mdc-fab .mdc-fab__ripple::before,
  495. .mdc-fab .mdc-fab__ripple::after {
  496. z-index: -1;
  497. /* @alternate */
  498. z-index: var(--mdc-ripple-z-index, -1);
  499. }
  500. /*# sourceMappingURL=mdc.fab.css.map*/