@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/layout/_spec.scss

@@ -2,42 +2,43 @@
 // https://material.io/archive/guidelines/patterns/navigation-drawer.html
 // https://material.io/archive/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
 
-@import '../../core/_elevation.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_breakpoint.scss';
-@import '../../core/_type.scss';
-@import './_mixins.scss';
-
-$mdw-layout__scrim-color: rgba(0, 0, 0, 0.50) !default;
-$mdw-layout__sheet-min-width: dp(256) !default;
-$mdw-layout__sheet-max-width__mini: dp(72) !default;
-
-$mdw-layout__fab-size: dp(56) !default;
-$mdw-layout__fab-cut-size: dp(72) !default;
-$mdw-layout__fab-cut-delay: 100ms !default;
-
-$mdw-layout__top-row: 1 !default;
-$mdw-layout__banner-row: 2 !default;
-$mdw-layout__content-row: 3 !default;
-$mdw-layout__bottom-row: 4 !default;
-
-$mdw-layout__navdrawer-column: 1 !default;
-$mdw-layout__content-column: 2 !default;
-$mdw-layout__sidesheet-column: 3 !default;
-$mdw-layout__viewport-end-column: 4 !default;
-
-$mdw-layout__body-overflow-y: hidden !default;
-$mdw-layout__body-overflow-y__sticky: auto !default;
-$mdw-layout__content-overflow-y: auto !default;
-$mdw-layout__content-overflow-y__sticky: visible !default;
+@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: 100vh;
-  height: 100vh;
-  min-width: 100vw;
+  
+  min-height: 100%;
+  height: 100%;
+  width: 100vw;
   margin: 0;
   padding: 0;
 
