@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/layout/_spec.scss

@@ -0,0 +1,916 @@
+/*
+ * https://material.io/design/components/navigation-drawer.html
+ * https://material.io/archive/guidelines/patterns/navigation-drawer.html
+ * https://material.io/archive/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+ *
+ * Elements follow descending elevation order and use sibling selector (~)
+ * Body scrolls except when clipped on desktop (content scrolls instead)
+ *
+ * html.mdw-layout
+ *   body.mdw-layout__body       Sets layout rules
+ *     nav.mdw-layout__navdrawer Visible by default on Desktop. Hidden modal on Mobile
+ *     div.mdw-layout__sidesheet Visible by default on Desktop. Hidden modal on Mobile
+ *     div.mdw-layout__scrim     Visible if modal open. Must follow navdrawer and sidedrawer (~)
+ *     div.mdw-layout__appbar    Should follow navdrawer and sidedrawer (~)
+ *     div.mdw-layout__fab       Must follow appbar (~)
+ *     div.mdw-layout__snackbar  Must follow fab (~)
+ *     main.mdw-layout__content  Must follow fab (~)
+ */
+
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_type.scss' as type;
+
+@use './_mixins.scss' as *;
+
+:root {
+  --mdw-layout__transform-inline: translateX(100%);
+  --mdw-layout__transform-inline-reverse: translateX(-100%);
+  --mdw-layout__fab-transform: translateX(0);
+  --mdw-layout__sheet-max-inline-size: calc(100vw - 56px);
+  --mdw-layout__margin: 24px;
+  @include breakpoint.has16DPMargin() {
+    --mdw-layout__margin: 16px;
+  }
+
+  @include breakpoint.isXSmallWindow() {
+    --mdw-layout__sheet-max-inline-size: calc(100vw - 64px);
+  }
+
+  &[dir="rtl"] {
+    --mdw-layout__transform-inline: translateX(-100%);
+    --mdw-layout__transform-inline-reverse: translateX(100%);
+    --mdw-layout__fab-transform: translateX(100%);
+  }
+}
+
+$scrimColor: rgba(0, 0, 0, 0.50) !default;
+$sheetMinWidth: 256px !default;
+$sheetMaxWidthMini: 72px !default;
+
+$fabSize: 56px !default;
+$fabCutSize: 72px !default;
+$fabCutDelay: 100ms !default;
+
+$rowTop: 1 !default;
+$rowBanner: 2 !default;
+$rowContent: 3 !default;
+$rowBottom: 4 !default;
+
+$columnNavDrawer: 1 !default;
+$columnContent: 2 !default;
+$columnSideDrawer: 3 !default;
+$columnViewportEnd: 4 !default;
+
+.mdw-layout {
+  overflow-y: hidden;
+
+  min-block-size: 100%;
+  block-size: 100%;
+  inline-size: 100vw;
+  margin: 0;
+  padding: 0;
+
+  // TODO: Move fonts out of app-layout
+  // Prefer iOS Dynamic Type for accessibility support
+  font: -apple-system-body;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.mdw-layout__body {
+  @include type.addRules('body');
+
+  --mdw-grid__row1: "navdrawer appbar  sidedrawer";
+  --mdw-grid__row2: "navdrawer banner  sidedrawer";
+  --mdw-grid__row3: "navdrawer content sidedrawer";
+  --mdw-grid__row4: "navdrawer bottom  sidedrawer";
+
+  display: grid;
+  position: relative;
+  grid-template-areas:
+    var(--mdw-grid__row1)
+    var(--mdw-grid__row2)
+    var(--mdw-grid__row3)
+    var(--mdw-grid__row4);
+
+  // Use minmax everywhere to solve Chrome v80 grid bugs
+  grid-template-columns:
+    [start] minmax(0, auto)
+    [center] minmax(0, 100%)
+    [end] minmax(0, auto);
+
+  grid-template-rows:
+    [top] auto
+    [banner] auto
+    [content] minmax(auto, 1fr) /* Use minmax(0, 1fr) to clamp horizontally oversized grid-items */
+    [bottom] auto;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  block-size: 100%;
+  max-inline-size: 100vw;
+  inline-size: 100vw;
+  margin: 0;
+  padding: 0;
+
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
+
+  background-color: inherit;
+
+  &[mdw-navdrawer-style~="clipped"] {
+    --mdw-grid__row1: "appbar appbar sidedrawer";
+  }
+
+  &[mdw-sidedrawer-style~="clipped"] {
+    --mdw-grid__row1: "navdrawer appbar appbar";
+  }
+
+  &[mdw-navdrawer-style~="clipped"][mdw-sidedrawer-style~="clipped"] {
+    --mdw-grid__row1: "appbar appbar appbar";
+  }
+
+  &[mdw-navdrawer-style~="floating"] {
+    --mdw-grid__row2: "banner banner sidedrawer";
+  }
+
+  &[mdw-sidedrawer-style~="floating"] {
+    --mdw-grid__row2: "navdrawer banner banner";
+  }
+
+  &[mdw-navdrawer-style~="floating"][mdw-sidedrawer-style~="floating"] {
+    --mdw-grid__row2: "banner banner banner";
+  }
+}
+
+.mdw-layout__appbar {
+  position: sticky;
+  inset-block-start: 0;
+  grid-area: appbar;
+
+  margin-block-start: 0;
+
+  transition-duration: motion.$expandDuration;
+  transition-property: transform, margin-block-start, min-block-size;
+  transition-timing-function: motion.$decelerateEasing;
+  will-change: transform, margin-block-start, min-block-size;
+
+  transform: translateY(0); // browser hint
+  z-index: 4;
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+
+  &[mdw-hide] {
+    transition-duration: motion.$collapseDuration;
+    transition-timing-function: motion.$accelerateEasing;
+  }
+}
+
+.mdw-layout__scrim {
+  content: '';
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  // Scroll mask
+  overflow-y: scroll;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  cursor: auto;
+  outline: none;
+
+  pointer-events: none;
+  -webkit-tap-highlight-color: transparent;
+
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: background-color, visibility;
+  transition-timing-function: motion.$accelerateEasing;
+
+  visibility: hidden;
+  z-index: 16;
+
+  background-color: transparent;
+
+  // Hide scrollbar
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: '';
+
+    display: block;
+
+    block-size: 200%;
+    inline-size: 200%;
+  }
+}
+
+.mdw-layout__navdrawer,
+.mdw-layout__sidesheet {
+  box-sizing: border-box;
+  max-block-size: 100vh;
+  block-size: 100%;
+  max-inline-size: var(--mdw-layout__sheet-max-inline-size);
+  inline-size: $sheetMinWidth;
+
+  transition-duration: motion.$expandDuration;
+  transition-property: block-size, max-block-size, transform;
+  transition-timing-function: motion.$decelerateEasing;
+
+  will-change: max-width, transform, position;
+
+  transform: translateX(0);
+  z-index: 5; // Above appbar shadow
+
+  background-color: inherit;
+  box-shadow: elevation.boxShadow(0);
+}
+
+.mdw-layout__sheet-content {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  box-sizing: border-box;
+  max-block-size: 100%;
+  block-size: 100%;
+  border-width: 1px;
+}
+
+.mdw-layout__navdrawer {
+  grid-area: navdrawer;
+
+  .mdw-layout__sheet-content {
+    border-inline-start-style: none;
+    border-inline-end-style: solid;
+  }
+
+  .mdw-list__content.mdw-overlay {
+    &::before,
+    & > .mdw-ripple__container {
+      margin: 4px 8px;
+
+      border-radius: 4px;
+    }
+  }
+}
+
+.mdw-layout__sidesheet {
+  grid-area: sidedrawer;
+
+  .mdw-layout__sheet-content {
+    border-inline-start-style: solid;
+    border-inline-end-style: none;
+  }
+}
+
+.mdw-layout[mdw-ios][mdw-standalone] {
+  .mdw-layout__appbar,
+  .mdw-layout__navdrawer,
+  .mdw-layout__sidesheet {
+    padding-block-start: 20px;
+    padding-block-start: constant(safe-area-inset-top);
+    padding-block-start: env(safe-area-inset-top);
+  }
+}
+
+@each $side in ('navdrawer', 'sidesheet') {
+  @include modal($side) {
+    .mdw-layout__#{$side}-hide {
+      display: none;
+    }
+
+    .mdw-layout__#{$side} {
+
+      // display: inline-block;
+      position: fixed;
+      inset-block: 0;
+
+      flex-direction: column;
+      grid-row-start: 1;
+
+      // Transition visibility
+      transition-duration: motion.$collapseDuration;
+      transition-property: max-width, transform, visibility;
+      transition-timing-function: motion.$accelerateEasing;
+
+      // Prevent tabbing
+      visibility: hidden;
+      z-index: 17; // Above scrim
+
+      .mdw-layout__sheet-content {
+        border-width: 0;
+      }
+      @if ($side == 'navdrawer') {
+        inset-inline: 0 auto;
+
+        transform: var(--mdw-layout__transform-inline-reverse);
+
+      } @else {
+        inset-inline: auto 0;
+
+        transform: var(--mdw-layout__transform-inline);
+      }
+
+      // Shown
+      &[id]:target,
+      &[aria-hidden="false"] {
+        // Change visibility immediately
+        transition-duration: motion.$expandDuration;
+        transition-property: max-inline-size, transform;
+        transition-timing-function: motion.$decelerateEasing;
+
+        transform: translateX(0);
+        visibility: visible;
+
+        box-shadow: elevation.boxShadow(16);
+
+        & ~ .mdw-layout__scrim {
+          pointer-events: auto;
+
+          visibility: visible;
+
+          background-color: $scrimColor;
+        }
+
+        &,
+        & ~ .mdw-layout__appbar {
+          .mdw-layout__#{$side}-show {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.mdw-layout__banner {
+  grid-area: banner;
+
+  z-index: 0;
+}
+
+.mdw-layout__content {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+  grid-area: content;
+  overflow-x: visible;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mdw-layout__content-page {
+  inline-size: 100%;
+}
+
+.mdw-layout__fab,
+.mdw-layout__snackbar {
+  position: sticky;
+  inset-block: auto 0;
+  grid-area: bottom;
+
+  inline-size: auto;
+
+  pointer-events: none;
+
+  transition-duration: motion.$expandDuration;
+  transition-property: transform;
+  transition-timing-function: motion.$decelerateEasing;
+
+  transform: translateY(-100%);
+  z-index: 6;
+
+}
+
+.mdw-layout__menus {
+  position: absolute;
+
+  z-index: 8;
+}
+
+.mdw-layout__dialogs {
+  position: fixed;
+  inset: 0;
+
+  pointer-events: none;
+
+  z-index: 24;
+}
+
+.mdw-layout__snackbar-anchor {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0 auto;
+
+  // Snackbars are not aligned with layout
+  box-sizing: border-box;
+  padding-block: calc(var(--mdw-layout__margin) * 0.5);
+  padding-inline-start: calc(var(--mdw-layout__margin) * 0.5);
+
+  transition-duration: inherit;
+  transition-property: transform, inset-block-end;
+  transition-timing-function: inherit;
+}
+
+.mdw-layout__snackbar .mdw-snackbar__container {
+  position: relative;
+}
+
+.mdw-layout__fab-anchor {
+  position: absolute;
+  inset-block-end: 0;
+
+  // Start aligned
+  inset-inline: auto 0;
+
+  padding: var(--mdw-layout__margin);
+
+  transition-duration: inherit;
+  transition-property: transform, inset-inline, padding-block;
+  transition-timing-function: inherit;
+
+}
+
+.mdw-layout__fab-anchor .mdw-fab {
+  transition-duration: motion.$collapseDuration;
+  transition-property: transform;
+  transition-timing-function: motion.$accelerateEasing;
+
+  transform: scale(0);
+}
+
+.mdw-layout__bottomnav {
+  position: sticky;
+  inset-block-end: 0;
+  grid-area: bottom;
+
+  z-index: 4;
+
+  box-shadow: elevation.boxShadow(8);
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+}
+
+.mdw-layout__appbar-shape {
+  display: flex;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+
+  grid-row: 1 / span 2;
+  overflow: hidden;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  transition-duration: inherit;
+  transition-property: box-shadow;
+  transition-timing-function: inherit;
+
+  z-index: -1;
+
+  box-shadow: elevation.boxShadow(4);
+
+  color: transparent;
+
+  .mdw-layout__appbar[mdw-autoraise]:not([mdw-raise]) & {
+    filter: none;
+
+    box-shadow: elevation.boxShadow(0);
+  }
+
+  &::before,
+  &::after {
+    content: '';
+
+    min-inline-size: var(--mdw-layout__margin);
+  }
+}
+
+.mdw-layout__fab-cut-track {
+  display: flex;
+  position: relative;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  flex-direction: row;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  transition-duration: motion.$shapeChangeDuration;
+  transition-property: transform;
+  transition-timing-function: motion.$standardEasing;
+
+  transform: translateX(100%) translateX(-($fabSize * 0.5));
+
+  &::before,
+  &::after,
+  & > svg {
+    position: absolute;
+    inset-block-start: 0;
+
+    block-size: 100%;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+
+    inline-size: 100%;
+    margin-inline-start: -$fabCutSize * 0.5;
+
+    background-color: currentColor;
+  }
+
+  &::before {
+    inset-inline-start: -100%;
+  }
+
+  &::after {
+    inset-inline-start: $fabCutSize;
+  }
+
+  & > svg {
+    inset-inline-start: -$fabCutSize * 0.5;
+
+    inline-size: $fabCutSize;
+
+    fill: currentColor;
+  }
+}
+
+.mdw-layout__fab-mask-shape {
+  transition-delay: $fabCutDelay;
+  transition-duration: motion.$collapseDuration;
+  transition-property: transform;
+  transition-timing-function: motion.$accelerateEasing;
+
+  // Closed
+  transform: scale(0);
+}
+
+@include breakpoint.isXSmallWindow() {
+  .mdw-layout__appbar[mdw-autohide~="mobile"][mdw-hide] {
+    transform: translateY(-100%);
+
+    &[mdw-bottom] {
+      transform: translateY(100%);
+
+      & ~ .mdw-layout__fab,
+      & ~ .mdw-layout__snackbar {
+        transition-duration: motion.$collapseDuration;
+        transition-property: transform;
+        transition-timing-function: motion.$accelerateEasing;
+
+        transform: translateY(0);
+      }
+    }
+
+    .mdw-layout__appbar-shape {
+      filter: none;
+
+      box-shadow: elevation.boxShadow(0);
+    }
+  }
+}
+
+@include breakpoint.isSmallWindow() {
+  .mdw-layout__appbar[mdw-autohide~="tablet"][mdw-hide] {
+    transform: translateY(-100%);
+
+    &[mdw-bottom] {
+      transform: translateY(100%);
+
+      & ~ .mdw-layout__fab,
+      & ~ .mdw-layout__snackbar {
+        transition-duration: motion.$collapseDuration;
+        transition-property: transform;
+        transition-timing-function: motion.$accelerateEasing;
+
+        transform: translateY(0);
+      }
+    }
+
+    .mdw-layout__appbar-shape {
+      filter: none;
+
+      box-shadow: elevation.boxShadow(0);
+    }
+  }
+}
+
+@include breakpoint.maxSmallWindow {
+  .mdw-layout__body {
+    grid-template-columns:
+      [start] 0
+      [center] minmax(0, 100%)
+      [end] 0;
+  }
+
+  .mdw-layout__appbar[mdw-bottom] {
+    inset-block: auto 0;
+    grid-area: bottom;
+
+    z-index: 8;
+
+    .mdw-layout__appbar-shape {
+      box-shadow: elevation.boxShadow(8);
+    }
+
+    &[mdw-fab-cut] {
+      & ~ .mdw-layout__fab {
+        transform: translateY(-100%) translateY(#{$fabSize * 0.5});
+      }
+
+      .mdw-layout__appbar-shape {
+        transition-property: filter;
+
+        filter: elevation.filter(8);
+
+        box-shadow: elevation.boxShadow(0);
+      }
+
+      .mdw-layout__fab-mask-shape {
+        transform: scale(0);
+      }
+    }
+
+    &[mdw-fab-cut~="open"] {
+      .mdw-layout__fab-mask-shape {
+        transition-delay: 0s;
+        transition-duration: motion.$expandDuration;
+        transition-timing-function: motion.$decelerateEasing;
+
+        transform: scale(1);
+      }
+    }
+  }
+
+  .mdw-layout__appbar[mdw-autohide=""][mdw-hide] {
+    transform: translateY(-100%);
+
+    &[mdw-bottom] {
+      transform: translateY(100%);
+
+      & ~ .mdw-layout__fab,
+      & ~ .mdw-layout__snackbar {
+        transition-duration: motion.$collapseDuration;
+        transition-property: transform;
+        transition-timing-function: motion.$accelerateEasing;
+
+        transform: translateY(0);
+      }
+    }
+
+    .mdw-layout__appbar-shape {
+      filter: none;
+
+      box-shadow: elevation.boxShadow(0);
+    }
+
+  }
+
+  .mdw-layout__snackbar-anchor {
+    inset-inline: 0;
+
+    padding: calc(var(--mdw-layout__margin) * 0.5);
+  }
+
+  .mdw-layout__fab[mdw-mobile] {
+    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
+      inset-block-end: var(--mdw-layout__margin);
+
+      transform: translateY(-56px);
+    }
+
+    & ~ .mdw-layout__content {
+      padding-block-end: calc(#{$fabSize} + var(--mdw-layout__margin));
+    }
+
+    &[aria-hidden="false"] .mdw-fab {
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
+
+      transform: scale(1);
+    }
+  }
+
+  .mdw-layout__appbar[mdw-fab-cut~="center"] .mdw-layout__fab-cut-track,
+  .mdw-layout__fab[mdw-mobile="center"] .mdw-layout__fab-anchor {
+    /* stylelint-disable-next-line liberty/use-logical-spec */
+    right: 50%;
+
+    transform: translateX(50%);
+  }
+
+  .mdw-layout__appbar[mdw-fab-cut~="full"] .mdw-layout__fab-cut-track,
+  .mdw-layout__fab[mdw-mobile="full"] .mdw-layout__fab-anchor {
+    inset-inline: 0;
+
+    transform: none;
+  }
+
+  .mdw-layout__fab[mdw-mobile="full"] .mdw-fab__button {
+    inline-size: 100%;
+    padding-inline: 0;
+  }
+
+  .mdw-layout__appbar[mdw-fab-cut][mdw-bottom]:not([mdw-hide]) {
+    & ~ .mdw-layout__fab {
+      z-index: 8; // Fab is cut into appbar, therefore elevation must match or be above
+
+      .mdw-fab {
+        transform: scale(0);
+      }
+
+      &[aria-hidden="false"] .mdw-fab {
+        transition-delay: $fabCutDelay;
+        transition-duration: motion.$expandDuration;
+        transition-timing-function: motion.$decelerateEasing;
+
+        transform: scale(1);
+      }
+
+      .mdw-layout__fab-anchor {
+        padding-block: 0;
+      }
+    }
+
+    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
+      inset-block-end: 0;
+
+      transform: translateY(-$fabSize * 0.5);
+    }
+  }
+}
+
+@include breakpoint.minMediumWindow {
+  .mdw-layout__body:not([mdw-navdrawer-toggle]):not([mdw-navdrawer-style="modal"]) {
+    .mdw-layout__navdrawer-show,
+    .mdw-layout__navdrawer-hide,
+    .mdw-layout__navdrawer-toggle {
+      display: none;
+    }
+  }
+
+  .mdw-layout__body:not([mdw-sidedrawer-toggle]):not([mdw-sidedrawer-style="modal"]) {
+    .mdw-layout__sidedrawer-show,
+    .mdw-layout__sidedrawer-hide,
+    .mdw-layout__sidedrawer-toggle {
+      display: none;
+    }
+  }
+
+  .mdw-layout__navdrawer {
+    // Full-height
+
+    position: sticky;
+    inset-block: 0 auto;
+
+    transform: none;
+  }
+
+  .mdw-layout__snackbar-anchor {
+    inline-size: 50%;
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="clipped"],
+  .mdw-layout__body[mdw-sidedrawer-style~="clipped"] {
+    overflow-y: hidden;
+
+    & > .mdw-layout__content {
+      overflow-y: auto;
+    }
+  }
+
+  .mdw-layout__fab[mdw-desktop] {
+    &[aria-hidden="false"] .mdw-fab {
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
+
+      transform: scale(1);
+    }
+
+    &:not([mdw-desktop="appbar"]) ~ .mdw-layout__content {
+      padding-block-end: calc(#{$fabSize} + var(--mdw-layout__margin));
+    }
+  }
+
+  .mdw-layout__fab[mdw-desktop="appbar"] {
+    inset-block: 0 auto;
+    grid-area: appbar;
+
+    transform: translateY(100%);
+
+    &[aria-hidden="false"] .mdw-fab {
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
+
+      transform: translateY(-50%) scale(1);
+    }
+
+    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
+      inline-size: 75%;
+    }
+
+    .mdw-layout__fab-anchor {
+      inset-block: 0 auto;
+      inset-inline: 0 auto;
+
+      padding-block: 0;
+      padding-inline: 8px;
+
+      transform: none;
+    }
+  }
+
+  .mdw-layout__fab[mdw-desktop="appbar"][aria-hidden="true"] .mdw-fab,
+  .mdw-layout__appbar[mdw-hide] ~ .mdw-layout__fab[mdw-desktop="appbar"] .mdw-fab {
+    transform: translateY(-50%) scale(0);
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="clipped"] .mdw-layout__navdrawer,
+  .mdw-layout__body[mdw-sidedrawer-style~="clipped"] .mdw-layout__sidedrawer {
+    z-index: 0;
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="floating"] .mdw-layout__navdrawer,
+  .mdw-layout__body[mdw-sidedrawer-style~="floating"] .mdw-layout__sidedrawer {
+    & .mdw-layout__sheet-content {
+      block-size: auto;
+      border-width: 0;
+    }
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="card"] .mdw-layout__navdrawer,
+  .mdw-layout__body[mdw-sidedrawer-style~="card"] .mdw-layout__sidedrawer {
+    margin: 0 var(--mdw-layout__margin);
+    padding: var(--mdw-layout__margin) 0;
+
+    & > .mdw-layout__sheet-content {
+      box-shadow: elevation.boxShadow(8);
+    }
+  }
+
+  .mdw-layout__body[mdw-navdrawer-toggle~="dismissible"]:not([mdw-navdrawer-style="modal"]) .mdw-layout__navdrawer:not([aria-hidden="false"]),
+  .mdw-layout__body[mdw-sidedrawer-toggle~="dismissible"]:not([mdw-sidedrawer-style="modal"]) .mdw-layout__sidedrawer:not([aria-hidden="false"]) {
+    max-inline-size: 0;
+    inline-size: 0;
+    margin-inline: 0;
+
+    transition-duration: motion.$collapseDuration;
+    transition-property: width, max-width, margin, transform, visibility;
+    transition-timing-function: motion.$accelerateEasing;
+
+    visibility: hidden;
+
+    .mdw-layout__sheet-content {
+      box-shadow: elevation.boxShadow(0);
+    }
+  }
+
+  .mdw-layout__body[mdw-navdrawer-toggle~="mini"]:not([mdw-navdrawer-style="modal"]) {
+    .mdw-layout__navdrawer:not([aria-hidden="false"]) {
+      max-inline-size: $sheetMaxWidthMini;
+      inline-size: $sheetMaxWidthMini;
+
+      transition-duration: motion.$collapseDuration;
+      transition-timing-function: motion.$accelerateEasing;
+    }
+  }
+
+  .mdw-layout__body[mdw-sidedrawer-toggle~="mini"]:not([mdw-sidedrawer-style="modal"]) {
+    .mdw-layout__sidedrawer:not([aria-hidden="false"]) {
+      max-inline-size: $sheetMaxWidthMini;
+      inline-size: $sheetMaxWidthMini;
+
+      transition-duration: motion.$collapseDuration;
+      transition-timing-function: motion.$accelerateEasing;
+    }
+  }
+
+  .mdw-layout__appbar[mdw-autohide=""][mdw-hide] {
+    transform: translateY(-100%);
+
+    .mdw-layout__appbar-shape {
+      filter: none;
+
+      box-shadow: elevation.boxShadow(0);
+    }
+  }
+}