@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/layout/_spec.scss

@@ -1,1012 +0,0 @@
-// 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;
-    }
-  }
-}