refactor(material/core): run sass module migration

Author: crisbeto

src/cdk/a11y/_a11y.import.scss

@@ -0,0 +1,2 @@
+@forward 'a11y' hide a11y, high-contrast;
+@forward 'a11y' as cdk-* hide cdk-optionally-nest-content;

src/cdk/a11y/_a11y.scss

@@ -1,4 +1,4 @@
-@mixin cdk-a11y {
+@mixin a11y {
   .cdk-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
@@ -42,7 +42,7 @@
 ///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
 ///     * `off` - works for `None`
 ///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).
-@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {
+@mixin high-contrast($target: active, $encapsulation: 'any') {
   @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
     @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
            'Allowed values are "active", "black-on-white", and "white-on-black"';

src/cdk/a11y/a11y-prebuilt.scss

@@ -1,3 +1,3 @@
-@import './a11y';
+@use './a11y';
 
-@include cdk-a11y();
+@include a11y.a11y();

src/cdk/overlay/_overlay.import.scss

@@ -0,0 +1,3 @@
+@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop, $z-index-overlay-container, overlay;
+@forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration, $cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
+@forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration, $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay, $cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay;

src/cdk/overlay/_overlay.scss

@@ -1,19 +1,19 @@
 // We want overlays to always appear over user content, so set a baseline
 // very high z-index for the overlay container, which is where we create the new
 // stacking context for all overlays.
-$cdk-z-index-overlay-container: 1000 !default;
-$cdk-z-index-overlay: 1000 !default;
-$cdk-z-index-overlay-backdrop: 1000 !default;
+$z-index-overlay-container: 1000 !default;
+$z-index-overlay: 1000 !default;
+$z-index-overlay-backdrop: 1000 !default;
 
 // Background color for all of the backdrops
-$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
+$dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
 $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
 
-@mixin cdk-overlay() {
+@mixin overlay() {
   .cdk-overlay-container, .cdk-global-overlay-wrapper {
     // Disable events from being captured on the overlay container.
     pointer-events: none;
@@ -28,7 +28,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // The overlay-container is an invisible element which contains all individual overlays.
   .cdk-overlay-container {
     position: fixed;
-    z-index: $cdk-z-index-overlay-container;
+    z-index: $z-index-overlay-container;
 
     &:empty {
       // Hide the element when it doesn't have any child nodes. This doesn't
@@ -44,7 +44,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   .cdk-global-overlay-wrapper {
     display: flex;
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
   }
 
   // A single overlay pane.
@@ -54,7 +54,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     position: absolute;
     pointer-events: auto;
     box-sizing: border-box;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
 
     // For connected-position overlays, we set `display: flex` in
     // order to force `max-width` and `max-height` to take effect.
@@ -71,7 +71,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     left: 0;
     right: 0;
 
-    z-index: $cdk-z-index-overlay-backdrop;
+    z-index: $z-index-overlay-backdrop;
     pointer-events: auto;
     -webkit-tap-highlight-color: transparent;
     transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
@@ -91,7 +91,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   }
 
   .cdk-overlay-dark-backdrop {
-    background: $cdk-overlay-dark-backdrop-background;
+    background: $dark-backdrop-background;
   }
 
   .cdk-overlay-transparent-backdrop {
@@ -108,7 +108,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // overlay element's size to fit within the viewport.
   .cdk-overlay-connected-position-bounding-box {
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    z-index: $z-index-overlay;
 
     // We use `display: flex` on this element exclusively for centering connected overlays.
     // When *not* centering, a top/left/bottom/right will be set which overrides the normal

src/cdk/overlay/overlay-prebuilt.scss

@@ -1,3 +1,3 @@
-@import './overlay';
+@use './overlay';
 
-@include cdk-overlay();
+@include overlay.overlay();

src/cdk/text-field/_text-field.import.scss

@@ -0,0 +1,3 @@
+@forward 'text-field' hide $autofill-color-frame-count, autofill-color, text-field;
+@forward 'text-field' as cdk-* hide $cdk-autofill-color-frame-count, cdk-autofill-color, cdk-textarea-autosize-measuring-base;
+@forward 'text-field' as cdk-text-field-* hide cdk-text-field-text-field, cdk-text-field-textarea-autosize-measuring-base;

src/cdk/text-field/_text-field.scss

@@ -1,5 +1,5 @@
 // Core styles that enable monitoring autofill state of text fields.
-@mixin cdk-text-field {
+@mixin text-field {
   // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
   // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
   // needed to prevent LibSass from stripping the keyframes out.
@@ -52,30 +52,30 @@
 }
 
 // Used to generate UIDs for keyframes used to change the text field autofill styles.
-$cdk-text-field-autofill-color-frame-count: 0;
+$autofill-color-frame-count: 0;
 
 // Mixin used to apply custom background and foreground colors to an autofilled text field.
 // Based on: https://stackoverflow.com/questions/2781549/
 // removing-input-background-colour-for-chrome-autocomplete#answer-37432260
-@mixin cdk-text-field-autofill-color($background, $foreground:'') {
-  @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {
+@mixin autofill-color($background, $foreground:'') {
+  @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
     to {
       background: $background;
       @if $foreground != '' { color: $foreground; }
     }
   }
 
   &:-webkit-autofill {
-    animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
+    animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
   }
 
   &.cdk-text-field-autofill-monitored:-webkit-autofill {
     // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
     // event won't fire.
     animation: cdk-text-field-autofill-start 0s 1ms,
-               cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
+               cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
   }
 
-  $cdk-text-field-autofill-color-frame-count:
-      $cdk-text-field-autofill-color-frame-count + 1 !global;
+  $autofill-color-frame-count:
+      $autofill-color-frame-count + 1 !global;
 }

src/cdk/text-field/text-field-prebuilt.scss

@@ -1,3 +1,3 @@
-@import 'text-field';
+@use 'text-field';
 
-@include cdk-text-field();
+@include text-field.text-field();

src/dev-app/datepicker/datepicker-demo.scss

@@ -1,4 +1,4 @@
-@import '../../material/datepicker/datepicker-theme';
+@use '../../material/datepicker/datepicker-theme';
 
 mat-calendar {
   width: 300px;
@@ -9,5 +9,5 @@ mat-calendar {
 }
 
 .demo-custom-range {
-  @include mat-date-range-colors(hotpink, teal, yellow, purple);
+  @include datepicker-theme.date-range-colors(hotpink, teal, yellow, purple);
 }