UNPKG

material-components-web

Version:

Modular and customizable Material Design UI components for the web

1,658 lines (1,591 loc) • 548 kB
/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE */ @charset "UTF-8"; .mdc-banner__text { color: #000; /* @alternate */ color: var(--mdc-theme-on-surface, #000); } .mdc-banner__graphic { color: #fff; /* @alternate */ color: var(--mdc-theme-surface, #fff); } .mdc-banner__graphic { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-theme-primary, #6200ee); } .mdc-banner__graphic { border-radius: 50%; } .mdc-banner__content, .mdc-banner__fixed { min-width: 344px; } @media (max-width: 480px), (max-width: 344px) { .mdc-banner__content, .mdc-banner__fixed { min-width: 100%; } } .mdc-banner__content { max-width: 720px; } .mdc-banner { z-index: 1; border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; display: none; flex-shrink: 0; height: 0; position: relative; width: 100%; } @media (max-width: 480px) { .mdc-banner .mdc-banner__fixed { left: 0; right: 0; } .mdc-banner .mdc-banner__text { /* @noflip */ margin-left: 16px; /* @noflip */ margin-right: 36px; } [dir=rtl] .mdc-banner .mdc-banner__text, .mdc-banner .mdc-banner__text[dir=rtl] { /* @noflip */ margin-left: 36px; /* @noflip */ margin-right: 16px; } } @media (max-width: 480px) { .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__content { flex-wrap: wrap; } .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__graphic { margin-bottom: 12px; } .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text { /* @noflip */ margin-left: 16px; /* @noflip */ margin-right: 8px; padding-bottom: 4px; } [dir=rtl] .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text, .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text[dir=rtl] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 16px; } .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__actions { margin-left: auto; } } .mdc-banner--opening, .mdc-banner--open, .mdc-banner--closing { display: flex; } .mdc-banner--open { transition: height 300ms ease; } .mdc-banner--open .mdc-banner__content { transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; -webkit-transform: translateY(0); transform: translateY(0); } .mdc-banner--closing { transition: height 250ms ease; } .mdc-banner--closing .mdc-banner__content { transition: -webkit-transform 250ms ease; transition: transform 250ms ease; transition: transform 250ms ease, -webkit-transform 250ms ease; } .mdc-banner--centered .mdc-banner__content { left: 0; margin-left: auto; margin-right: auto; right: 0; } .mdc-banner__fixed { border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; height: inherit; position: fixed; width: 100%; } .mdc-banner__content { display: flex; min-height: 52px; position: absolute; -webkit-transform: translateY(-100%); transform: translateY(-100%); width: 100%; } .mdc-banner__graphic-text-wrapper { display: flex; width: 100%; } .mdc-banner__graphic { /* @noflip */ margin-left: 16px; /* @noflip */ margin-right: 0; flex-shrink: 0; height: 40px; margin-top: 16px; margin-bottom: 16px; text-align: center; width: 40px; } [dir=rtl] .mdc-banner__graphic, .mdc-banner__graphic[dir=rtl] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 16px; } .mdc-banner__icon { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mdc-banner__text { /* @noflip */ margin-left: 24px; /* @noflip */ margin-right: 90px; align-self: center; flex-grow: 1; padding-top: 16px; padding-bottom: 16px; } [dir=rtl] .mdc-banner__text, .mdc-banner__text[dir=rtl] { /* @noflip */ margin-left: 90px; /* @noflip */ margin-right: 24px; } .mdc-banner__actions { /* @noflip */ padding-left: 0; /* @noflip */ padding-right: 8px; align-self: flex-end; display: flex; flex-shrink: 0; padding-bottom: 8px; padding-top: 8px; } [dir=rtl] .mdc-banner__actions, .mdc-banner__actions[dir=rtl] { /* @noflip */ padding-left: 8px; /* @noflip */ padding-right: 0; } .mdc-banner__secondary-action { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; } [dir=rtl] .mdc-banner__secondary-action, .mdc-banner__secondary-action[dir=rtl] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } .mdc-banner { background-color: #fff; /* @alternate */ background-color: var(--mdc-theme-surface, #fff); border-bottom-color: rgba(0, 0, 0, 0.12); } .mdc-banner .mdc-banner__fixed { background-color: #fff; /* @alternate */ background-color: var(--mdc-theme-surface, #fff); } .mdc-banner .mdc-banner__fixed { border-bottom-color: rgba(0, 0, 0, 0.12); } .mdc-banner__text { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-body2-font-size, 0.875rem); line-height: 1.25rem; /* @alternate */ line-height: var(--mdc-typography-body2-line-height, 1.25rem); font-weight: 400; /* @alternate */ font-weight: var(--mdc-typography-body2-font-weight, 400); letter-spacing: 0.0178571429em; /* @alternate */ letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em); text-decoration: inherit; /* @alternate */ -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit); text-decoration: var(--mdc-typography-body2-text-decoration, inherit); text-transform: inherit; /* @alternate */ text-transform: var(--mdc-typography-body2-text-transform, inherit); } .mdc-banner__primary-action:not(:disabled) { color: #6200ee; /* @alternate */ color: var(--mdc-theme-primary, #6200ee); } .mdc-banner__primary-action::before, .mdc-banner__primary-action::after { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); } .mdc-banner__primary-action:hover::before, .mdc-banner__primary-action.mdc-ripple-surface--hover::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-banner__primary-action.mdc-ripple-upgraded--background-focused::before, .mdc-banner__primary-action:not(.mdc-ripple-upgraded):focus::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-banner__primary-action:not(.mdc-ripple-upgraded)::after { transition: opacity 150ms linear; } .mdc-banner__primary-action:not(.mdc-ripple-upgraded):active::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-banner__primary-action.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-banner__secondary-action { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; } .mdc-banner__secondary-action:not(:disabled) { color: #6200ee; /* @alternate */ color: var(--mdc-theme-primary, #6200ee); } .mdc-banner__secondary-action::before, .mdc-banner__secondary-action::after { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); } .mdc-banner__secondary-action:hover::before, .mdc-banner__secondary-action.mdc-ripple-surface--hover::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-banner__secondary-action.mdc-ripple-upgraded--background-focused::before, .mdc-banner__secondary-action:not(.mdc-ripple-upgraded):focus::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-banner__secondary-action:not(.mdc-ripple-upgraded)::after { transition: opacity 150ms linear; } .mdc-banner__secondary-action:not(.mdc-ripple-upgraded):active::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-banner__secondary-action.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } [dir=rtl] .mdc-banner__secondary-action, .mdc-banner__secondary-action[dir=rtl] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } .mdc-touch-target-wrapper { display: inline; } .mdc-elevation-overlay { position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; /* @alternate */ opacity: var(--mdc-elevation-overlay-opacity, 0); transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); background-color: #fff; /* @alternate */ background-color: var(--mdc-elevation-overlay-color, #fff); } .mdc-button { /* @alternate */ position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 64px; border: none; outline: none; /* @alternate */ line-height: inherit; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; overflow: visible; vertical-align: middle; background: transparent; } .mdc-button .mdc-elevation-overlay { width: 100%; height: 100%; top: 0; /* @noflip */ left: 0; } .mdc-button::-moz-focus-inner { padding: 0; border: 0; } .mdc-button:active { outline: none; } .mdc-button:hover { cursor: pointer; } .mdc-button:disabled { cursor: default; pointer-events: none; } .mdc-button .mdc-button__icon { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; display: inline-block; position: relative; vertical-align: top; } [dir=rtl] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir=rtl] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } .mdc-button .mdc-button__touch { position: absolute; top: 50%; height: 48px; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mdc-button__label + .mdc-button__icon { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } [dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir=rtl] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; } svg.mdc-button__icon { fill: currentColor; } .mdc-button--raised .mdc-button__icon, .mdc-button--unelevated .mdc-button__icon, .mdc-button--outlined .mdc-button__icon { /* @noflip */ margin-left: -4px; /* @noflip */ margin-right: 8px; } [dir=rtl] .mdc-button--raised .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__icon[dir=rtl] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: -4px; } .mdc-button--raised .mdc-button__label + .mdc-button__icon, .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, .mdc-button--outlined .mdc-button__label + .mdc-button__icon { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: -4px; } [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] { /* @noflip */ margin-left: -4px; /* @noflip */ margin-right: 8px; } .mdc-button--touch { margin-top: 6px; margin-bottom: 6px; } .mdc-button { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); text-decoration: none; /* @alternate */ -webkit-text-decoration: var(--mdc-typography-button-text-decoration, none); text-decoration: var(--mdc-typography-button-text-decoration, none); } @-webkit-keyframes mdc-ripple-fg-radius-in { from { -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } to { -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } @keyframes mdc-ripple-fg-radius-in { from { -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } to { -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } @-webkit-keyframes mdc-ripple-fg-opacity-in { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: 0; } to { opacity: var(--mdc-ripple-fg-opacity, 0); } } @keyframes mdc-ripple-fg-opacity-in { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: 0; } to { opacity: var(--mdc-ripple-fg-opacity, 0); } } @-webkit-keyframes mdc-ripple-fg-opacity-out { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: var(--mdc-ripple-fg-opacity, 0); } to { opacity: 0; } } @keyframes mdc-ripple-fg-opacity-out { from { -webkit-animation-timing-function: linear; animation-timing-function: linear; opacity: var(--mdc-ripple-fg-opacity, 0); } to { opacity: 0; } } .mdc-button { --mdc-ripple-fg-size: 0; --mdc-ripple-left: 0; --mdc-ripple-top: 0; --mdc-ripple-fg-scale: 1; --mdc-ripple-fg-translate-end: 0; --mdc-ripple-fg-translate-start: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); will-change: transform, opacity; } .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-button .mdc-button__ripple::before { transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; /* @alternate */ z-index: var(--mdc-ripple-z-index, 1); } .mdc-button .mdc-button__ripple::after { z-index: 0; /* @alternate */ z-index: var(--mdc-ripple-z-index, 0); } .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::before { -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { top: 0; /* @noflip */ left: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; transform-origin: center center; } .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after { top: var(--mdc-ripple-top, 0); /* @noflip */ left: var(--mdc-ripple-left, 0); } .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after { -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple::after { -webkit-animation: mdc-ripple-fg-opacity-out 150ms; animation: mdc-ripple-fg-opacity-out 150ms; -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after { top: calc(50% - 100%); /* @noflip */ left: calc(50% - 100%); width: 200%; height: 200%; } .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-button .mdc-button__ripple { position: absolute; box-sizing: content-box; width: 100%; height: 100%; overflow: hidden; } .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple { top: 0; left: 0; } .mdc-button--raised { transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-button--outlined { border-style: solid; } .mdc-button { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-button-font-size, 0.875rem); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-button-font-weight, 500); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-typography-button-text-transform, uppercase); height: 36px; border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); padding: 0 8px 0 8px; } .mdc-button:not(:disabled) { color: #6200ee; /* @alternate */ color: var(--mdc-theme-primary, #6200ee); } .mdc-button:disabled { color: rgba(0, 0, 0, 0.38); } .mdc-button .mdc-button__icon { font-size: 1.125rem; height: 1.125rem; width: 1.125rem; } .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); } .mdc-button:hover .mdc-button__ripple::before, .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-button.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-button .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); } .mdc-button--unelevated { padding: 0 16px 0 16px; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-button-font-size, 0.875rem); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-button-font-weight, 500); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-typography-button-text-transform, uppercase); height: 36px; border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); } .mdc-button--unelevated.mdc-button--icon-trailing { padding: 0 12px 0 16px; } .mdc-button--unelevated.mdc-button--icon-leading { padding: 0 16px 0 12px; } .mdc-button--unelevated:not(:disabled) { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-theme-primary, #6200ee); } .mdc-button--unelevated:disabled { background-color: rgba(0, 0, 0, 0.12); } .mdc-button--unelevated:not(:disabled) { color: #fff; /* @alternate */ color: var(--mdc-theme-on-primary, #fff); } .mdc-button--unelevated:disabled { color: rgba(0, 0, 0, 0.38); } .mdc-button--unelevated .mdc-button__icon { font-size: 1.125rem; height: 1.125rem; width: 1.125rem; } .mdc-button--unelevated .mdc-button__ripple::before, .mdc-button--unelevated .mdc-button__ripple::after { background-color: #fff; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); } .mdc-button--unelevated:hover .mdc-button__ripple::before, .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.08; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.08); } .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.24); } .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.24); } .mdc-button--unelevated.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); } .mdc-button--unelevated .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); } .mdc-button--raised { padding: 0 16px 0 16px; font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-button-font-size, 0.875rem); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-button-font-weight, 500); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-typography-button-text-transform, uppercase); height: 36px; border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); /* @alternate */ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .mdc-button--raised.mdc-button--icon-trailing { padding: 0 12px 0 16px; } .mdc-button--raised.mdc-button--icon-leading { padding: 0 16px 0 12px; } .mdc-button--raised:not(:disabled) { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-theme-primary, #6200ee); } .mdc-button--raised:disabled { background-color: rgba(0, 0, 0, 0.12); } .mdc-button--raised:not(:disabled) { color: #fff; /* @alternate */ color: var(--mdc-theme-on-primary, #fff); } .mdc-button--raised:disabled { color: rgba(0, 0, 0, 0.38); } .mdc-button--raised .mdc-button__icon { font-size: 1.125rem; height: 1.125rem; width: 1.125rem; } .mdc-button--raised .mdc-button__ripple::before, .mdc-button--raised .mdc-button__ripple::after { background-color: #fff; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff)); } .mdc-button--raised:hover .mdc-button__ripple::before, .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.08; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.08); } .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.24); } .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.24; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.24); } .mdc-button--raised.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24); } .mdc-button--raised .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); } .mdc-button--raised.mdc-ripple-upgraded--background-focused, .mdc-button--raised:not(.mdc-ripple-upgraded):focus { /* @alternate */ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .mdc-button--raised:hover { /* @alternate */ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } .mdc-button--raised:not(:disabled):active { /* @alternate */ 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); } .mdc-button--raised:disabled { /* @alternate */ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); } .mdc-button--outlined { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-typography-button-font-size, 0.875rem); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em); font-weight: 500; /* @alternate */ font-weight: var(--mdc-typography-button-font-weight, 500); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-typography-button-text-transform, uppercase); height: 36px; border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); padding: 0 15px 0 15px; border-width: 1px; } .mdc-button--outlined:not(:disabled) { color: #6200ee; /* @alternate */ color: var(--mdc-theme-primary, #6200ee); } .mdc-button--outlined:disabled { color: rgba(0, 0, 0, 0.38); } .mdc-button--outlined .mdc-button__icon { font-size: 1.125rem; height: 1.125rem; width: 1.125rem; } .mdc-button--outlined .mdc-button__ripple::before, .mdc-button--outlined .mdc-button__ripple::after { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee)); } .mdc-button--outlined:hover .mdc-button__ripple::before, .mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-button--outlined.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-button--outlined .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-small, 4px); } .mdc-button--outlined:not(:disabled) { border-color: rgba(0, 0, 0, 0.12); } .mdc-button--outlined:disabled { border-color: rgba(0, 0, 0, 0.12); } .mdc-button--outlined.mdc-button--icon-trailing { padding: 0 11px 0 15px; } .mdc-button--outlined.mdc-button--icon-leading { padding: 0 15px 0 11px; } .mdc-button--outlined .mdc-button__ripple { top: -1px; left: -1px; border: 1px solid transparent; } .mdc-button--outlined .mdc-button__touch { left: -1px; width: calc(100% + 2 * 1px); } .mdc-card { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-medium, 4px); background-color: #fff; /* @alternate */ background-color: var(--mdc-theme-surface, #fff); /* @alternate */ position: relative; /* @alternate */ box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; box-sizing: border-box; } .mdc-card .mdc-elevation-overlay { width: 100%; height: 100%; top: 0; /* @noflip */ left: 0; } .mdc-card::after { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-shape-medium, 4px); position: absolute; box-sizing: border-box; width: 100%; height: 100%; top: 0; left: 0; border: 1px solid transparent; border-radius: inherit; content: ""; pointer-events: none; pointer-events: none; } .mdc-card--outlined { /* @alternate */ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); border-width: 1px; border-style: solid; border-color: #e0e0e0; } .mdc-card--outlined::after { border: none; } .mdc-card__content { border-radius: inherit; height: 100%; } .mdc-card__media { position: relative; box-sizing: border-box; background-repeat: no-repeat; background-position: center; background-size: cover; } .mdc-card__media::before { display: block; content: ""; } .mdc-card__media:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .mdc-card__media:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .mdc-card__media--square::before { margin-top: 100%; } .mdc-card__media--16-9::before { margin-top: 56.25%; } .mdc-card__media-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .mdc-card__primary-action { display: flex; flex-direction: column; box-sizing: border-box; position: relative; outline: none; color: inherit; text-decoration: none; cursor: pointer; overflow: hidden; } .mdc-card__primary-action:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .mdc-card__primary-action:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .mdc-card__actions { display: flex; flex-direction: row; align-items: center; box-sizing: border-box; min-height: 52px; padding: 8px; } .mdc-card__actions--full-bleed { padding: 0; } .mdc-card__action-buttons, .mdc-card__action-icons { display: flex; flex-direction: row; align-items: center; box-sizing: border-box; } .mdc-card__action-icons { color: rgba(0, 0, 0, 0.6); flex-grow: 1; justify-content: flex-end; } .mdc-card__action-buttons + .mdc-card__action-icons { /* @noflip */ margin-left: 16px; /* @noflip */ margin-right: 0; } [dir=rtl] .mdc-card__action-buttons + .mdc-card__action-icons, .mdc-card__action-buttons + .mdc-card__action-icons[dir=rtl] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 16px; } .mdc-card__action { display: inline-flex; flex-direction: row; align-items: center; box-sizing: border-box; justify-content: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mdc-card__action:focus { outline: none; } .mdc-card__action--button { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 8px; padding: 0 8px; } [dir=rtl] .mdc-card__action--button, .mdc-card__action--button[dir=rtl] { /* @noflip */ margin-left: 8px; /* @noflip */ margin-right: 0; } .mdc-card__action--button:last-child { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 0; } [dir=rtl] .mdc-card__action--button:last-child, .mdc-card__action--button:last-child[dir=rtl] { /* @noflip */ margin-left: 0; /* @noflip */ margin-right: 0; } .mdc-card__actions--full-bleed .mdc-card__action--button { justify-content: space-between; width: 100%; height: auto; max-height: none; margin: 0; padding: 8px 16px; /* @noflip */ text-align: left; } [dir=rtl] .mdc-card__actions--full-bleed .mdc-card__action--button, .mdc-card__actions--full-bleed .mdc-card__action--button[dir=rtl] { /* @noflip */ text-align: right; } .mdc-card__action--icon { margin: -6px 0; padding: 12px; } .mdc-card__action--icon:not(:disabled) { color: rgba(0, 0, 0, 0.6); } .mdc-card__primary-action { --mdc-ripple-fg-size: 0; --mdc-ripple-left: 0; --mdc-ripple-top: 0; --mdc-ripple-fg-scale: 1; --mdc-ripple-fg-translate-end: 0; --mdc-ripple-fg-translate-start: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); will-change: transform, opacity; } .mdc-card__primary-action .mdc-card__ripple::before, .mdc-card__primary-action .mdc-card__ripple::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: ""; } .mdc-card__primary-action .mdc-card__ripple::before { transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; /* @alternate */ z-index: var(--mdc-ripple-z-index, 1); } .mdc-card__primary-action .mdc-card__ripple::after { z-index: 0; /* @alternate */ z-index: var(--mdc-ripple-z-index, 0); } .mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple::before { -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); transform: scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple::after { top: 0; /* @noflip */ left: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; transform-origin: center center; } .mdc-card__primary-action.mdc-ripple-upgraded--unbounded .mdc-card__ripple::after { top: var(--mdc-ripple-top, 0); /* @noflip */ left: var(--mdc-ripple-left, 0); } .mdc-card__primary-action.mdc-ripple-upgraded--foreground-activation .mdc-card__ripple::after { -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; } .mdc-card__primary-action.mdc-ripple-upgraded--foreground-deactivation .mdc-card__ripple::after { -webkit-animation: mdc-ripple-fg-opacity-out 150ms; animation: mdc-ripple-fg-opacity-out 150ms; -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } .mdc-card__primary-action .mdc-card__ripple::before, .mdc-card__primary-action .mdc-card__ripple::after { top: calc(50% - 100%); /* @noflip */ left: calc(50% - 100%); width: 200%; height: 200%; } .mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%); } .mdc-card__primary-action .mdc-card__ripple::before, .mdc-card__primary-action .mdc-card__ripple::after { background-color: #000; /* @alternate */ background-color: var(--mdc-ripple-color, #000); } .mdc-card__primary-action:hover .mdc-card__ripple::before, .mdc-card__primary-action.mdc-ripple-surface--hover .mdc-card__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-card__primary-action.mdc-ripple-upgraded--background-focused .mdc-card__ripple::before, .mdc-card__primary-action:not(.mdc-ripple-upgraded):focus .mdc-card__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-card__primary-action:not(.mdc-ripple-upgraded) .mdc-card__ripple::after { transition: opacity 150ms linear; } .mdc-card__primary-action:not(.mdc-ripple-upgraded):active .mdc-card__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-card__primary-action.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-card__primary-action .mdc-card__ripple { box-sizing: content-box; height: 100%; overflow: hidden; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .mdc-card__primary-action.mdc-ripple-upgraded--background-focused::after, .mdc-card__primary-action:not(.mdc-ripple-upgraded):focus::after { position: absolute; box-sizing: border-box; width: 100%; height: 100%; top: 0; left: 0; border: 5px double transparent; border-radius: inherit; content: ""; pointer-events: none; } .mdc-checkbox { padding: calc((40px - 18px) / 2); /* @alternate */ padding: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2); margin: calc((40px - 40px) / 2); /* @alternate */ margin: calc((var(--mdc-checkbox-touch-target-size, 40px) - 40px) / 2); } .mdc-checkbox .mdc-checkbox__ripple::before, .mdc-checkbox .mdc-checkbox__ripple::after { background-color: #000; /* @alternate */ background-color: var(--mdc-ripple-color, #000); } .mdc-checkbox:hover .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-ripple-surface--hover .mdc-checkbox__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple::before, .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-checkbox:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after { transition: opacity 150ms linear; } .mdc-checkbox:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-checkbox.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::after { background-color: #018786; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786)); } .mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-ripple-hover-opacity, 0.04); } .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 { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-focus-opacity, 0.12); } .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after { transition: opacity 150ms linear; } .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12); } .mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::after { background-color: #018786; /* @alternate */ background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786)); } .mdc-checkbox .mdc-checkbox__background { top: calc((40px - 18px) / 2); /* @alternate */ top: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2); left: calc((40px - 18px) / 2); /* @alternate */ left: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2); } .mdc-checkbox .mdc-checkbox__native-control { top: calc((40px - 40px) / 2); /* @alternate */ top: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2); right: calc((40px - 40px) / 2); /* @alternate */ right: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2); left: calc((40px - 40px) / 2); /* @alternate */ left: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2); width: 40px; /* @alternate */ width: var(--mdc-checkbox-touch-target-size, 40px); height: 40px; /* @alternate */ height: var(--mdc-checkbox-touch-target-size, 40px); } .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } .mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled ~ .mdc-checkbox__background { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } @-webkit-keyframes mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786 { 0% { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } 50% { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } } @keyframes mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786 { 0% { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } 50% { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } } @-webkit-keyframes mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786 { 0%, 80% { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } 100% { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } } @keyframes mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786 { 0%, 80% { border-color: #018786; /* @alternate */ border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); background-color: #018786; /* @alternate */ background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786)); } 100% { border-color: rgba(0, 0, 0, 0.54); /* @alternate */ border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54)); background-color: transparent; } } .mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background { -webkit-animation-name: mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786; animation-name: mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786; } .mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background { -webkit-animation-name: mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786; animation-name: mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786; } .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background { border-color: rgba(0, 0, 0, 0.38); /* @alternate */ border-color: var(--mdc-checkbox-disabled-color, rgba(0, 0, 0, 0.38)); background-color: transparent; } .mdc-checkbox .mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background, .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled] ~ .mdc-checkbox__background { border-color: transparent; background-color: rgba(0, 0, 0, 0.38); /* @alternate */ background-color: var(--mdc-checkbox-disabled-color, rgba(0, 0, 0, 0.38)); } .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark { color: #fff; /* @alternate */ color: var(--mdc-checkbox-ink-color, #fff); } .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark { border-color: #fff; /* @alternate */ border-color: var(--mdc-checkbox-ink-color, #fff); } .mdc-checkbox .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark { color: #fff; /* @alternate */ color: var(--mdc-checkbox-ink-color, #fff); } .mdc-checkbox .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark { border-color: #fff; /* @alternate */ border-color: var(--mdc-checkbox-ink-color, #fff); } @-webkit-keyframes mdc-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 29.7833385; } 50% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } 100% { stroke-dashoffset: 0; } } @keyframes mdc-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 29.7833385; } 50% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes mdc-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { -webkit-transform: scaleX(0); transform: scaleX(0); } 68.2% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { -webkit-transform: scaleX(0); transform: scaleX(0); } 68.2% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1); animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes mdc-checkbox-checked-unchecked-checkmark-path { from { -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); opacity: 1; stroke-dashoffset: 0; } to { opacity: 0; stroke-dashoffset: -29.7833385; } } @keyframes mdc-checkbox-checked-unchecked-checkmark-path { from { -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); opacity: 1; stroke-dashoffset: 0; } to { opacity: 0; stroke-dashoffset: -29.7833385; } } @-webkit-keyframes mdc-checkbox-checked-indeterminate-checkmark { from { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes mdc-checkbox-checked-indeterminate-checkmark { from { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bez