UNPKG

material-components-web

Version:

Modular and customizable Material Design UI components for the web

1,631 lines (1,567 loc) • 624 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__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__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; 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 */ /*rtl:ignore*/ margin-left: 16px; /* @noflip */ /*rtl:ignore*/ margin-right: 36px; } [dir=rtl] .mdc-banner .mdc-banner__text, .mdc-banner .mdc-banner__text[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 36px; /* @noflip */ /*rtl:ignore*/ margin-right: 16px; /*rtl:end:ignore*/ } } @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 */ /*rtl:ignore*/ margin-left: 16px; /* @noflip */ /*rtl:ignore*/ 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] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 16px; /*rtl:end:ignore*/ } .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; 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 */ /*rtl:ignore*/ margin-left: 16px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; flex-shrink: 0; margin-top: 16px; margin-bottom: 16px; text-align: center; } [dir=rtl] .mdc-banner__graphic, .mdc-banner__graphic[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 16px; /*rtl:end:ignore*/ } .mdc-banner__icon { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mdc-banner__text { /* @noflip */ /*rtl:ignore*/ margin-left: 24px; /* @noflip */ /*rtl:ignore*/ 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] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 90px; /* @noflip */ /*rtl:ignore*/ margin-right: 24px; /*rtl:end:ignore*/ } .mdc-banner__actions { /* @noflip */ /*rtl:ignore*/ padding-left: 0; /* @noflip */ /*rtl:ignore*/ 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] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ padding-left: 8px; /* @noflip */ /*rtl:ignore*/ padding-right: 0; /*rtl:end:ignore*/ } .mdc-banner__secondary-action { /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; } [dir=rtl] .mdc-banner__secondary-action, .mdc-banner__secondary-action[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; /*rtl:end:ignore*/ } .mdc-banner { background-color: #fff; border-bottom-color: rgba(0, 0, 0, 0.12); border-bottom-width: 1px; border-radius: 0; /* @alternate */ } .mdc-banner .mdc-banner__text { color: #000; } .mdc-banner .mdc-banner__text { letter-spacing: 0.0178571429em; font-size: 0.875rem; font-family: Roboto, sans-serif; font-weight: 400; line-height: 1.25rem; } .mdc-banner .mdc-banner__graphic { border-radius: 50%; } .mdc-banner .mdc-banner__graphic { height: 40px; width: 40px; } .mdc-banner .mdc-banner__fixed { background-color: #fff; } .mdc-banner .mdc-banner__fixed { border-bottom-color: rgba(0, 0, 0, 0.12); } .mdc-banner .mdc-banner__fixed { border-bottom-width: 1px; } .mdc-banner .mdc-button:not(:disabled) { color: #6200ee; /* @alternate */ color: var(--mdc-text-button-label-text-color, #6200ee); } .mdc-banner .mdc-button .mdc-button__ripple::before, .mdc-banner .mdc-button .mdc-button__ripple::after { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-text-button-hover-state-layer-color, #6200ee); } .mdc-banner .mdc-button:hover .mdc-button__ripple::before, .mdc-banner .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before { opacity: 0.04; /* @alternate */ opacity: var(--mdc-text-button-hover-state-layer-opacity, 0.04); } .mdc-banner .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-banner .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before { transition-duration: 75ms; opacity: 0.12; /* @alternate */ opacity: var(--mdc-text-button-focus-state-layer-opacity, 0.12); } .mdc-banner .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after { transition: opacity 150ms linear; } .mdc-banner .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after { transition-duration: 75ms; opacity: 0.1; /* @alternate */ opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.1); } .mdc-banner .mdc-button.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.1); } .mdc-banner__secondary-action { /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; } [dir=rtl] .mdc-banner__secondary-action, .mdc-banner__secondary-action[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; /*rtl:end:ignore*/ } .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 */ /*rtl:ignore*/ 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 */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ 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] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; /*rtl:end:ignore*/ } .mdc-button .mdc-button__label { position: relative; } .mdc-button .mdc-button__focus-ring { display: none; } @media screen and (forced-colors: active) { .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring { pointer-events: none; border: 2px solid transparent; border-radius: 6px; box-sizing: content-box; position: absolute; top: 50%; /* @noflip */ /*rtl:ignore*/ left: 50%; /* @noflip */ /*rtl:ignore*/ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: calc( 100% + 4px ); width: calc( 100% + 4px ); display: block; } } @media screen and (forced-colors: active) and (forced-colors: active) { .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring { border-color: CanvasText; } } @media screen and (forced-colors: active) { .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after { content: ""; border: 2px solid transparent; border-radius: 8px; display: block; position: absolute; top: 50%; /* @noflip */ /*rtl:ignore*/ left: 50%; /* @noflip */ /*rtl:ignore*/ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: calc(100% + 4px); width: calc(100% + 4px); } } @media screen and (forced-colors: active) and (forced-colors: active) { .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring::after, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring::after { border-color: CanvasText; } } .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 */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; } [dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; /*rtl:end:ignore*/ } svg.mdc-button__icon { fill: currentColor; } .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); } .mdc-button { padding: 0 8px 0 8px; } .mdc-button--unelevated { transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); padding: 0 16px 0 16px; } .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--raised { transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); padding: 0 16px 0 16px; } .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--outlined { border-style: solid; transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1); } .mdc-button--outlined .mdc-button__ripple { border-style: solid; border-color: transparent; } @-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 */ /*rtl:ignore*/ 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 */ /*rtl:ignore*/ 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 */ /*rtl:ignore*/ 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__ripple { position: absolute; box-sizing: content-box; overflow: hidden; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; } .mdc-button { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-text-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button:not(:disabled) { color: #6200ee; /* @alternate */ color: var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #6200ee)); } .mdc-button:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-text-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-text-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-text-button-with-icon-icon-size, 1.125rem); } .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-text-button-hover-state-layer-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-text-button-hover-state-layer-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-text-button-focus-state-layer-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-text-button-pressed-state-layer-opacity, 0.12); } .mdc-button.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12); } .mdc-button .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--unelevated { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-filled-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--unelevated:not(:disabled) { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #6200ee)); } .mdc-button--unelevated:disabled { background-color: rgba(0, 0, 0, 0.12); /* @alternate */ background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12)); } .mdc-button--unelevated:not(:disabled) { color: #fff; /* @alternate */ color: var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #fff)); } .mdc-button--unelevated:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button--unelevated .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-filled-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-filled-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-filled-button-with-icon-icon-size, 1.125rem); } .mdc-button--unelevated .mdc-button__ripple::before, .mdc-button--unelevated .mdc-button__ripple::after { background-color: #fff; /* @alternate */ background-color: var(--mdc-filled-button-hover-state-layer-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-filled-button-hover-state-layer-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-filled-button-focus-state-layer-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-filled-button-pressed-state-layer-opacity, 0.24); } .mdc-button--unelevated.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24); } .mdc-button--unelevated .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--raised { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-protected-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px)); --mdc-elevation-box-shadow-for-gss: 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); 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); /* @alternate */ box-shadow: var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); } .mdc-button--raised:not(:disabled) { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #6200ee)); } .mdc-button--raised:disabled { background-color: rgba(0, 0, 0, 0.12); /* @alternate */ background-color: var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12)); } .mdc-button--raised:not(:disabled) { color: #fff; /* @alternate */ color: var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #fff)); } .mdc-button--raised:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button--raised .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-protected-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-protected-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-protected-button-with-icon-icon-size, 1.125rem); } .mdc-button--raised .mdc-button__ripple::before, .mdc-button--raised .mdc-button__ripple::after { background-color: #fff; /* @alternate */ background-color: var(--mdc-protected-button-hover-state-layer-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-protected-button-hover-state-layer-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-protected-button-focus-state-layer-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-protected-button-pressed-state-layer-opacity, 0.24); } .mdc-button--raised.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24); } .mdc-button--raised .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--raised.mdc-ripple-upgraded--background-focused, .mdc-button--raised:not(.mdc-ripple-upgraded):focus { --mdc-elevation-box-shadow-for-gss: 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); 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); /* @alternate */ box-shadow: var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); } .mdc-button--raised:hover { --mdc-elevation-box-shadow-for-gss: 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); 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); /* @alternate */ box-shadow: var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); } .mdc-button--raised:not(:disabled):active { --mdc-elevation-box-shadow-for-gss: 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); 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); /* @alternate */ box-shadow: var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); } .mdc-button--raised:disabled { --mdc-elevation-box-shadow-for-gss: 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); 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); /* @alternate */ box-shadow: var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss)); } .mdc-button--outlined { font-family: Roboto, sans-serif; /* @alternate */ font-family: var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))); font-size: 0.875rem; /* @alternate */ font-size: var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem)); letter-spacing: 0.0892857143em; /* @alternate */ letter-spacing: var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em)); font-weight: 500; /* @alternate */ font-weight: var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500)); text-transform: uppercase; /* @alternate */ text-transform: var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, uppercase)); height: 36px; /* @alternate */ height: var(--mdc-outlined-button-container-height, 36px); border-radius: 4px; /* @alternate */ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px)); padding: 0 15px 0 15px; border-width: 1px; /* @alternate */ border-width: var(--mdc-outlined-button-outline-width, 1px); } .mdc-button--outlined:not(:disabled) { color: #6200ee; /* @alternate */ color: var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #6200ee)); } .mdc-button--outlined:disabled { color: rgba(0, 0, 0, 0.38); /* @alternate */ color: var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38)); } .mdc-button--outlined .mdc-button__icon { font-size: 1.125rem; /* @alternate */ font-size: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem); width: 1.125rem; /* @alternate */ width: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem); height: 1.125rem; /* @alternate */ height: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem); } .mdc-button--outlined .mdc-button__ripple::before, .mdc-button--outlined .mdc-button__ripple::after { background-color: #6200ee; /* @alternate */ background-color: var(--mdc-outlined-button-hover-state-layer-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-outlined-button-hover-state-layer-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-outlined-button-focus-state-layer-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-outlined-button-pressed-state-layer-opacity, 0.12); } .mdc-button--outlined.mdc-ripple-upgraded { --mdc-ripple-fg-opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12); } .mdc-button--outlined .mdc-button__ripple { border-radius: 4px; /* @alternate */ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px)); } .mdc-button--outlined:not(:disabled) { border-color: rgba(0, 0, 0, 0.12); /* @alternate */ border-color: var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12)); } .mdc-button--outlined:disabled { border-color: rgba(0, 0, 0, 0.12); /* @alternate */ border-color: var(--mdc-outlined-button-disabled-outline-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; bottom: -1px; right: -1px; border-width: 1px; /* @alternate */ border-width: var(--mdc-outlined-button-outline-width, 1px); } .mdc-button--outlined .mdc-button__touch { left: calc(-1 * 1px); /* @alternate */ left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px)); width: calc(100% + 2 * 1px); /* @alternate */ width: calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px)); } .mdc-button--raised .mdc-button__icon, .mdc-button--unelevated .mdc-button__icon, .mdc-button--outlined .mdc-button__icon { /* @noflip */ /*rtl:ignore*/ margin-left: -4px; /* @noflip */ /*rtl:ignore*/ 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] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: -4px; /*rtl:end:ignore*/ } .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 */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ 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] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: -4px; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; /*rtl:end:ignore*/ } .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 */ /*rtl:ignore*/ 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; } @media screen and (forced-colors: active) { .mdc-card::after { border-color: CanvasText; } } .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 */ /*rtl:ignore*/ margin-left: 16px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; } [dir=rtl] .mdc-card__action-buttons + .mdc-card__action-icons, .mdc-card__action-buttons + .mdc-card__action-icons[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 16px; /*rtl:end:ignore*/ } .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 */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 8px; padding: 0 8px; } [dir=rtl] .mdc-card__action--button, .mdc-card__action--button[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 8px; /* @noflip */ /*rtl:ignore*/ margin-right: 0; /*rtl:end:ignore*/ } .mdc-card__action--button:last-child { /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 0; } [dir=rtl] .mdc-card__action--button:last-child, .mdc-card__action--button:last-child[dir=rtl] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ margin-left: 0; /* @noflip */ /*rtl:ignore*/ margin-right: 0; /*rtl:end:ignore*/ } .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 */ /*rtl:ignore*/ 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] { /*rtl:begin:ignore*/ /* @noflip */ /*rtl:ignore*/ text-align: right; /*rtl:end:ignore*/ } .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 */ /*rtl:ignore*/ 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 */ /*rtl:ignore*/ 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 */ /*rtl:ignore*/ 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; } @media screen and (forced-colors: active) { .mdc-card__primary-action.mdc-ripple-upgraded--background-focused::after, .mdc-card__primary-action:not(.mdc-ripple-upgraded):focus::after { border-color: CanvasText; } } .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