@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/layout/_spec.scss

@@ -0,0 +1,1012 @@
+// 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
+
+@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 *;
+
+$scrimColor: rgba(0, 0, 0, 0.50) !default;
+$sheetMinWidth: dp(256) !default;
+$sheetMaxWidthMini: dp(72) !default;
+
+$fabSize: dp(56) !default;
+$fabCutSize: dp(72) !default;
+$fabCutDelay: 100ms !default;
+
+$rowTop: 1 !default;
+$rowBanner: 2 !default;
+$rowContent: 3 !default;
+$rowBottom: 4 !default;
+
+$columnNavDrawer: 1 !default;
+$columnContent: 2 !default;
+$columnSideSheet: 3 !default;
+$columnViewportEnd: 4 !default;
+
+$bodyOverflowY: hidden !default;
+$bodyOverflowYSticky: auto !default;
+$contentOverflowY: auto !default;
+$contentOverflowYSticky: visible !default;
+
+.mdw-layout {
+  overflow-y: hidden;
+  
+  min-height: 100%;
+  height: 100%;
+  width: 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');
+
+  display: -ms-grid;
+  display: grid;
+  position: relative;
+  // start | main | end
+  // Use minmax(0, 1fr) to clamp horizontally oversized grid-items~~
+  // Use minmax everywhere to solve Chrome v80 grid bugs
+  grid-template-columns: minmax(0, auto) minmax(0, 100%) minmax(0, auto);
+  -ms-grid-columns: auto minmax(0, 1fr) auto;
+  // top | banner | content | bottom
+  grid-template-rows: auto auto minmax(auto, 1fr) auto;
+  -ms-grid-rows: auto auto 1fr auto;
+
+  overflow-x: hidden;
+  overflow-y: $bodyOverflowY;
+  -webkit-overflow-scrolling: touch;
+
+  height: 100%;
+  max-width: 100vw;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
+
+  background-color: inherit;
+
+  // Chrome v78 fix scrolling bug
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1011866
+  // Apply to Chrome v76+
+  /* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
+  @media screen and (prefers-color-scheme) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: 0.001dpcm) {
+    opacity: 0.999;
+  }
+}
+
+.mdw-layout__appbar {
+  @include gridColumn($columnContent);
+  @include gridRow($rowTop);
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+
+  position: static;
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: sticky;
+  top: 0;
+  
+  margin-top: 0;
+
+  transition-duration: motion.$expandDuration;
+  transition-property: transform, margin-top;
+  transition-timing-function: motion.$decelerateEasing;
+  will-change: transform, margin-top;
+
+  transform: translateY(0); // browser hint
+  z-index: 4;
+
+  &[mdw-hide] {
+    transition-duration: motion.$collapseDuration;
+    transition-timing-function: motion.$accelerateEasing;
+  }
+}
+
+.mdw-layout[mdw-ios][mdw-standalone] {
+  .mdw-layout__appbar,
+  .mdw-layout__navdrawer,
+  .mdw-layout__sidesheet {
+    padding-top: dp(20);
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+}
+
+.mdw-layout__scrim {
+  content: '';
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  // Scroll mask
+  -ms-overflow-style: none;
+  overflow-y: scroll;
+  overscroll-behavior: none;
+  overscroll-behavior: contain;
+  -ms-scroll-chaining: none;
+  scrollbar-width: none;
+
+  height: 100%;
+  width: 100%;
+
+  cursor: auto;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: background-color, visibility;
+  transition-timing-function: motion.$accelerateEasing;
+
+  pointer-events: none;
+  visibility: hidden;
+  z-index: 16;
+
+  background-color: transparent;
+
+  // Hide scrollbar
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    display: block;
+    content: '';
+
+    height: 200%;
+    width: 200%;
+  }
+}
+
+.mdw-layout__navdrawer,
+.mdw-layout__sidesheet {
+  @include gridRow($rowTop, $rowBottom);
+
+  box-sizing: border-box;
+  max-height: 100vh;
+  height: 100%;
+  max-width: calc(100vw - #{dp(56)});
+  @include breakpoint.isXSmallWindow() {
+    max-width: calc(100vw - #{dp(64)}); // Tablet or Desktop
+  }
+  width: $sheetMinWidth;
+
+  transition-duration: motion.$expandDuration;
+  transition-property: width, max-width, 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-height: 100%;
+  height: 100%;
+  border-width: dp(1);
+}
+
+.mdw-layout__navdrawer {
+  @include gridColumn($columnNavDrawer);
+
+  .mdw-list__content.mdw-overlay {
+    &::before,
+    & > .mdw-ripple__container {
+      margin: dp(4) dp(8);
+
+      border-radius: dp(4);
+    }
+  }
+}
+
+.mdw-layout__sidesheet {
+  @include gridColumn($columnSideSheet);
+}
+
+.mdw-layout__navdrawer .mdw-layout__sheet-content,
+:root[dir="rtl"] .mdw-layout__sidesheet .mdw-layout__sheet-content {
+  border-right-style: solid;
+  border-left-style: none;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.mdw-layout__sidesheet .mdw-layout__sheet-content,
+:root[dir="rtl"] .mdw-layout__navdrawer .mdw-layout__sheet-content {
+  border-right-style: none;
+  border-left-style: solid;
+}
+
+@each $side in ('navdrawer', 'sidesheet') {
+  @include modal($side) {
+    .mdw-layout__#{$side}-hide {
+      display: none;
+    }
+
+    .mdw-layout__#{$side} {
+      // Safari bug prevents using position:fixed with grid on resize
+      // Switching between display:block and display:flex will force Safari to rerender
+      // https://codepen.io/shortfuse/pen/pYqLbQ
+      
+      display: inline-block;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+
+      flex-direction: column;
+
+      // 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') {
+        right: auto;
+        left: 0;
+
+        transform: translateX(-100%);
+
+        :root[dir="rtl"] & {
+          right: 0;
+          left: auto;
+
+          transform: translateX(100%);
+        }
+      } @else {
+        right: 0;
+        left: auto;
+
+        transform: translateX(100%);
+
+        :root[dir="rtl"] & {
+          right: auto;
+          left: 0;
+
+          transform: translateX(-100%);
+        }
+      }
+
+      // Shown
+      &[id]:target,
+      &[aria-hidden="false"] {
+        // Change visibility immediately
+        transition-duration: motion.$expandDuration;
+        transition-property: max-width, 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 {
+  @include gridRow($rowBanner);
+  @include gridColumn($columnContent);
+  z-index: 0;
+}
+
+.mdw-layout__content {
+  @include gridRow($rowContent);
+  @include gridColumn($columnContent);
+
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+  overflow-x: visible;
+  overflow-y: $contentOverflowY;
+  -webkit-overflow-scrolling: touch;
+}
+
+
+.mdw-layout__content-page {
+  width: 100%;
+}
+
+.mdw-layout__fab,
+.mdw-layout__snackbar {
+  // Aligned to bottom-anchor
+  @include gridRow($rowBottom);
+  @include gridColumn($columnContent);
+
+  position: static;
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: sticky;
+  top: auto;
+  bottom: 0;
+
+  width: auto;
+
+  transition-duration: motion.$expandDuration;
+  transition-property: transform;
+  transition-timing-function: motion.$decelerateEasing;
+
+  pointer-events: none;
+  transform: translateY(-100%);
+  z-index: 6;
+
+}
+
+.mdw-layout__menus {
+  position: absolute;
+
+  z-index: 8;
+}
+
+.mdw-layout__dialogs {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  pointer-events: none;
+
+  z-index: 24;
+}
+
+.mdw-layout__snackbar-anchor {
+  position: absolute;
+  right: auto;
+  bottom: 0;
+  left: 0;
+
+  // Snackbars are not aligned with layout
+  box-sizing: border-box;
+  padding-top: dp(24 * 0.5);
+  padding-right: 0;
+  padding-bottom: dp(24 * 0.5);
+  padding-left: dp(24 * 0.5);
+  @include breakpoint.has16DPMargin() {
+    padding-top: dp(16 * 0.5);
+    padding-right: 0;
+    padding-bottom: dp(16 * 0.5);
+    padding-left: dp(16 * 0.5);
+  }
+
+  transition-duration: inherit;
+  transition-property: transform, bottom;
+  transition-timing-function: inherit;
+
+  :root[dir="rtl"] & {
+    right: 0;
+    left: auto;
+
+    padding-top: dp(24 * 0.5);
+    padding-right: dp(24 * 0.5);
+    padding-bottom: dp(24 * 0.5);
+    padding-left: 0;
+    @include breakpoint.has16DPMargin() {
+      padding-top: dp(16 * 0.5);
+      padding-right: dp(16 * 0.5);
+      padding-bottom: dp(16 * 0.5);
+      padding-left: dp(0);
+    }
+  }
+}
+
+.mdw-layout__snackbar .mdw-snackbar__container {
+  position: relative;
+}
+
+.mdw-layout__fab-anchor {
+  position: absolute;
+
+  // Left aligned
+  right: 0;
+  bottom: 0;
+  left: auto;
+
+  padding: dp(24);
+  @include breakpoint.has16DPMargin() {
+    padding: dp(16);
+  }
+
+  transition-duration: inherit;
+  transition-property: transform, right, padding-top, padding-bottom;
+  transition-timing-function: inherit;
+
+  :root[dir="rtl"] & {
+    right: 100%;
+
+    transform: translateX(100%);
+  }
+}
+
+.mdw-layout__fab-anchor .mdw-fab {
+  transition-duration: motion.$collapseDuration;
+  transition-property: transform;
+  transition-timing-function: motion.$accelerateEasing;
+
+  transform: scale(0);
+}
+
+.mdw-layout__bottomnav {
+  @include gridColumn($columnContent);
+  @include gridRow($rowBottom);
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
+
+  position: static;
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: sticky;
+  bottom: 0;
+  
+  z-index: 4;
+
+  box-shadow: elevation.boxShadow(8);
+}
+
+.mdw-layout__appbar-shape {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+
+  height: 100%;
+  width: 100%;
+
+  transition-duration: inherit;
+  transition-property: box-shadow;
+  transition-timing-function: inherit;
+
+  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-width: dp(24);
+    @include breakpoint.has16DPMargin() {
+      min-width: dp(16);
+    }
+  }
+}
+
+.mdw-layout__fab-cut-track {
+  display: flex;
+  position: relative;
+  top: 0;
+  left: 0;
+  flex-direction: row;
+
+  height: 100%;
+  width: 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;
+    top: 0;
+
+    height: 100%;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+
+    width: 100%;
+    margin-left: -$fabCutSize * 0.5;
+
+    background-color: currentColor;
+  }
+
+  &::before {
+    left: -100%;
+  }
+
+  &::after {
+    left: $fabCutSize;
+  }
+
+  & > svg {
+    left: -$fabCutSize * 0.5;
+
+    width: $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__appbar[mdw-bottom] {
+    @include gridRow($rowBottom);
+    top: auto;
+    bottom: 0;
+
+    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 {
+    &,
+    :root[dir="rtl"] & {
+      right: 0;
+      left: 0;
+
+      padding: dp(24 * 0.5);
+      @include breakpoint.has16DPMargin() {
+        padding: dp(16 * 0.5);
+      }
+    }
+  }
+
+  .mdw-layout__fab[mdw-mobile] {
+    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
+      bottom: dp(24);
+      @include breakpoint.has16DPMargin() {
+        bottom: dp(16);
+      }
+
+      transform: translateY(#{dp(-56)});
+    }
+
+    & ~ .mdw-layout__content {
+      padding-bottom: #{$fabSize + dp(24)};
+    }
+
+    &[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 {
+    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 {
+    right: 0;
+    left: 0;
+
+    transform: none;
+  }
+
+  .mdw-layout__fab[mdw-mobile="full"] .mdw-fab__button {
+    width: 100%;
+    padding-right: 0;
+    padding-left: 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-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
+      bottom: 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-sidesheet-toggle]):not([mdw-sidesheet-style="modal"]) {
+    .mdw-layout__sidesheet-show,
+    .mdw-layout__sidesheet-hide,
+    .mdw-layout__sidesheet-toggle {
+      display: none;
+    }
+  }
+
+  .mdw-layout__navdrawer,
+  .mdw-layout__sidesheet {
+    // Full-height
+    position: static;
+    position: -webkit-sticky;
+    position: -moz-sticky;
+    position: sticky;
+    top: 0;
+    bottom: auto;
+
+    transform: none;
+  }
+
+  .mdw-layout__snackbar-anchor {
+    width: 50%;
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="clipped"],
+  .mdw-layout__body[mdw-sidesheet-style~="clipped"] {
+    overflow-y: $bodyOverflowY;
+
+    & > .mdw-layout__content {
+      overflow-y: $contentOverflowY;
+    }
+  }
+
+  .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-bottom: #{$fabSize + dp(24)};
+    }
+  }
+
+  .mdw-layout__fab[mdw-desktop="appbar"] {
+    @include gridRow($rowTop);
+    top: 0;
+    bottom: auto;
+
+    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 {
+      width: 75%;
+    }
+
+    .mdw-layout__fab-anchor {
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 0;
+
+      padding-top: 0;
+      padding-right: dp(8);
+      padding-bottom: 0;
+      padding-left: dp(8);
+
+      transform: none;
+
+      :root[dir="rtl"] & {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  .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-sidesheet-style~="clipped"] .mdw-layout__sidesheet {
+    @include gridRow($rowBanner, $rowBottom);
+    z-index: 0;
+  }
+  
+  .mdw-layout__body[mdw-navdrawer-style~="clipped"] {
+    .mdw-layout__appbar,
+    .mdw-layout__fab[mdw-desktop="appbar"] {
+      @include gridColumn($columnNavDrawer, $columnContent);
+    }
+  }
+
+  .mdw-layout__body[mdw-sidesheet-style~="clipped"] {
+    .mdw-layout__appbar,
+    .mdw-layout__fab[mdw-desktop="appbar"] {
+      @include gridColumn($columnContent, $columnSideSheet);
+    }
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="clipped"][mdw-sidesheet-style~="clipped"] {
+    .mdw-layout__appbar,
+    .mdw-layout__fab[mdw-desktop="appbar"] {
+      @include gridColumn($columnNavDrawer, $columnSideSheet);
+    }
+  }
+  
+  .mdw-layout__body[mdw-navdrawer-style~="floating"] .mdw-layout__navdrawer,
+  .mdw-layout__body[mdw-sidesheet-style~="floating"] .mdw-layout__sidesheet {
+    @include gridRow($rowContent, $rowBottom);
+
+    & .mdw-layout__sheet-content {
+      height: auto;
+      border-width: 0;
+    }
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="floating"] {
+    .mdw-layout__banner,
+    .mdw-layout__bottomnav {
+      @include gridColumn($columnNavDrawer, $columnContent);
+    }
+  }
+
+  .mdw-layout__body[mdw-sidesheet-style~="floating"] {
+    .mdw-layout__banner,
+    .mdw-layout__bottomnav {
+      @include gridColumn($columnContent, $columnSideSheet);
+    }
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="floating"][mdw-sidesheet-style~="floating"] {
+    .mdw-layout__banner,
+    .mdw-layout__bottomnav {
+      @include gridColumn($columnNavDrawer, $columnSideSheet);
+    }
+  }
+
+  .mdw-layout__body[mdw-navdrawer-style~="card"] .mdw-layout__navdrawer,
+  .mdw-layout__body[mdw-sidesheet-style~="card"] .mdw-layout__sidesheet {
+    margin: 0 dp(24);
+    padding: dp(24) 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-sidesheet-toggle~="dismissible"]:not([mdw-sidesheet-style="modal"]) .mdw-layout__sidesheet:not([aria-hidden="false"]) {
+    max-width: 0;
+    width: 0;
+    margin-right: 0;
+    margin-left: 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-width: $sheetMaxWidthMini;
+      width: $sheetMaxWidthMini;
+
+      transition-duration: motion.$collapseDuration;
+      transition-timing-function: motion.$accelerateEasing;
+    }
+  }
+
+  .mdw-layout__body[mdw-sidesheet-toggle~="mini"]:not([mdw-sidesheet-style="modal"]) {
+    .mdw-layout__sidesheet:not([aria-hidden="false"]) {
+      max-width: $sheetMaxWidthMini;
+      width: $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);
+    }
+  }
+}
+
+@supports (position: sticky) or (position: -webkit-sticky) or (position: -moz-sticky) {
+  .mdw-layout__body {
+    overflow-y: $bodyOverflowYSticky;
+
+    & > .mdw-layout__content {
+      overflow-y: $contentOverflowYSticky;
+    }
+  }
+}