// // Copyright 2017 Google Inc. All Rights Reserved. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. // @import "@material/animation/functions"; @import "@material/elevation/mixins"; @import "@material/rtl/mixins"; @import "@material/theme/mixins"; @import "@material/typography/mixins"; @import "@material/typography/variables"; $mdc-dialog-dark-theme-bg-color: #303030 !default; :root { --mdc-dialog-dark-theme-bg-color: #{$mdc-dialog-dark-theme-bg-color}; } // postcss-bem-linter: define dialog .mdc-dialog { display: flex; position: fixed; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100%; visibility: hidden; z-index: 5; &__backdrop { @include mdc-theme-prop(background-color, text-primary-on-light); position: fixed; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: 0; z-index: -1; } &__surface { @include mdc-elevation(24); @include mdc-theme-prop(background-color, background); display: inline-flex; flex-direction: column; width: calc(100% - 30px); min-width: 640px; max-width: 865px; transform: translateY(150px) scale(.8); border-radius: 2px; opacity: 0; @include mdc-theme-dark(".mdc-dialog") { @include mdc-theme-prop(color, text-primary-on-dark); background-color: $mdc-dialog-dark-theme-bg-color; background-color: var(--mdc-dialog-dark-theme-bg-color, #{$mdc-dialog-dark-theme-bg-color}); } @include mdc-rtl(".mdc-dialog") { text-align: right; } } &__header { display: flex; align-items: center; padding: 24px 24px 0; &__empty { padding: 0; } @include mdc-rtl(".mdc-dialog") { text-align: right; } &__title { @include mdc-typography(title); flex: 1; margin: 0; } } &__body { @include mdc-theme-prop(color, text-secondary-on-light); @include mdc-typography(body1); margin-top: 20px; padding: 0 24px 24px; @include mdc-theme-dark(".mdc-dialog", true) { @include mdc-theme-prop(color, text-secondary-on-dark); } &--scrollable { max-height: 195px; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); overflow-x: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; } } &__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 8px; &__button { @include mdc-rtl-reflexive-box(margin, right, 8px); &:last-child { @include mdc-rtl-reflexive-box(margin, right, 0); } } } &__action { @include mdc-theme-prop(color, secondary); } // TODO: Replace with breakpoint variable @media (max-width: 640px) { min-width: 280px; &__surface { min-width: 280px; } &__body { line-height: 24px; } } &--animating { visibility: visible; .mdc-dialog__backdrop { transition: mdc-animation-enter(opacity, 120ms); } .mdc-dialog--open .mdc-dialog__surface { transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms); } .mdc-dialog__surface { transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms); } } &--open { visibility: visible; .mdc-dialog__backdrop { opacity: .3; } .mdc-dialog__surface { transform: translateY(0) scale(1); opacity: 1; } } } // postcss-bem-linter: end .mdc-dialog-scroll-lock { height: 100vh; overflow: hidden; }