material-components-web
Version:
Modular and customizable Material Design UI components for the web
1,407 lines (1,349 loc) • 391 kB
CSS
/*!
Material Components for the web
Copyright (c) 2017 Google Inc.
License: Apache-2.0
*/
@-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.16); } }
@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.16); } }
@-webkit-keyframes mdc-ripple-fg-opacity-out {
from {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
opacity: var(--mdc-ripple-fg-opacity, 0.16); }
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.16); }
to {
opacity: 0; } }
.mdc-ripple-surface--test-edge-var-bug {
--mdc-ripple-surface-test-edge-var: 1px solid #000;
visibility: hidden; }
.mdc-ripple-surface--test-edge-var-bug::before {
border: var(--mdc-ripple-surface-test-edge-var); }
/**
* The css property used for elevation. In most cases this should not be changed. It is exposed
* as a variable for abstraction / easy use when needing to reference the property directly, for
* example in a `will-change` rule.
*/
/**
* The default duration value for elevation transitions.
*/
/**
* The default easing value for elevation transitions.
*/
/**
* Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
* The $z-value must be between 0 and 24.
* If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
* $opacity-boost.
*/
/**
* Returns a string that can be used as the value for a `transition` property for elevation.
* Calling this function directly is useful in situations where a component needs to transition
* more than one property.
*
* ```scss
* .foo {
* transition: mdc-elevation-transition-rule(), opacity 100ms ease;
* will-change: $mdc-elevation-property, opacity;
* }
* ```
*/
/**
* Applies the correct css rules needed to have an element transition between elevations.
* This mixin should be applied to elements whose elevation values will change depending on their
* context (e.g. when active or disabled).
*/
/* TODO(sgomes): Figure out what to do about desktop font sizes. */
/* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */
.mdc-button {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 2.25rem;
text-decoration: none;
text-transform: uppercase;
--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: transparent;
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 64px;
height: 36px;
padding: 0 16px;
border: none;
outline: none;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
overflow: hidden;
vertical-align: middle;
border-radius: 2px; }
.mdc-button::before, .mdc-button::after {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: "";
will-change: transform, opacity; }
.mdc-button::before {
-webkit-transition: opacity 15ms linear;
transition: opacity 15ms linear; }
.mdc-button.mdc-ripple-upgraded::after {
top: 0;
left: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: center center;
transform-origin: center center; }
.mdc-button.mdc-ripple-upgraded--unbounded::after {
top: var(--mdc-ripple-top, 0);
left: var(--mdc-ripple-left, 0); }
.mdc-button.mdc-ripple-upgraded--foreground-activation::after {
-webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;
animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; }
.mdc-button.mdc-ripple-upgraded--foreground-deactivation::after {
-webkit-animation: 150ms mdc-ripple-fg-opacity-out;
animation: 150ms mdc-ripple-fg-opacity-out;
-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::before, .mdc-button::after {
top: calc(50% - 100%);
left: calc(50% - 100%);
width: 200%;
height: 200%; }
.mdc-button.mdc-ripple-upgraded::before {
top: calc(50% - 100%);
left: calc(50% - 100%);
width: 200%;
height: 200%;
-webkit-transform: scale(var(--mdc-ripple-fg-scale, 0));
transform: scale(var(--mdc-ripple-fg-scale, 0)); }
.mdc-button.mdc-ripple-upgraded--unbounded::before {
top: var(--mdc-ripple-top, calc(50% - 50%));
left: var(--mdc-ripple-left, calc(50% - 50%));
width: var(--mdc-ripple-fg-size, 100%);
height: var(--mdc-ripple-fg-size, 100%);
-webkit-transform: scale(var(--mdc-ripple-fg-scale, 0));
transform: scale(var(--mdc-ripple-fg-scale, 0)); }
.mdc-button.mdc-ripple-upgraded::after {
width: var(--mdc-ripple-fg-size, 100%);
height: var(--mdc-ripple-fg-size, 100%); }
.mdc-button:active {
outline: none; }
.mdc-button:hover {
cursor: pointer; }
.mdc-button::-moz-focus-inner {
padding: 0;
border: 0; }
.mdc-button:disabled {
background-color: transparent;
/* @alternate */
color: rgba(0, 0, 0, 0.38);
color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
cursor: default;
pointer-events: none; }
.mdc-button--theme-dark .mdc-button:disabled,
.mdc-theme--dark .mdc-button:disabled {
/* @alternate */
color: rgba(255, 255, 255, 0.5);
color: var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5)); }
.mdc-button:not(:disabled) {
background-color: transparent; }
.mdc-button:not(:disabled) {
/* @alternate */
color: #3f51b5;
color: var(--mdc-theme-primary, #3f51b5); }
.mdc-button::before, .mdc-button::after {
/* @alternate */
background-color: #3f51b5; }
@supports not (-ms-ime-align: auto) {
.mdc-button::before, .mdc-button::after {
background-color: var(--mdc-theme-primary, #3f51b5); } }
.mdc-button:hover::before {
opacity: 0.04; }
.mdc-button:not(.mdc-ripple-upgraded):focus::before, .mdc-button.mdc-ripple-upgraded--background-focused::before {
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
opacity: 0.12; }
.mdc-button:not(.mdc-ripple-upgraded)::after {
-webkit-transition: opacity 150ms linear;
transition: opacity 150ms linear; }
.mdc-button:not(.mdc-ripple-upgraded):active::after {
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
opacity: 0.16; }
.mdc-button.mdc-ripple-upgraded {
--mdc-ripple-fg-opacity: 0.16; }
.mdc-button--raised:disabled,
.mdc-button--unelevated:disabled {
background-color: rgba(0, 0, 0, 0.12);
/* @alternate */
color: rgba(0, 0, 0, 0.38);
color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)); }
.mdc-button--theme-dark .mdc-button--raised:disabled,
.mdc-theme--dark .mdc-button--raised:disabled, .mdc-button--theme-dark
.mdc-button--unelevated:disabled,
.mdc-theme--dark
.mdc-button--unelevated:disabled {
background-color: rgba(255, 255, 255, 0.12);
/* @alternate */
color: rgba(0, 0, 0, 0.38);
color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)); }
.mdc-button--raised:not(:disabled),
.mdc-button--unelevated:not(:disabled) {
/* @alternate */
background-color: #3f51b5; }
@supports not (-ms-ime-align: auto) {
.mdc-button--raised:not(:disabled),
.mdc-button--unelevated:not(:disabled) {
background-color: var(--mdc-theme-primary, #3f51b5); } }
.mdc-button--raised:not(:disabled),
.mdc-button--unelevated:not(:disabled) {
/* @alternate */
color: white;
color: var(--mdc-theme-text-primary-on-primary, white); }
.mdc-button--raised::before, .mdc-button--raised::after,
.mdc-button--unelevated::before,
.mdc-button--unelevated::after {
/* @alternate */
background-color: white; }
@supports not (-ms-ime-align: auto) {
.mdc-button--raised::before, .mdc-button--raised::after,
.mdc-button--unelevated::before,
.mdc-button--unelevated::after {
background-color: var(--mdc-theme-text-primary-on-primary, white); } }
.mdc-button--raised:hover::before,
.mdc-button--unelevated:hover::before {
opacity: 0.08; }
.mdc-button--raised:not(.mdc-ripple-upgraded):focus::before, .mdc-button--raised.mdc-ripple-upgraded--background-focused::before,
.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus::before,
.mdc-button--unelevated.mdc-ripple-upgraded--background-focused::before {
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
opacity: 0.24; }
.mdc-button--raised:not(.mdc-ripple-upgraded)::after,
.mdc-button--unelevated:not(.mdc-ripple-upgraded)::after {
-webkit-transition: opacity 150ms linear;
transition: opacity 150ms linear; }
.mdc-button--raised:not(.mdc-ripple-upgraded):active::after,
.mdc-button--unelevated:not(.mdc-ripple-upgraded):active::after {
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
opacity: 0.32; }
.mdc-button--raised.mdc-ripple-upgraded,
.mdc-button--unelevated.mdc-ripple-upgraded {
--mdc-ripple-fg-opacity: 0.32; }
.mdc-button--raised {
-webkit-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);
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);
-webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: box-shadow; }
.mdc-button--raised:hover, .mdc-button--raised:focus {
-webkit-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);
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:active {
-webkit-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);
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 {
-webkit-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);
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--stroked {
border-style: solid;
padding-right: 14px;
padding-left: 14px;
border-width: 2px;
line-height: 32px; }
.mdc-button--stroked:disabled {
/* @alternate */
border-color: rgba(0, 0, 0, 0.38);
border-color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)); }
.mdc-button--theme-dark .mdc-button--stroked:disabled,
.mdc-theme--dark .mdc-button--stroked:disabled {
/* @alternate */
border-color: rgba(255, 255, 255, 0.5);
border-color: var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5)); }
.mdc-button--stroked.mdc-button--dense {
line-height: 27px; }
.mdc-button--stroked.mdc-button--compact {
padding-right: 6px;
padding-left: 6px; }
.mdc-button--stroked:not(:disabled) {
/* @alternate */
border-color: #3f51b5;
border-color: var(--mdc-theme-primary, #3f51b5); }
.mdc-button--compact {
padding: 0 8px; }
.mdc-button--dense {
height: 32px;
font-size: .8125rem;
line-height: 32px; }
.mdc-button__icon {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
font-size: 18px;
line-height: inherit;
vertical-align: top; }
/**
* The css property used for elevation. In most cases this should not be changed. It is exposed
* as a variable for abstraction / easy use when needing to reference the property directly, for
* example in a `will-change` rule.
*/
/**
* The default duration value for elevation transitions.
*/
/**
* The default easing value for elevation transitions.
*/
/**
* Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
* The $z-value must be between 0 and 24.
* If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
* $opacity-boost.
*/
/**
* Returns a string that can be used as the value for a `transition` property for elevation.
* Calling this function directly is useful in situations where a component needs to transition
* more than one property.
*
* ```scss
* .foo {
* transition: mdc-elevation-transition-rule(), opacity 100ms ease;
* will-change: $mdc-elevation-property, opacity;
* }
* ```
*/
/**
* Applies the correct css rules needed to have an element transition between elevations.
* This mixin should be applied to elements whose elevation values will change depending on their
* context (e.g. when active or disabled).
*/
/* TODO(sgomes): Figure out what to do about desktop font sizes. */
/* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */
/**
* Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
*
* Usage Example:
* ```scss
* .mdc-foo {
* position: absolute;
* left: 0;
*
* @include mdc-rtl {
* left: auto;
* right: 0;
* }
*
* &__bar {
* margin-left: 4px;
* @include mdc-rtl(".mdc-foo") {
* margin-left: auto;
* margin-right: 4px;
* }
* }
* }
*
* .mdc-foo--mod {
* padding-left: 4px;
*
* @include mdc-rtl {
* padding-left: auto;
* padding-right: 4px;
* }
* }
* ```
*
* Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
* in most cases, it will in some cases lead to false negatives, e.g.
*
* ```html
* <html dir="rtl">
* <!-- ... -->
* <div dir="ltr">
* <div class="mdc-foo">Styled incorrectly as RTL!</div>
* </div>
* </html>
* ```
*
* In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
*/
/**
* Takes a base box-model property - e.g. margin / border / padding - along with a default
* direction and value, and emits rules which apply the value to the
* "<base-property>-<default-direction>" property by default, but flips the direction
* when within an RTL context.
*
* For example:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-box(margin, left, 8px);
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* margin-left: 8px;
*
* @include mdc-rtl {
* margin-right: 8px;
* margin-left: 0;
* }
* }
* ```
* whereas:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-box(margin, right, 8px);
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* margin-right: 8px;
*
* @include mdc-rtl {
* margin-right: 0;
* margin-left: 8px;
* }
* }
* ```
*
* You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
* e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
*
* Note that this function will always zero out the original value in an RTL context. If you're
* trying to flip the values, use mdc-rtl-reflexive-property().
*/
/**
* Takes a base property and emits rules that assign <base-property>-left to <left-value> and
* <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
* For example:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-property(margin, auto, 12px);
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* margin-left: auto;
* margin-right: 12px;
*
* @include mdc-rtl {
* margin-left: 12px;
* margin-right: auto;
* }
* }
* ```
*
* A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
*/
/**
* Takes an argument specifying a horizontal position property (either "left" or "right") as well
* as a value, and applies that value to the specified position in a LTR context, and flips it in a
* RTL context. For example:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-position(left, 0);
* position: absolute;
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* position: absolute;
* left: 0;
* right: initial;
*
* @include mdc-rtl {
* right: 0;
* left: initial;
* }
* }
* ```
* An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
*/
.mdc-card {
-webkit-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);
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);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
border-radius: 2px;
overflow: hidden; }
.mdc-card__primary {
padding: 16px; }
.mdc-card__primary .mdc-card__title--large {
padding-top: 8px; }
.mdc-card__primary:last-child {
padding-bottom: 24px; }
.mdc-card__supporting-text {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.25rem;
text-decoration: inherit;
text-transform: inherit;
/* @alternate */
color: rgba(0, 0, 0, 0.87);
color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87));
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 8px 16px; }
.mdc-card--theme-dark .mdc-card__supporting-text,
.mdc-theme--dark .mdc-card__supporting-text {
/* @alternate */
color: white;
color: var(--mdc-theme-text-primary-on-dark, white); }
.mdc-card__primary + .mdc-card__supporting-text {
margin-top: -8px;
padding-top: 0; }
.mdc-card__supporting-text:last-child {
padding-bottom: 24px; }
.mdc-card__actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 8px; }
.mdc-card--theme-dark .mdc-card__actions,
.mdc-theme--dark .mdc-card__actions {
/* @alternate */
color: white;
color: var(--mdc-theme-text-primary-on-dark, white); }
.mdc-card__actions .mdc-card__action {
margin: 0 8px 0 0; }
[dir="rtl"] .mdc-card__actions .mdc-card__action, .mdc-card__actions .mdc-card__action[dir="rtl"] {
margin: 0 0 0 8px; }
.mdc-card__actions .mdc-card__action:last-child {
margin-left: 0;
margin-right: 0; }
[dir="rtl"] .mdc-card__actions .mdc-card__action:last-child, .mdc-card__actions .mdc-card__action:last-child[dir="rtl"] {
margin-left: 0;
margin-right: 0; }
.mdc-card__actions--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; }
.mdc-card__actions--vertical .mdc-card__action {
margin: 0 0 4px; }
.mdc-card__actions--vertical .mdc-card__action:last-child {
margin-bottom: 0; }
.mdc-card__media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 16px; }
.mdc-card__media-item {
display: inline-block;
width: auto;
height: 80px;
margin: 16px 0 0;
padding: 0; }
.mdc-card__media-item--1dot5x {
width: auto;
height: 120px; }
.mdc-card__media-item--2x {
width: auto;
height: 160px; }
.mdc-card__media-item--3x {
width: auto;
height: 240px; }
.mdc-card__title {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.5rem;
text-decoration: inherit;
text-transform: inherit;
/* @alternate */
color: rgba(0, 0, 0, 0.87);
color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87));
margin: -.063rem 0; }
.mdc-card--theme-dark .mdc-card__title,
.mdc-theme--dark .mdc-card__title {
/* @alternate */
color: white;
color: var(--mdc-theme-text-primary-on-dark, white); }
.mdc-card__title--large {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: normal;
line-height: 2rem;
text-decoration: inherit;
text-transform: inherit;
margin: 0; }
.mdc-card__subtitle {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.25rem;
text-decoration: inherit;
text-transform: inherit;
/* @alternate */
color: rgba(0, 0, 0, 0.87);
color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87));
margin: -.063rem 0; }
.mdc-card--theme-dark .mdc-card__subtitle,
.mdc-theme--dark .mdc-card__subtitle {
/* @alternate */
color: white;
color: var(--mdc-theme-text-primary-on-dark, white); }
.mdc-card__horizontal-block {
padding-left: 0;
padding-right: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
[dir="rtl"] .mdc-card__horizontal-block, .mdc-card__horizontal-block[dir="rtl"] {
padding-left: 16px;
padding-right: 0; }
.mdc-card__horizontal-block .mdc-card__actions--vertical {
margin: 16px; }
.mdc-card__horizontal-block .mdc-card__media-item {
margin-left: 16px;
margin-right: 0; }
[dir="rtl"] .mdc-card__horizontal-block .mdc-card__media-item, .mdc-card__horizontal-block .mdc-card__media-item[dir="rtl"] {
margin-left: 0;
margin-right: 16px; }
.mdc-card__horizontal-block .mdc-card__media-item--3x {
margin-bottom: 16px; }
/**
* Creates a rule that will be applied when an MDC-Web component is within the context of an RTL layout.
*
* Usage Example:
* ```scss
* .mdc-foo {
* position: absolute;
* left: 0;
*
* @include mdc-rtl {
* left: auto;
* right: 0;
* }
*
* &__bar {
* margin-left: 4px;
* @include mdc-rtl(".mdc-foo") {
* margin-left: auto;
* margin-right: 4px;
* }
* }
* }
*
* .mdc-foo--mod {
* padding-left: 4px;
*
* @include mdc-rtl {
* padding-left: auto;
* padding-right: 4px;
* }
* }
* ```
*
* Note that this works by checking for [dir="rtl"] on an ancestor element. While this will work
* in most cases, it will in some cases lead to false negatives, e.g.
*
* ```html
* <html dir="rtl">
* <!-- ... -->
* <div dir="ltr">
* <div class="mdc-foo">Styled incorrectly as RTL!</div>
* </div>
* </html>
* ```
*
* In the future, selectors such as :dir (http://mdn.io/:dir) will help us mitigate this.
*/
/**
* Takes a base box-model property - e.g. margin / border / padding - along with a default
* direction and value, and emits rules which apply the value to the
* "<base-property>-<default-direction>" property by default, but flips the direction
* when within an RTL context.
*
* For example:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-box(margin, left, 8px);
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* margin-left: 8px;
*
* @include mdc-rtl {
* margin-right: 8px;
* margin-left: 0;
* }
* }
* ```
* whereas:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-box(margin, right, 8px);
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* margin-right: 8px;
*
* @include mdc-rtl {
* margin-right: 0;
* margin-left: 8px;
* }
* }
* ```
*
* You can also pass a 4th optional $root-selector argument which will be forwarded to `mdc-rtl`,
* e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, ".mdc-component")`.
*
* Note that this function will always zero out the original value in an RTL context. If you're
* trying to flip the values, use mdc-rtl-reflexive-property().
*/
/**
* Takes a base property and emits rules that assign <base-property>-left to <left-value> and
* <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.
* For example:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-property(margin, auto, 12px);
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* margin-left: auto;
* margin-right: 12px;
*
* @include mdc-rtl {
* margin-left: 12px;
* margin-right: auto;
* }
* }
* ```
*
* A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
*/
/**
* Takes an argument specifying a horizontal position property (either "left" or "right") as well
* as a value, and applies that value to the specified position in a LTR context, and flips it in a
* RTL context. For example:
*
* ```scss
* .mdc-foo {
* @include mdc-rtl-reflexive-position(left, 0);
* position: absolute;
* }
* ```
* is equivalent to:
*
* ```scss
* .mdc-foo {
* position: absolute;
* left: 0;
* right: initial;
*
* @include mdc-rtl {
* right: 0;
* left: initial;
* }
* }
* ```
* An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
*/
@-webkit-keyframes mdc-checkbox-unchecked-checked-checkmark-path {
0%,
50% {
stroke-dashoffset: 29.78334; }
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.78334; }
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.78334; } }
@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.78334; } }
@-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-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; } }
@-webkit-keyframes mdc-checkbox-indeterminate-checked-checkmark {
from {
-webkit-animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0; }
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 1; } }
@keyframes mdc-checkbox-indeterminate-checked-checkmark {
from {
-webkit-animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0; }
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 1; } }
@-webkit-keyframes mdc-checkbox-checked-indeterminate-mixedmark {
from {
-webkit-animation-timing-function: mdc-animation-deceleration-curve-timing-function;
animation-timing-function: mdc-animation-deceleration-curve-timing-function;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0; }
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1; } }
@keyframes mdc-checkbox-checked-indeterminate-mixedmark {
from {
-webkit-animation-timing-function: mdc-animation-deceleration-curve-timing-function;
animation-timing-function: mdc-animation-deceleration-curve-timing-function;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 0; }
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1; } }
@-webkit-keyframes mdc-checkbox-indeterminate-checked-mixedmark {
from {
-webkit-animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1; }
to {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
opacity: 0; } }
@keyframes mdc-checkbox-indeterminate-checked-mixedmark {
from {
-webkit-animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1; }
to {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
opacity: 0; } }
@-webkit-keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {
0% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: 1; }
32.8%,
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
opacity: 0; } }
@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {
0% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: 1; }
32.8%,
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
opacity: 0; } }
.mdc-checkbox {
display: inline-block;
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 18px;
flex: 0 0 18px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
width: 18px;
height: 18px;
padding: 11px;
line-height: 0;
white-space: nowrap;
cursor: pointer;
vertical-align: bottom;
--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: transparent; }
.mdc-checkbox .mdc-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
border-color: rgba(0, 0, 0, 0.26); }
.mdc-checkbox .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
.mdc-checkbox .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background {
border-color: transparent;
background-color: rgba(0, 0, 0, 0.26); }
.mdc-checkbox--theme-dark .mdc-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox .mdc-checkbox__native-control:disabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
border-color: rgba(255, 255, 255, 0.3); }
.mdc-checkbox--theme-dark .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
.mdc-checkbox--theme-dark .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background {
background-color: rgba(255, 255, 255, 0.3); }
.mdc-checkbox .mdc-checkbox__checkmark__path {
stroke: white !important; }
.mdc-checkbox .mdc-checkbox__mixedmark {
background-color: white; }
.mdc-checkbox .mdc-checkbox__background::before {
/* @alternate */
background-color: #ff4081; }
@supports not (-ms-ime-align: auto) {
.mdc-checkbox .mdc-checkbox__background::before {
background-color: var(--mdc-theme-secondary, #ff4081); } }
.mdc-checkbox::before, .mdc-checkbox::after {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: "";
will-change: transform, opacity; }
.mdc-checkbox::before {
-webkit-transition: opacity 15ms linear;
transition: opacity 15ms linear; }
.mdc-checkbox.mdc-ripple-upgraded::after {
top: 0;
left: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: center center;
transform-origin: center center; }
.mdc-checkbox.mdc-ripple-upgraded--unbounded::after {
top: var(--mdc-ripple-top, 0);
left: var(--mdc-ripple-left, 0); }
.mdc-checkbox.mdc-ripple-upgraded--foreground-activation::after {
-webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;
animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; }
.mdc-checkbox.mdc-ripple-upgraded--foreground-deactivation::after {
-webkit-animation: 150ms mdc-ripple-fg-opacity-out;
animation: 150ms mdc-ripple-fg-opacity-out;
-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-checkbox::before, .mdc-checkbox::after {
/* @alternate */
background-color: #ff4081; }
@supports not (-ms-ime-align: auto) {
.mdc-checkbox::before, .mdc-checkbox::after {
background-color: var(--mdc-theme-secondary, #ff4081); } }
.mdc-checkbox:hover::before {
opacity: 0.04; }
.mdc-checkbox:not(.mdc-ripple-upgraded):focus::before, .mdc-checkbox.mdc-ripple-upgraded--background-focused::before {
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
opacity: 0.12; }
.mdc-checkbox:not(.mdc-ripple-upgraded)::after {
-webkit-transition: opacity 150ms linear;
transition: opacity 150ms linear; }
.mdc-checkbox:not(.mdc-ripple-upgraded):active::after {
-webkit-transition-duration: 75ms;
transition-duration: 75ms;
opacity: 0.16; }
.mdc-checkbox.mdc-ripple-upgraded {
--mdc-ripple-fg-opacity: 0.16; }
.mdc-checkbox::before, .mdc-checkbox::after {
top: calc(50% - 50%);
left: calc(50% - 50%);
width: 100%;
height: 100%; }
.mdc-checkbox.mdc-ripple-upgraded::before {
top: calc(50% - 50%);
left: calc(50% - 50%);
width: 100%;
height: 100%;
-webkit-transform: scale(var(--mdc-ripple-fg-scale, 0));
transform: scale(var(--mdc-ripple-fg-scale, 0)); }
.mdc-checkbox.mdc-ripple-upgraded--unbounded::before {
top: var(--mdc-ripple-top, calc(50% - 25%));
left: var(--mdc-ripple-left, calc(50% - 25%));
width: var(--mdc-ripple-fg-size, 50%);
height: var(--mdc-ripple-fg-size, 50%);
-webkit-transform: scale(var(--mdc-ripple-fg-scale, 0));
transform: scale(var(--mdc-ripple-fg-scale, 0)); }
.mdc-checkbox.mdc-ripple-upgraded::after {
width: var(--mdc-ripple-fg-size, 50%);
height: var(--mdc-ripple-fg-size, 50%); }
.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
border-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 {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); }
@-webkit-keyframes mdc-checkbox-fade-in-background-0 {
0% {
border-color: rgba(0, 0, 0, 0.54);
background-color: transparent; }
50% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); } }
@keyframes mdc-checkbox-fade-in-background-0 {
0% {
border-color: rgba(0, 0, 0, 0.54);
background-color: transparent; }
50% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); } }
@-webkit-keyframes mdc-checkbox-fade-out-background-0 {
0%,
80% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); }
100% {
border-color: rgba(0, 0, 0, 0.54);
background-color: transparent; } }
@keyframes mdc-checkbox-fade-out-background-0 {
0%,
80% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); }
100% {
border-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-0;
animation-name: mdc-checkbox-fade-in-background-0; }
.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-0;
animation-name: mdc-checkbox-fade-out-background-0; }
.mdc-checkbox--theme-dark .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
border-color: white;
background-color: transparent; }
.mdc-checkbox--theme-dark .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
.mdc-checkbox--theme-dark .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); }
@-webkit-keyframes mdc-checkbox-fade-in-background-1 {
0% {
border-color: white;
background-color: transparent; }
50% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); } }
@keyframes mdc-checkbox-fade-in-background-1 {
0% {
border-color: white;
background-color: transparent; }
50% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); } }
@-webkit-keyframes mdc-checkbox-fade-out-background-1 {
0%,
80% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); }
100% {
border-color: white;
background-color: transparent; } }
@keyframes mdc-checkbox-fade-out-background-1 {
0%,
80% {
/* @alternate */
border-color: #ff4081;
border-color: var(--mdc-theme-secondary, #ff4081);
/* @alternate */
background-color: #ff4081;
background-color: var(--mdc-theme-secondary, #ff4081); }
100% {
border-color: white;
background-color: transparent; } }
.mdc-checkbox--theme-dark.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--theme-dark.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-webkit-animation-name: mdc-checkbox-fade-in-background-1;
animation-name: mdc-checkbox-fade-in-background-1; }
.mdc-checkbox--theme-dark.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--theme-dark.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
.mdc-theme--dark .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-webkit-animation-name: mdc-checkbox-fade-out-background-1;
animation-name: mdc-checkbox-fade-out-background-1; }
.mdc-checkbox--disabled {
cursor: default;
pointer-events: none; }
.mdc-checkbox--upgraded .mdc-checkbox__background,
.mdc-checkbox--upgraded .mdc-checkbox__checkmark,
.mdc-checkbox--upgraded .mdc-checkbox__checkmark__path,
.mdc-checkbox--upgraded .mdc-checkbox__mixedmark {
-webkit-transition: none !important;
transition: none !important; }
.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background, .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background, .mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background, .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background {
-webkit-animation-duration: 180ms;
animation-duration: 180ms;
-webkit-animation-timing-function: linear;
animation-timing-function: linear; }
.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark__path {
-webkit-animation: 180ms linear 0s mdc-checkbox-unchecked-checked-checkmark-path;
animation: 180ms linear 0s mdc-checkbox-unchecked-checked-checkmark-path;
-webkit-transition: none;
transition: none; }
.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark {
-webkit-animation: 90ms linear 0s mdc-checkbox-unchecked-indeterminate-mixedmark;
animation: 90ms linear 0s mdc-checkbox-unchecked-indeterminate-mixedmark;
-webkit-transition: none;
transition: none; }
.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark__path {
-webkit-animation: 90ms linear 0s mdc-checkbox-checked-unchecked-checkmark-path;
animation: 90ms linear 0s mdc-checkbox-checked-unchecked-checkmark-path;
-webkit-transition: none;
transition: none; }
.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark {
-webkit-animation: 90ms linear 0s mdc-checkbox-checked-indeterminate-checkmark;
animation: 90ms linear 0s mdc-checkbox-checked-indeterminate-checkmark;
-webkit-transition: none;
transition: none; }
.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark {
-webkit-animation: 90ms linear 0s mdc-checkbox-checked-indeterminate-mixedmark;
animation: 90ms linear 0s mdc-checkbox-checked-indeterminate-mixedmark;
-webkit-transition: none;
transition: none; }
.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark {
-webkit-animation: 500ms linear 0s mdc-checkbox-indeterminate-checked-checkmark;
animation: 500ms linear 0s mdc-checkbox-indeterminate-checked-checkmark;
-webkit-transition: none;
transition: none; }
.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark {
-webkit-animation: 500ms linear 0s mdc-checkbox-indeterminate-checked-mixedmark;
animation: 500ms linear 0s mdc-checkbox-indeterminate-checked-mixedmark;
-webkit-transition: none;
transition: none; }
.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark {
-webkit-animation: 300ms linear 0s mdc-checkbox-indeterminate-unchecked-mixedmark;
animation: 300ms linear 0s mdc-checkbox-indeterminate-unchecked-mixedmark;
-webkit-transition: none;
transition: none; }
.mdc-checkbox__background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
left: 1