/*! Material Components for the web Copyright (c) 2017 Google Inc. License: Apache-2.0 */ /** * 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. */ /** * 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). */ /** * 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 * * *
*
Styled incorrectly as RTL!
*
* * ``` * * 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 * "-" 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 -left to and * -right to 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`. */ /* TODO(sgomes): Figure out what to do about desktop font sizes. */ /* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */ /* TODO(sgomes): Figure out what to do about desktop font sizes. */ /* TODO(sgomes): Figure out what to do about i18n and i18n font sizes. */ :root { --mdc-dialog-dark-theme-bg-color: #303030; } .mdc-dialog { display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; top: 0; left: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; visibility: hidden; z-index: 5; } .mdc-dialog__backdrop { /* @alternate */ background-color: rgba(0, 0, 0, 0.87); background-color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)); position: fixed; top: 0; left: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; opacity: 0; z-index: -1; } .mdc-dialog__surface { -webkit-box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); /* @alternate */ background-color: #fff; background-color: var(--mdc-theme-background, #fff); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: calc(100% - 30px); min-width: 640px; max-width: 865px; -webkit-transform: translateY(150px) scale(0.8); transform: translateY(150px) scale(0.8); border-radius: 2px; opacity: 0; } .mdc-dialog--theme-dark .mdc-dialog__surface, .mdc-theme--dark .mdc-dialog__surface { /* @alternate */ color: white; color: var(--mdc-theme-text-primary-on-dark, white); background-color: #303030; background-color: var(--mdc-dialog-dark-theme-bg-color, #303030); } [dir="rtl"] .mdc-dialog .mdc-dialog__surface, .mdc-dialog[dir="rtl"] .mdc-dialog__surface { text-align: right; } .mdc-dialog__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px 24px 0; } .mdc-dialog__header__empty { padding: 0; } [dir="rtl"] .mdc-dialog .mdc-dialog__header, .mdc-dialog[dir="rtl"] .mdc-dialog__header { text-align: right; } .mdc-dialog__header__title { font-family: Roboto, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.02em; line-height: 2rem; text-decoration: inherit; text-transform: inherit; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; } .mdc-dialog__body { /* @alternate */ color: rgba(0, 0, 0, 0.54); color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, 0.54)); 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; margin-top: 20px; padding: 0 24px 24px; } .mdc-dialog--theme-dark.mdc-dialog__body, .mdc-theme--dark .mdc-dialog__body { /* @alternate */ color: rgba(255, 255, 255, 0.7); color: var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7)); } .mdc-dialog__body--scrollable { max-height: 195px; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); overflow-x: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .mdc-dialog__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 8px; } .mdc-dialog__footer__button { margin-left: 0; margin-right: 8px; } [dir="rtl"] .mdc-dialog__footer__button, .mdc-dialog__footer__button[dir="rtl"] { margin-left: 8px; margin-right: 0; } .mdc-dialog__footer__button:last-child { margin-left: 0; margin-right: 0; } [dir="rtl"] .mdc-dialog__footer__button:last-child, .mdc-dialog__footer__button:last-child[dir="rtl"] { margin-left: 0; margin-right: 0; } .mdc-dialog__action { /* @alternate */ color: #ff4081; color: var(--mdc-theme-secondary, #ff4081); } @media (max-width: 640px) { .mdc-dialog { min-width: 280px; } .mdc-dialog__surface { min-width: 280px; } .mdc-dialog__body { line-height: 24px; } } .mdc-dialog--animating { visibility: visible; } .mdc-dialog--animating .mdc-dialog__backdrop { -webkit-transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1); } .mdc-dialog--animating .mdc-dialog--open .mdc-dialog__surface { -webkit-transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); } .mdc-dialog--animating .mdc-dialog__surface { -webkit-transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); transition: opacity 120ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 120ms 0ms cubic-bezier(0, 0, 0.2, 1); } .mdc-dialog--open { visibility: visible; } .mdc-dialog--open .mdc-dialog__backdrop { opacity: .3; } .mdc-dialog--open .mdc-dialog__surface { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); opacity: 1; } .mdc-dialog-scroll-lock { height: 100vh; overflow: hidden; }