Docs (Guides): Mat elevation guide

guides/mat-elevation.md

@@ -0,0 +1,33 @@
+# mat-elevation
+mat-elevation exists to give you separation between elements.
+All material design elements have resting elevations.
+[`Material design`](https://material.io/guidelines/material-design/elevation-shadows.html)
+explains how best to use elevation.
+
+
+Elevation is implemented with a class, simply adding the class `mat-elevation-z#` where # is the elevation number you want, 0-24.
+
+## Example
+<!-- example(elevation-overview) -->
+
+
+## Mixins
+In order to use the mixin for Elevation you must 
+`@import '~@angular/material/theming';`
+$zValue must be a value between 0 and 24, inclusive.
+`@include mat-elevation($zValue);`
+
+
+How to use the mixin 
+```scss
+.myClass {
+  @include mat-elevation(2);
+
+  &:active {
+    @include mat-elevation(8);
+  }
+}
+```
+
+## Deprecated
+The `mdElevation($zValue)` directive is deprecated.

src/examples/elevation-overview/elevation-overview-example.html

@@ -0,0 +1,5 @@
+<div class="dynamic">Hover over me!</div>
+
+<div>No Elevation</div>
+
+<div class="mat-elevation-z24">Static class for styling</div>

src/examples/elevation-overview/elevation-overview-example.scss

@@ -0,0 +1,21 @@
+@import '~@angular/material/theming';
+
+div {
+    width: auto;
+    display: block;
+    text-align: center;
+    height: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: lightblue;
+    margin-top: 10px;
+}
+
+
+.dynamic {
+    @include mat-elevation(2);
+
+    &:hover {
+        @include mat-elevation(8);
+    }
+}

src/examples/elevation-overview/elevation-overview-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'elevation-overview-example',
+  styleUrls: ['./elevation-overview-example.scss'],
+  templateUrl: './elevation-overview-example.html',
+})
+
+export class ElevationOverviewExample {}