From 658680a03ba6fa7f4b7e3361e2404b5588743d99 Mon Sep 17 00:00:00 2001
From: Ed Morales <emoralesb05@gmail.com>
Date: Thu, 5 Oct 2017 09:43:55 -0700
Subject: [PATCH] chore(): add mat- prefixes to all our md- prefixed classes
 (ignoring typography for now) (#912)

---
 src/platform/core/common/platform.scss        |   2 +-
 src/platform/core/common/styles/_content.scss |  17 ++-
 src/platform/core/common/styles/_mixins.scss  |  31 ++---
 src/platform/core/common/styles/_shadows.scss |   4 +-
 .../core/common/styles/_structure.scss        | 116 +++---------------
 .../core/common/styles/_typography.scss       |   8 +-
 .../core/common/styles/_variables.scss        |   2 +-
 .../core/common/styles/_whiteframe.scss       |  88 +++++--------
 .../core/common/styles/font/_font.scss        |  30 ++---
 src/platform/core/steps/_steps-theme.scss     |   2 +-
 10 files changed, 88 insertions(+), 212 deletions(-)

diff --git a/src/platform/core/common/platform.scss b/src/platform/core/common/platform.scss
index 24812d520a..8f10607ef6 100644
--- a/src/platform/core/common/platform.scss
+++ b/src/platform/core/common/platform.scss
@@ -1,4 +1,4 @@
-$md-font-url: 'styles/font/';
+$mat-font-url: 'styles/font/';
 @import "styles/font/font";
 @import "styles/variables";
 @import "styles/button";
diff --git a/src/platform/core/common/styles/_content.scss b/src/platform/core/common/styles/_content.scss
index 734f8a4e1d..40cc357f8e 100644
--- a/src/platform/core/common/styles/_content.scss
+++ b/src/platform/core/common/styles/_content.scss
@@ -2,7 +2,10 @@
 mat-sidenav-container {
   & > md-content,
   & > [md-content],
-  & > .md-content {
+  & > .md-content,
+  & > mat-content,
+  & > [mat-content],
+  & > .mat-content {
     height: 100%;
     overflow: hidden;
   }
@@ -10,18 +13,24 @@ mat-sidenav-container {
 
 md-content,
 [md-content],
-.md-content {
+.md-content,
+mat-content,
+[mat-content],
+.mat-content,
+ {
 
   display: block;
   position: relative;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 
-  &[md-scroll-y] {
+  &[md-scroll-y],
+  &.mat-scroll-y {
     overflow-y: auto;
     overflow-x: hidden;
   }
-  &[md-scroll-x] {
+  &[md-scroll-x],
+  &.mat-scroll-x {
     overflow-x: auto;
     overflow-y: hidden;
   }
diff --git a/src/platform/core/common/styles/_mixins.scss b/src/platform/core/common/styles/_mixins.scss
index 36aaf7d0e0..322c02ffb0 100644
--- a/src/platform/core/common/styles/_mixins.scss
+++ b/src/platform/core/common/styles/_mixins.scss
@@ -4,7 +4,7 @@
  * Mixin that creates a new stacking context.
  * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  */
-@mixin md-stacking-context() {
+@mixin mat-stacking-context() {
   position: relative;
 
   // Use a transform to create a new stacking context.
@@ -44,54 +44,37 @@
   }
 }
 
-@mixin md-shadow-bottom-z-1() {
+@mixin mat-shadow-bottom-z-1() {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 }
 
-@mixin md-shadow-bottom-z-2() {
+@mixin mat-shadow-bottom-z-2() {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
 }
 
-// Mixin for a "flat" input that can be used for components that contain an input
-// (datepicker, autocomplete).
-@mixin md-flat-input() {
-  font-size: 14px;
-
-  box-sizing: border-box;
-  border: none;
-  box-shadow: none;
-  outline: none;
-  background: transparent;
-
-  // The the "clear X" that IE adds to input[type="search"]
-  &::-ms-clear {
-    display: none;
-  }
-}
-
 // Typography mixins
 
-@mixin md-title() {
+@mixin mat-title() {
   font-size: $title-font-size-base;
   font-weight: 500;
   letter-spacing: 0.005em;
 }
 
-@mixin md-body-1() {
+@mixin mat-body-1() {
   font-size: $body-font-size-base;
   font-weight: 400;
   letter-spacing: 0.010em;
   line-height: rem(2);
 }
 
-@mixin md-body-2() {
+@mixin mat-body-2() {
   font-size: $body-font-size-base;
   font-weight: 500;
   letter-spacing: 0.010em;
   line-height: rem(2.4);
 }
 
-@mixin md-subhead() {
+@mixin mat-subhead() {
   font-size: $subhead-font-size-base;
   font-weight: 400;
   letter-spacing: 0.010em;
diff --git a/src/platform/core/common/styles/_shadows.scss b/src/platform/core/common/styles/_shadows.scss
index 585c74e9f5..bb2185e1e1 100644
--- a/src/platform/core/common/styles/_shadows.scss
+++ b/src/platform/core/common/styles/_shadows.scss
@@ -1,8 +1,8 @@
 // Elements can have an "elevation" from 1 to 5, signified by shadows.
 // See http://google.com/design/spec/what-is-material/objects-in-3d-space.html
 
-$md-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-$md-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+$mat-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+$mat-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
 
 // Whiteframes
 
diff --git a/src/platform/core/common/styles/_structure.scss b/src/platform/core/common/styles/_structure.scss
index 477c56cb31..80875db559 100644
--- a/src/platform/core/common/styles/_structure.scss
+++ b/src/platform/core/common/styles/_structure.scss
@@ -67,7 +67,8 @@ input {
   }
 }
 
-.md-visually-hidden {
+.md-visually-hidden,
+.mat-visually-hidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -79,7 +80,8 @@ input {
   width: 1px;
 }
 
-.md-shadow {
+.md-shadow,
+.mat-shadow {
   position: absolute;
   top: 0;
   left: 0;
@@ -89,120 +91,34 @@ input {
   pointer-events: none;
 }
 
-.md-shadow-bottom-z-1 {
+.md-shadow-bottom-z-1,
+.mat-shadow-bottom-z-1 {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 }
 
-.md-shadow-bottom-z-2 {
+.md-shadow-bottom-z-2,
+.mat-shadow-bottom-z-2{
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
 }
 
-.md-shadow-animated.md-shadow {
+.md-shadow-animated.md-shadow,
+.mat-shadow-animated.mat-shadow {
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/*
- * A container inside of a rippling element (eg a button),
- * which contains all of the individual ripples
- */
-.md-ripple-container {
-  pointer-events: none;
-  position: absolute;
-  overflow: hidden;  
-  left: 0;
-  [dir='rtl'] & {
-    right:0;
-    left: auto;
-  }
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-/*
- * A container inside of a rippling element (eg a button),
- * which contains all of the individual ripples
- */
-.md-ripple-container {
-  pointer-events: none;
-  position: absolute;
-  overflow: hidden;
-  left: 0;
-  [dir='rtl'] & {
-    right:0;
-    left: auto;
-  }
-  top: 0;
-  width: 100%;
-  height: 100%;
-  transition: all 0.55s $swift-ease-out-timing-function;
-}
-
-.md-ripple {
-  position: absolute;
-  transform: translate(-50%, -50%) scale(0);
-  transform-origin: 50% 50%;
-  opacity: 0;
-  border-radius: 50%;
-  &.md-ripple-placed {
-    $sizeDuration: 0.45s * 2;
-    transition: margin $sizeDuration $swift-ease-out-timing-function,
-    border $sizeDuration $swift-ease-out-timing-function,
-    width $sizeDuration $swift-ease-out-timing-function,
-    height $sizeDuration $swift-ease-out-timing-function,
-    opacity $sizeDuration $swift-ease-out-timing-function,
-    transform $sizeDuration $swift-ease-out-timing-function;
-  }
-  &.md-ripple-scaled {
-    transform: translate(-50%, -50%) scale(1);
-  }
-  &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
-    opacity: 0.20;
-  }
-}
-
-.md-padding {
+.md-padding,
+.mat-padding {
   padding: 8px;
 }
 
-.md-margin {
+.md-margin,
+.mat-margin {
   margin: 8px;
 }
 
-.md-scroll-mask {
-  position: absolute;
-  background-color: transparent;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  > .md-scroll-mask-bar {
-    display: block;
-    position: absolute;
-    background-color: #fafafa;    
-    right: 0;
-    [dir='rtl'] & {
-      left:0;
-      right: auto;
-    }
-    top: 0;
-    bottom: 0;
-    z-index: $z-index-scroll-mask;
-    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3)
-  }
-}
-
-.md-no-select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 @media (min-width: $layout-breakpoint-sm) {
-  .md-padding {
+  .md-padding,
+  .mat-padding {
     padding: 16px;
   }
 }
diff --git a/src/platform/core/common/styles/_typography.scss b/src/platform/core/common/styles/_typography.scss
index 1e79d25438..48d48842e4 100644
--- a/src/platform/core/common/styles/_typography.scss
+++ b/src/platform/core/common/styles/_typography.scss
@@ -73,22 +73,22 @@ body {
   }
 
   .md-title {
-    @include md-title();
+    @include mat-title();
   }
 
   .md-subhead {
-    @include md-subhead();
+    @include mat-subhead();
   }
 
   /************
   * Body Copy
   ************/
   .md-body-1 {
-    @include md-body-1();
+    @include mat-body-1();
   }
 
   .md-body-2 {
-    @include md-body-2();
+    @include mat-body-2();
   }
 
   .md-caption {
diff --git a/src/platform/core/common/styles/_variables.scss b/src/platform/core/common/styles/_variables.scss
index e96a2fb6d2..674b042f19 100644
--- a/src/platform/core/common/styles/_variables.scss
+++ b/src/platform/core/common/styles/_variables.scss
@@ -32,7 +32,7 @@ $layout-breakpoint-lg: 1920px !default;
 $layout-gutter-width: ($baseline-grid * 2) !default;
 
 // Typography
-$md-body-font-size-base: rem(1.400) !default;
+$mat-body-font-size-base: rem(1.400) !default;
 
 // App bar variables
 $app-bar-height: 64px;
diff --git a/src/platform/core/common/styles/_whiteframe.scss b/src/platform/core/common/styles/_whiteframe.scss
index be9f3fd25e..7d88810cc0 100644
--- a/src/platform/core/common/styles/_whiteframe.scss
+++ b/src/platform/core/common/styles/_whiteframe.scss
@@ -1,103 +1,71 @@
 @import 'shadows';
 
-.md-whiteframe-1dp, .md-whiteframe-z1 {
+.md-whiteframe-1dp, .md-whiteframe-z1,
+.mat-whiteframe-1dp, .mat-whiteframe-z1 {
   box-shadow: $whiteframe-shadow-1dp;
 }
 
-.md-whiteframe-2dp {
+.md-whiteframe-2dp,
+.mat-whiteframe-2dp {
   box-shadow: $whiteframe-shadow-2dp;
 }
 
-.md-whiteframe-3dp {
+.md-whiteframe-3dp,
+.mat-whiteframe-3dp {
   box-shadow: $whiteframe-shadow-3dp;
 }
 
-.md-whiteframe-4dp, .md-whiteframe-z2 {
+.md-whiteframe-4dp, .md-whiteframe-z2,
+.mat-whiteframe-4dp, .mat-whiteframe-z2 {
   box-shadow: $whiteframe-shadow-4dp;
 }
 
-.md-whiteframe-5dp {
+.md-whiteframe-5dp,
+.mat-whiteframe-5dp {
   box-shadow: $whiteframe-shadow-5dp;
 }
 
-.md-whiteframe-6dp {
+.md-whiteframe-6dp,
+.mat-whiteframe-6dp {
   box-shadow: $whiteframe-shadow-6dp;
 }
 
-.md-whiteframe-7dp, .md-whiteframe-z3 {
+.md-whiteframe-7dp, .md-whiteframe-z3,
+.mat-whiteframe-7dp, .mat-whiteframe-z3 {
   box-shadow: $whiteframe-shadow-7dp;
 }
 
-.md-whiteframe-8dp {
+.md-whiteframe-8dp,
+.mat-whiteframe-8dp {
   box-shadow: $whiteframe-shadow-8dp;
 }
 
-.md-whiteframe-9dp {
+.md-whiteframe-9dp,
+.mat-whiteframe-9dp {
   box-shadow: $whiteframe-shadow-9dp;
 }
 
-.md-whiteframe-10dp, .md-whiteframe-z4 {
+.md-whiteframe-10dp, .md-whiteframe-z4,
+.mat-whiteframe-10dp, .mat-whiteframe-z4 {
   box-shadow: $whiteframe-shadow-10dp;
 }
 
-.md-whiteframe-11dp {
+.md-whiteframe-11dp,
+.mat-whiteframe-11dp {
   box-shadow: $whiteframe-shadow-11dp;
 }
 
-.md-whiteframe-12dp {
+.md-whiteframe-12dp,
+.mat-whiteframe-12dp {
   box-shadow: $whiteframe-shadow-12dp;
 }
 
-.md-whiteframe-13dp, .md-whiteframe-z5 {
+.md-whiteframe-13dp, .md-whiteframe-z5,
+.mat-whiteframe-13dp, .mat-whiteframe-z5 {
   box-shadow: $whiteframe-shadow-13dp;
 }
 
-.md-whiteframe-14dp {
+.md-whiteframe-14dp,
+.mat-whiteframe-14dp {
   box-shadow: $whiteframe-shadow-14dp;
 }
-
-.md-whiteframe-15dp {
-  box-shadow: $whiteframe-shadow-15dp;
-}
-
-.md-whiteframe-16dp {
-  box-shadow: $whiteframe-shadow-16dp;
-}
-
-.md-whiteframe-17dp {
-  box-shadow: $whiteframe-shadow-17dp;
-}
-
-.md-whiteframe-18dp {
-  box-shadow: $whiteframe-shadow-18dp;
-}
-
-.md-whiteframe-19dp {
-  box-shadow: $whiteframe-shadow-19dp;
-}
-
-.md-whiteframe-20dp {
-  box-shadow: $whiteframe-shadow-20dp;
-}
-
-.md-whiteframe-21dp {
-  box-shadow: $whiteframe-shadow-21dp;
-}
-
-.md-whiteframe-22dp {
-  box-shadow: $whiteframe-shadow-22dp;
-}
-
-.md-whiteframe-23dp {
-  box-shadow: $whiteframe-shadow-23dp;
-}
-
-.md-whiteframe-24dp {
-  box-shadow: $whiteframe-shadow-24dp;
-}
-
-@media screen and (-ms-high-contrast: active) {
-  md-whiteframe {
-    border: 1px solid #fff;
-  }
-}
diff --git a/src/platform/core/common/styles/font/_font.scss b/src/platform/core/common/styles/font/_font.scss
index 02d29944f1..3f337b6c53 100644
--- a/src/platform/core/common/styles/font/_font.scss
+++ b/src/platform/core/common/styles/font/_font.scss
@@ -1,15 +1,15 @@
-$md-font-url: './' !default;
+$mat-font-url: './' !default;
 
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url($md-font-url + 'MaterialIcons-Regular.eot'); /* For IE6-8 */
-  src: local($md-font-url + 'Material Icons'),
-       local($md-font-url + 'MaterialIcons-Regular'),
-       url($md-font-url + 'MaterialIcons-Regular.woff2') format('woff2'),
-       url($md-font-url + 'MaterialIcons-Regular.woff') format('woff'),
-       url($md-font-url + 'MaterialIcons-Regular.ttf') format('truetype');
+  src: url($mat-font-url + 'MaterialIcons-Regular.eot'); /* For IE6-8 */
+  src: local($mat-font-url + 'Material Icons'),
+       local($mat-font-url + 'MaterialIcons-Regular'),
+       url($mat-font-url + 'MaterialIcons-Regular.woff2') format('woff2'),
+       url($mat-font-url + 'MaterialIcons-Regular.woff') format('woff'),
+       url($mat-font-url + 'MaterialIcons-Regular.ttf') format('truetype');
 }
 .material-icons {
   font-family: 'Material Icons';
@@ -47,15 +47,15 @@ mat-icon.material-icons {
 }
 
 // Rules for sizing the icon.
-.material-icons.md-18 { font-size: 18px; height:18px; width: 18px }
-.material-icons.md-24 { font-size: 24px; height:24px; width: 24px }
-.material-icons.md-36 { font-size: 36px; height:36px; width: 36px }
-.material-icons.md-48 { font-size: 48px; height:48px; width: 48px }
+.material-icons.md-18, .material-icons.mat-18 { font-size: 18px; height:18px; width: 18px }
+.material-icons.md-24, .material-icons.mat-24  { font-size: 24px; height:24px; width: 24px }
+.material-icons.md-36, .material-icons.mat-36  { font-size: 36px; height:36px; width: 36px }
+.material-icons.md-48, .material-icons.mat-48  { font-size: 48px; height:48px; width: 48px }
 
 // Rules for using icons as black on a light background.
-.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
-.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+.material-icons.md-dark, .material-icons.mat-dark { color: rgba(0, 0, 0, 0.54); }
+.material-icons.md-dark.md-inactive, .material-icons.mat-dark.mat-inactive { color: rgba(0, 0, 0, 0.26); }
 
 // Rules for using icons as white on a dark background.
-.material-icons.md-light { color: rgba(255, 255, 255, 1); }
-.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
+.material-icons.md-light, .material-icons.mat-light { color: rgba(255, 255, 255, 1); }
+.material-icons.md-light.md-inactive, .material-icons.mat-light.mat-inactive { color: rgba(255, 255, 255, 0.3); }
diff --git a/src/platform/core/steps/_steps-theme.scss b/src/platform/core/steps/_steps-theme.scss
index f9d60699f9..5446f772fe 100644
--- a/src/platform/core/steps/_steps-theme.scss
+++ b/src/platform/core/steps/_steps-theme.scss
@@ -30,7 +30,7 @@
         background: mat-color($background, 'hover');
       }
       .td-step-label-wrapper {
-        .md-caption {
+        .td-step-sublabel {
           color: mat-color($foreground, secondary-text);
         }
         &.mat-inactive {