chore(): add mat- prefixes to all our md- prefixed classes (ignoring …

…typography for now) (#912)

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";

src/platform/core/common/styles/_content.scss

@@ -2,26 +2,35 @@
 mat-sidenav-container {
   & > md-content,
   & > [md-content],
-  & > .md-content {
+  & > .md-content,
+  & > mat-content,
+  & > [mat-content],
+  & > .mat-content {
     height: 100%;
     overflow: hidden;
   }
 }
 
 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;
   }

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;

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
 

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;
   }
 }

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 {

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;