/** * Copyright 2016 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 "../mixins"; .mdc-temporary-drawer { @include mdc-drawer-base_; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; box-sizing: border-box; contain: strict; z-index: 3; /* Shaded background */ &::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); content: ""; opacity: 0; opacity: var(--mdc-temporary-drawer-opacity, 0); will-change: opacity; box-sizing: border-box; } &__drawer { @include mdc-theme-prop(background, background); @include mdc-elevation(16); @include mdc-rtl-reflexive-position(left, 0); @include mdc-theme-dark(".mdc-temporary-drawer") { background: #303030; @include mdc-theme-prop(color, text-primary-on-dark); } display: flex; position: absolute; flex-direction: column; width: calc(100% - 56px); max-width: 280px; height: 100%; transform: translateX(calc(-100% - 20px)); will-change: transform; box-sizing: border-box; overflow: hidden; touch-action: none; @include mdc-rtl(".mdc-temporary-drawer") { transform: translateX(calc(100% + 20px)); } /* TODO(sgomes): replace with global breakpoints when we have them */ @media (min-width: 600px) { width: calc(100% - 64px); max-width: 320px; } } &__content { flex-grow: 1; margin: 0; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; touch-action: pan-y; } &__footer { @include mdc-elevation(2); flex-shrink: 0; } &--animating { &::before { transition: mdc-animation-enter(opacity, .3s); } &.mdc-temporary-drawer--open .mdc-temporary-drawer__drawer { transition: mdc-animation-enter(transform, .33s); } .mdc-temporary-drawer__drawer { transition: mdc-animation-enter(transform, .13s); } } &--open { pointer-events: auto; &::before { opacity: 1; opacity: var(--mdc-temporary-drawer-opacity, 1); } .mdc-temporary-drawer__drawer { transform: none; } // Specificity fix to ensure that mdc-drawer is not translated off-screen within an RTL context @include mdc-rtl { .mdc-temporary-drawer__drawer { transform: none; } } } }