mdc.tab.css 12 KB

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