@@ -48,36 +49,51 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 }
 
 .mdw-layout__body {
-  @include type-rules('body');
+  @include type.addRules('body');
 
   display: -ms-grid;
   display: grid;
   position: relative;
   // start | main | end
-  // Use minmax(0, 1fr) to clamp horizontally oversived grid-items
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  // 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 1fr auto;
+  grid-template-rows: auto auto minmax(auto, 1fr) auto;
   -ms-grid-rows: auto auto 1fr auto;
+
   overflow-x: hidden;
-  overflow-y: $mdw-layout__body-overflow-y;
+  overflow-y: $bodyOverflowY;
+  -webkit-overflow-scrolling: touch;
 
-  height: 100vh;
+  height: 100%;
   max-width: 100vw;
   width: 100vw;
   margin: 0;
   padding: 0;
 
-  transition-duration: $mdw-motion__simple-duration;
-  transition-timing-function: $mdw-motion__standard-easing;
+  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 mdw-layout__grid-column($mdw-layout__content-column);
-  @include mdw-layout__grid-row($mdw-layout__top-row);
+  @include gridColumn($columnContent);
+  @include gridRow($rowTop);
+
+  &[aria-hidden="true"] {
+    display: none;
+  }
 
   position: static;
   position: -webkit-sticky;
@@ -87,24 +103,28 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   
   margin-top: 0;
 
-  transition-duration: $mdw-motion__expand-duration;
+  transition-duration: motion.$expandDuration;
   transition-property: transform, margin-top;
-  transition-timing-function: $mdw-motion__decelerate-easing;
+  transition-timing-function: motion.$decelerateEasing;
   will-change: transform, margin-top;
 
   transform: translateY(0); // browser hint
   z-index: 4;
 
-  .mdw-layout[mdw-ios][mdw-standalone] & {
+  &[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-hide] {
-    transition-duration: $mdw-motion__collapse-duration;
-    transition-timing-function: $mdw-motion__accelerate-easing;
-  }
 }
 
 .mdw-layout__scrim {
@@ -125,12 +145,15 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   width: 100%;
 
   cursor: auto;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
 
-  transition-duration: $mdw-motion__fade-out-duration;
-  transition-property: background-color;
-  transition-timing-function: $mdw-motion__accelerate-easing;
+  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;
@@ -151,20 +174,20 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
 .mdw-layout__navdrawer,
 .mdw-layout__sidesheet {
-  @include mdw-layout__grid-row($mdw-layout__top-row, $mdw-layout__bottom-row);
+  @include gridRow($rowTop, $rowBottom);
 
   box-sizing: border-box;
   max-height: 100vh;
   height: 100%;
   max-width: calc(100vw - #{dp(56)});
-  @mixin mdw-breakpoint__xsmall-window {
+  @include breakpoint.isXSmallWindow() {
     max-width: calc(100vw - #{dp(64)}); // Tablet or Desktop
   }
-  width: $mdw-layout__sheet-min-width;
+  width: $sheetMinWidth;
 
-  transition-duration: $mdw-motion__expand-duration;
+  transition-duration: motion.$expandDuration;
   transition-property: width, max-width, transform;
-  transition-timing-function: $mdw-motion__decelerate-easing;
+  transition-timing-function: motion.$decelerateEasing;
 
   will-change: max-width, transform, position;
 
@@ -172,11 +195,12 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   z-index: 5; // Above appbar shadow
 
   background-color: inherit;
-  box-shadow: mdwElevation(0);
+  box-shadow: elevation.boxShadow(0);
 }
 
 .mdw-layout__sheet-content {
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
   box-sizing: border-box;
   max-height: 100%;
@@ -185,7 +209,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 }
 
 .mdw-layout__navdrawer {
-  @include mdw-layout__grid-column($mdw-layout__navdrawer-column);
+  @include gridColumn($columnNavDrawer);
 
   .mdw-list__content.mdw-overlay {
     &::before,
@@ -198,7 +222,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 }
 
 .mdw-layout__sidesheet {
-  @include mdw-layout__grid-column($mdw-layout__sidesheet-column);
+  @include gridColumn($columnSideSheet);
 }
 
 .mdw-layout__navdrawer .mdw-layout__sheet-content,
@@ -215,7 +239,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 }
 
 @each $side in ('navdrawer', 'sidesheet') {
-  @include mdw-layout__modal($side) {
+  @include modal($side) {
     .mdw-layout__#{$side}-hide {
       display: none;
     }
@@ -233,9 +257,9 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
       flex-direction: column;
 
       // Transition visibility
-      transition-duration: $mdw-motion__collapse-duration;
+      transition-duration: motion.$collapseDuration;
       transition-property: max-width, transform, visibility;
-      transition-timing-function: $mdw-motion__accelerate-easing;
+      transition-timing-function: motion.$accelerateEasing;
 
       // Prevent tabbing
       visibility: hidden;
@@ -271,21 +295,23 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
       }
 
       // Shown
+      &[id]:target,
       &[aria-hidden="false"] {
         // Change visibility immediately
-        transition-duration: $mdw-motion__expand-duration;
+        transition-duration: motion.$expandDuration;
         transition-property: max-width, transform;
-        transition-timing-function: $mdw-motion__decelerate-easing;
+        transition-timing-function: motion.$decelerateEasing;
 
         transform: translateX(0);
         visibility: visible;
 
-        box-shadow: mdwElevation(16);
+        box-shadow: elevation.boxShadow(16);
 
         & ~ .mdw-layout__scrim {
           pointer-events: auto;
+          visibility: visible;
     
-          background-color: $mdw-layout__scrim-color;
+          background-color: $scrimColor;
         }
 
         &,
@@ -300,21 +326,22 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 }
 
 .mdw-layout__banner {
-  @include mdw-layout__grid-row($mdw-layout__banner-row);
-  @include mdw-layout__grid-column($mdw-layout__content-column);
+  @include gridRow($rowBanner);
+  @include gridColumn($columnContent);
   z-index: 0;
 }
 
 .mdw-layout__content {
-  @include mdw-layout__grid-row($mdw-layout__content-row);
-  @include mdw-layout__grid-column($mdw-layout__content-column);
+  @include gridRow($rowContent);
+  @include gridColumn($columnContent);
 
   display: flex;
   position: relative;
   align-items: center;
   flex-direction: column;
   overflow-x: visible;
-  overflow-y: $mdw-layout__content-overflow-y;
+  overflow-y: $contentOverflowY;
+  -webkit-overflow-scrolling: touch;
 }
 
 
@@ -325,8 +352,8 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 .mdw-layout__fab,
 .mdw-layout__snackbar {
   // Aligned to bottom-anchor
-  @include mdw-layout__grid-row($mdw-layout__bottom-row);
-  @include mdw-layout__grid-column($mdw-layout__content-column);
+  @include gridRow($rowBottom);
+  @include gridColumn($columnContent);
 
   position: static;
   position: -webkit-sticky;
@@ -337,9 +364,9 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
   width: auto;
 
-  transition-duration: $mdw-motion__expand-duration;
+  transition-duration: motion.$expandDuration;
   transition-property: transform;
-  transition-timing-function: $mdw-motion__decelerate-easing;
+  transition-timing-function: motion.$decelerateEasing;
 
   pointer-events: none;
   transform: translateY(-100%);
@@ -373,15 +400,15 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
   // Snackbars are not aligned with layout
   box-sizing: border-box;
-  padding-top: dp(24 / 2);
+  padding-top: dp(24 * 0.5);
   padding-right: 0;
-  padding-bottom: dp(24 / 2);
-  padding-left: dp(24 / 2);
-  @include mdw-breakpoint__16dp-margin {
-    padding-top: dp(16 / 2);
+  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 / 2);
-    padding-left: dp(16 / 2);
+    padding-bottom: dp(16 * 0.5);
+    padding-left: dp(16 * 0.5);
   }
 
   transition-duration: inherit;
@@ -392,14 +419,14 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     right: 0;
     left: auto;
 
-    padding-top: dp(24 / 2);
-    padding-right: dp(24 / 2);
-    padding-bottom: dp(24 / 2);
+    padding-top: dp(24 * 0.5);
+    padding-right: dp(24 * 0.5);
+    padding-bottom: dp(24 * 0.5);
     padding-left: 0;
-    @include mdw-breakpoint__16dp-margin {
-      padding-top: dp(16 / 2);
-      padding-right: dp(16 / 2);
-      padding-bottom: dp(16 / 2);
+    @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);
     }
   }
@@ -418,7 +445,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   left: auto;
 
   padding: dp(24);
-  @include mdw-breakpoint__16dp-margin {
+  @include breakpoint.has16DPMargin() {
     padding: dp(16);
   }
 
@@ -434,24 +461,30 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 }
 
 .mdw-layout__fab-anchor .mdw-fab {
-  transition-duration: $mdw-motion__collapse-duration;
+  transition-duration: motion.$collapseDuration;
   transition-property: transform;
-  transition-timing-function: $mdw-motion__accelerate-easing;
+  transition-timing-function: motion.$accelerateEasing;
 
   transform: scale(0);
 }
 
 .mdw-layout__bottomnav {
-  @include mdw-layout__grid-column($mdw-layout__content-column);
-  @include mdw-layout__grid-row($mdw-layout__bottom-row);
+  @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 {
@@ -468,14 +501,14 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   transition-property: box-shadow;
   transition-timing-function: inherit;
 
-  box-shadow: mdwElevation(4);
+  box-shadow: elevation.boxShadow(4);
   
   color: transparent;
 
   .mdw-layout__appbar[mdw-autoraise]:not([mdw-raise]) & {
     filter: none;
 
-    box-shadow: mdwElevation(0);
+    box-shadow: elevation.boxShadow(0);
   }
 
   &::before,
@@ -483,7 +516,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     content: '';
 
     min-width: dp(24);
-    @include mdw-breakpoint__16dp-margin {
+    @include breakpoint.has16DPMargin() {
       min-width: dp(16);
     }
   }
@@ -499,11 +532,11 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   height: 100%;
   width: 100%;
 
-  transition-duration: $mdw-motion__shape-change-duration;
+  transition-duration: motion.$shapeChangeDuration;
   transition-property: transform;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
-  transform: translateX(100%) translateX(-($mdw-layout__fab-size / 2));
+  transform: translateX(100%) translateX(-($fabSize * 0.5));
 
   &::before,
   &::after,
@@ -519,7 +552,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     content: '';
 
     width: 100%;
-    margin-left: -$mdw-layout__fab-cut-size / 2;
+    margin-left: -$fabCutSize * 0.5;
 
     background-color: currentColor;
   }
@@ -529,29 +562,29 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   }
 
   &::after {
-    left: $mdw-layout__fab-cut-size;
+    left: $fabCutSize;
   }
 
   & > svg {
-    left: -$mdw-layout__fab-cut-size / 2;
+    left: -$fabCutSize * 0.5;
 
-    width: $mdw-layout__fab-cut-size;
+    width: $fabCutSize;
 
     fill: currentColor;
   }
 }
 
 .mdw-layout__fab-mask-shape {
-  transition-delay: $mdw-layout__fab-cut-delay;
-  transition-duration: $mdw-motion__collapse-duration;
+  transition-delay: $fabCutDelay;
+  transition-duration: motion.$collapseDuration;
   transition-property: transform;
-  transition-timing-function: $mdw-motion__accelerate-easing;
+  transition-timing-function: motion.$accelerateEasing;
 
   // Closed
   transform: scale(0);
 }
 
-@include mdw-breakpoint__xsmall-window {
+@include breakpoint.isXSmallWindow() {
   .mdw-layout__appbar[mdw-autohide~="mobile"][mdw-hide] {
     transform: translateY(-100%);
 
@@ -560,9 +593,9 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
       & ~ .mdw-layout__fab,
       & ~ .mdw-layout__snackbar {
-        transition-duration: $mdw-motion__collapse-duration;
+        transition-duration: motion.$collapseDuration;
         transition-property: transform;
-        transition-timing-function: $mdw-motion__accelerate-easing;
+        transition-timing-function: motion.$accelerateEasing;
 
         transform: translateY(0);
       }
@@ -571,12 +604,12 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     .mdw-layout__appbar-shape {
       filter: none;
 
-      box-shadow: mdwElevation(0);
+      box-shadow: elevation.boxShadow(0);
     }
   }
 }
 
-@include mdw-breakpoint__small-window {
+@include breakpoint.isSmallWindow() {
   .mdw-layout__appbar[mdw-autohide~="tablet"][mdw-hide] {
     transform: translateY(-100%);
 
@@ -585,9 +618,9 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
       & ~ .mdw-layout__fab,
       & ~ .mdw-layout__snackbar {
-        transition-duration: $mdw-motion__collapse-duration;
+        transition-duration: motion.$collapseDuration;
         transition-property: transform;
-        transition-timing-function: $mdw-motion__accelerate-easing;
+        transition-timing-function: motion.$accelerateEasing;
 
         transform: translateY(0);
       }
@@ -596,34 +629,34 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     .mdw-layout__appbar-shape {
       filter: none;
 
-      box-shadow: mdwElevation(0);
+      box-shadow: elevation.boxShadow(0);
     }
   }
 }
 
-@include mdw-breakpoint__small-window__max {
+@include breakpoint.maxSmallWindow {
   .mdw-layout__appbar[mdw-bottom] {
-    @include mdw-layout__grid-row($mdw-layout__bottom-row);
+    @include gridRow($rowBottom);
     top: auto;
     bottom: 0;
 
     z-index: 8;
 
     .mdw-layout__appbar-shape {
-      box-shadow: mdwElevation(8);
+      box-shadow: elevation.boxShadow(8);
     }
 
     &[mdw-fab-cut] {
       & ~ .mdw-layout__fab {
-        transform: translateY(-100%) translateY(#{$mdw-layout__fab-size / 2});
+        transform: translateY(-100%) translateY(#{$fabSize * 0.5});
       }
   
       .mdw-layout__appbar-shape {
         transition-property: filter;
   
-        filter: mdwElevation(8, true);
+        filter: elevation.filter(8);
         
-        box-shadow: mdwElevation(0);
+        box-shadow: elevation.boxShadow(0);
       }
       
       .mdw-layout__fab-mask-shape {
@@ -634,8 +667,8 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     &[mdw-fab-cut~="open"] {
       .mdw-layout__fab-mask-shape {
         transition-delay: 0s;
-        transition-duration: $mdw-motion__expand-duration;
-        transition-timing-function: $mdw-motion__decelerate-easing;
+        transition-duration: motion.$expandDuration;
+        transition-timing-function: motion.$decelerateEasing;
 
         transform: scale(1);
       }
@@ -650,9 +683,9 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
       & ~ .mdw-layout__fab,
       & ~ .mdw-layout__snackbar {
-        transition-duration: $mdw-motion__collapse-duration;
+        transition-duration: motion.$collapseDuration;
         transition-property: transform;
-        transition-timing-function: $mdw-motion__accelerate-easing;
+        transition-timing-function: motion.$accelerateEasing;
 
         transform: translateY(0);
       }
@@ -661,23 +694,20 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     .mdw-layout__appbar-shape {
       filter: none;
 
-      box-shadow: mdwElevation(0);
+      box-shadow: elevation.boxShadow(0);
     }
 
   }
 
-  
-
-
   .mdw-layout__snackbar-anchor {
     &,
     :root[dir="rtl"] & {
       right: 0;
       left: 0;
 
-      padding: dp(24 / 2);
-      @include mdw-breakpoint__16dp-margin {
-        padding: dp(16 / 2);
+      padding: dp(24 * 0.5);
+      @include breakpoint.has16DPMargin() {
+        padding: dp(16 * 0.5);
       }
     }
   }
@@ -685,7 +715,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   .mdw-layout__fab[mdw-mobile] {
     & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
       bottom: dp(24);
-      @include mdw-breakpoint__16dp-margin {
+      @include breakpoint.has16DPMargin() {
         bottom: dp(16);
       }
 
@@ -693,12 +723,12 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     }
 
     & ~ .mdw-layout__content {
-      padding-bottom: #{$mdw-layout__fab-size + dp(24)};
+      padding-bottom: #{$fabSize + dp(24)};
     }
 
     &[aria-hidden="false"] .mdw-fab {
-      transition-duration: $mdw-motion__expand-duration;
-      transition-timing-function: $mdw-motion__decelerate-easing;
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
 
       transform: scale(1);
     }
@@ -734,9 +764,9 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
       }
 
       &[aria-hidden="false"] .mdw-fab {
-        transition-delay: $mdw-layout__fab-cut-delay;
-        transition-duration: $mdw-motion__expand-duration;
-        transition-timing-function: $mdw-motion__decelerate-easing;
+        transition-delay: $fabCutDelay;
+        transition-duration: motion.$expandDuration;
+        transition-timing-function: motion.$decelerateEasing;
 
         transform: scale(1);
       }
@@ -750,12 +780,12 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     & ~ .mdw-layout__snackbar .mdw-layout__snackbar-anchor {
       bottom: 0;
 
-      transform: translateY(-$mdw-layout__fab-size / 2);
+      transform: translateY(-$fabSize * 0.5);
     }
   }
 }
 
-@include mdw-breakpoint__medium-window__min {
+@include breakpoint.minMediumWindow {
   .mdw-layout__body:not([mdw-navdrawer-toggle]):not([mdw-navdrawer-style="modal"]) {
     .mdw-layout__navdrawer-show,
     .mdw-layout__navdrawer-hide,
@@ -791,36 +821,36 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
   .mdw-layout__body[mdw-navdrawer-style~="clipped"],
   .mdw-layout__body[mdw-sidesheet-style~="clipped"] {
-    overflow-y: $mdw-layout__body-overflow-y;
+    overflow-y: $bodyOverflowY;
 
     & > .mdw-layout__content {
-      overflow-y: $mdw-layout__content-overflow-y;
+      overflow-y: $contentOverflowY;
     }
   }
 
   .mdw-layout__fab[mdw-desktop] {
     &[aria-hidden="false"] .mdw-fab {
-      transition-duration: $mdw-motion__expand-duration;
-      transition-timing-function: $mdw-motion__decelerate-easing;
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
 
       transform: scale(1);
     }
 
     &:not([mdw-desktop="appbar"]) ~ .mdw-layout__content {
-      padding-bottom: #{$mdw-layout__fab-size + dp(24)};
+      padding-bottom: #{$fabSize + dp(24)};
     }
   }
 
   .mdw-layout__fab[mdw-desktop="appbar"] {
-    @include mdw-layout__grid-row($mdw-layout__top-row);
+    @include gridRow($rowTop);
     top: 0;
     bottom: auto;
 
     transform: translateY(100%);
 
     &[aria-hidden="false"] .mdw-fab {
-      transition-duration: $mdw-motion__expand-duration;
-      transition-timing-function: $mdw-motion__decelerate-easing;
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
 
       transform: translateY(-50%) scale(1);
     }
@@ -856,34 +886,34 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
 
   .mdw-layout__body[mdw-navdrawer-style~="clipped"] .mdw-layout__navdrawer,
   .mdw-layout__body[mdw-sidesheet-style~="clipped"] .mdw-layout__sidesheet {
-    @include mdw-layout__grid-row($mdw-layout__banner-row, $mdw-layout__bottom-row);
+    @include gridRow($rowBanner, $rowBottom);
     z-index: 0;
   }
   
   .mdw-layout__body[mdw-navdrawer-style~="clipped"] {
     .mdw-layout__appbar,
     .mdw-layout__fab[mdw-desktop="appbar"] {
-      @include mdw-layout__grid-column($mdw-layout__navdrawer-column, $mdw-layout__content-column);
+      @include gridColumn($columnNavDrawer, $columnContent);
     }
   }
 
   .mdw-layout__body[mdw-sidesheet-style~="clipped"] {
     .mdw-layout__appbar,
     .mdw-layout__fab[mdw-desktop="appbar"] {
-      @include mdw-layout__grid-column($mdw-layout__content-column, $mdw-layout__sidesheet-column);
+      @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 mdw-layout__grid-column($mdw-layout__navdrawer-column, $mdw-layout__sidesheet-column);
+      @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 mdw-layout__grid-row($mdw-layout__content-row, $mdw-layout__bottom-row);
+    @include gridRow($rowContent, $rowBottom);
 
     & .mdw-layout__sheet-content {
       height: auto;
@@ -894,21 +924,21 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
   .mdw-layout__body[mdw-navdrawer-style~="floating"] {
     .mdw-layout__banner,
     .mdw-layout__bottomnav {
-      @include mdw-layout__grid-column($mdw-layout__navdrawer-column, $mdw-layout__content-column);
+      @include gridColumn($columnNavDrawer, $columnContent);
     }
   }
 
   .mdw-layout__body[mdw-sidesheet-style~="floating"] {
     .mdw-layout__banner,
     .mdw-layout__bottomnav {
-      @include mdw-layout__grid-column($mdw-layout__content-column, $mdw-layout__sidesheet-column);
+      @include gridColumn($columnContent, $columnSideSheet);
     }
   }
 
   .mdw-layout__body[mdw-navdrawer-style~="floating"][mdw-sidesheet-style~="floating"] {
     .mdw-layout__banner,
     .mdw-layout__bottomnav {
-      @include mdw-layout__grid-column($mdw-layout__navdrawer-column, $mdw-layout__sidesheet-column);
+      @include gridColumn($columnNavDrawer, $columnSideSheet);
     }
   }
 
@@ -918,7 +948,7 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     padding: dp(24) 0;
 
     & > .mdw-layout__sheet-content {
-      box-shadow: mdwElevation(8);
+      box-shadow: elevation.boxShadow(8);
     }
   }
 
@@ -929,34 +959,34 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     margin-right: 0;
     margin-left: 0;
 
-    transition-duration: $mdw-motion__collapse-duration;
+    transition-duration: motion.$collapseDuration;
     transition-property: width, max-width, margin, transform, visibility;
-    transition-timing-function: $mdw-motion__accelerate-easing;
+    transition-timing-function: motion.$accelerateEasing;
     
     visibility: hidden;
 
     .mdw-layout__sheet-content {
-      box-shadow: mdwElevation(0);
+      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: $mdw-layout__sheet-max-width__mini;
-      width: $mdw-layout__sheet-max-width__mini;
+      max-width: $sheetMaxWidthMini;
+      width: $sheetMaxWidthMini;
 
-      transition-duration: $mdw-motion__collapse-duration;
-      transition-timing-function: $mdw-motion__accelerate-easing;
+      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: $mdw-layout__sheet-max-width__mini;
-      width: $mdw-layout__sheet-max-width__mini;
+      max-width: $sheetMaxWidthMini;
+      width: $sheetMaxWidthMini;
 
-      transition-duration: $mdw-motion__collapse-duration;
-      transition-timing-function: $mdw-motion__accelerate-easing;
+      transition-duration: motion.$collapseDuration;
+      transition-timing-function: motion.$accelerateEasing;
     }
   }
 
@@ -966,17 +996,17 @@ $mdw-layout__content-overflow-y__sticky: visible !default;
     .mdw-layout__appbar-shape {
       filter: none;
 
-      box-shadow: mdwElevation(0);
+      box-shadow: elevation.boxShadow(0);
     }
   }
 }
 
 @supports (position: sticky) or (position: -webkit-sticky) or (position: -moz-sticky) {
   .mdw-layout__body {
-    overflow-y: $mdw-layout__body-overflow-y__sticky;
+    overflow-y: $bodyOverflowYSticky;
 
     & > .mdw-layout__content {
-      overflow-y: $mdw-layout__content-overflow-y__sticky;
+      overflow-y: $contentOverflowYSticky;
     }
   }
 }