From 935554eef5ae1ae829dca64b5023b4aeafa1d13d Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Fri, 31 Mar 2017 14:57:45 -0700
Subject: [PATCH 01/11] added some basic information

---
 guides/md-elevation.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 guides/md-elevation.md

diff --git a/guides/md-elevation.md b/guides/md-elevation.md
new file mode 100644
index 000000000000..2dd8618396e4
--- /dev/null
+++ b/guides/md-elevation.md
@@ -0,0 +1,31 @@
+# md-elevation
+
+md-elevation exists to give you seperation between elements.
+All material design elements have resting elevations.
+
+In Angular material the elevation is implemented with a class.
+
+simply adding the class `md-elevation`
+
+
+# Examples
+
+
+
+# Mixins
+_elevation.scss
+$zValue must be a value between 0 and 24, inclusive.
+  `@include md-elevation($zValue);`
+
+
+How to use the mixin 
+`.myClass {
+   @include $mat-elevation(2);
+
+   &:active {
+     @include $mat-elevation(8);
+   }
+}`
+
+# Depercated
+The use of `mdElevation($zValue)` is depercated.
\ No newline at end of file

From a4a430c5b38d1a166c2afc43aef06747e7b1e900 Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Fri, 31 Mar 2017 17:01:51 -0700
Subject: [PATCH 02/11] fixed some spelling

---
 guides/md-elevation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guides/md-elevation.md b/guides/md-elevation.md
index 2dd8618396e4..346df41172df 100644
--- a/guides/md-elevation.md
+++ b/guides/md-elevation.md
@@ -15,7 +15,7 @@ simply adding the class `md-elevation`
 # Mixins
 _elevation.scss
 $zValue must be a value between 0 and 24, inclusive.
-  `@include md-elevation($zValue);`
+  `@include mat-elevation($zValue);`
 
 
 How to use the mixin 

From 3de91118bd20db049ae66df07a8c05ea467e39be Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Tue, 4 Apr 2017 19:14:57 -0700
Subject: [PATCH 03/11] added some examples there are still some problems

---
 guides/mat-elevation.md                       | 31 +++++++++++++++++++
 guides/md-elevation.md                        | 31 -------------------
 .../elevation-overview-example.css            | 18 +++++++++++
 .../elevation-overview-example.html           |  5 +++
 .../elevation-overview-example.ts             |  8 +++++
 5 files changed, 62 insertions(+), 31 deletions(-)
 create mode 100644 guides/mat-elevation.md
 delete mode 100644 guides/md-elevation.md
 create mode 100644 src/examples/elevation-overview/elevation-overview-example.css
 create mode 100644 src/examples/elevation-overview/elevation-overview-example.html
 create mode 100644 src/examples/elevation-overview/elevation-overview-example.ts

diff --git a/guides/mat-elevation.md b/guides/mat-elevation.md
new file mode 100644
index 000000000000..9badc2b8a3be
--- /dev/null
+++ b/guides/mat-elevation.md
@@ -0,0 +1,31 @@
+# mat-elevation
+mat-elevation exists to give you seperation 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`
+
+# Example
+<!-- example(elevation-overview) -->
+
+
+# Mixins
+_elevation.scss
+$zValue must be a value between 0 and 24, inclusive.
+  `@include mat-elevation($zValue);`
+
+
+How to use the mixin 
+` .myClass {
+   @include $mat-elevation(2);
+
+   &:active {
+     @include $mat-elevation(8);
+   }
+}
+`
+
+# Depercated
+The use of `mdElevation($zValue)` is depercated.
\ No newline at end of file
diff --git a/guides/md-elevation.md b/guides/md-elevation.md
deleted file mode 100644
index 346df41172df..000000000000
--- a/guides/md-elevation.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# md-elevation
-
-md-elevation exists to give you seperation between elements.
-All material design elements have resting elevations.
-
-In Angular material the elevation is implemented with a class.
-
-simply adding the class `md-elevation`
-
-
-# Examples
-
-
-
-# Mixins
-_elevation.scss
-$zValue must be a value between 0 and 24, inclusive.
-  `@include mat-elevation($zValue);`
-
-
-How to use the mixin 
-`.myClass {
-   @include $mat-elevation(2);
-
-   &:active {
-     @include $mat-elevation(8);
-   }
-}`
-
-# Depercated
-The use of `mdElevation($zValue)` is depercated.
\ No newline at end of file
diff --git a/src/examples/elevation-overview/elevation-overview-example.css b/src/examples/elevation-overview/elevation-overview-example.css
new file mode 100644
index 000000000000..969838237e5d
--- /dev/null
+++ b/src/examples/elevation-overview/elevation-overview-example.css
@@ -0,0 +1,18 @@
+div {
+    width: auto;
+    display: block;
+    text-align: center;
+    height: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: lightblue;
+    margin-top: 10px;
+}
+
+.dynamimc {
+    @include $mat-elevation(2);
+
+    &:active {
+        @include $mat-elevation(8);
+    }
+}
\ No newline at end of file
diff --git a/src/examples/elevation-overview/elevation-overview-example.html b/src/examples/elevation-overview/elevation-overview-example.html
new file mode 100644
index 000000000000..a2d3f34e5b0c
--- /dev/null
+++ b/src/examples/elevation-overview/elevation-overview-example.html
@@ -0,0 +1,5 @@
+<div class="dynamimc">Hover over me!</div>
+
+<div class"no-elevation">No Elevation</div>
+
+<div class="mat-elevation-z24">Static class for styling</div>
diff --git a/src/examples/elevation-overview/elevation-overview-example.ts b/src/examples/elevation-overview/elevation-overview-example.ts
new file mode 100644
index 000000000000..56bb48ebc92e
--- /dev/null
+++ b/src/examples/elevation-overview/elevation-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'elevation-overview-example',
+  style:'./elevation-overview-example.css',
+  templateUrl: './elevation-overview-example.html',
+})
+export class elevationOverviewExample {}

From 2033bb41902d404c45d9580b09abab3bb6147027 Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Wed, 5 Apr 2017 12:38:41 -0700
Subject: [PATCH 04/11] added an example

---
 ...ion-overview-example.css => elevation-overview-example.scss} | 2 ++
 1 file changed, 2 insertions(+)
 rename src/examples/elevation-overview/{elevation-overview-example.css => elevation-overview-example.scss} (83%)

diff --git a/src/examples/elevation-overview/elevation-overview-example.css b/src/examples/elevation-overview/elevation-overview-example.scss
similarity index 83%
rename from src/examples/elevation-overview/elevation-overview-example.css
rename to src/examples/elevation-overview/elevation-overview-example.scss
index 969838237e5d..5c0d6650567f 100644
--- a/src/examples/elevation-overview/elevation-overview-example.css
+++ b/src/examples/elevation-overview/elevation-overview-example.scss
@@ -1,3 +1,5 @@
+@import '~@angular/material/core/style/_elevation.scss';
+
 div {
     width: auto;
     display: block;

From 04dff5d3034c6bd089d14e171f3bad9301693931 Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Wed, 5 Apr 2017 12:44:27 -0700
Subject: [PATCH 05/11] fixed some spelling

---
 guides/mat-elevation.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/guides/mat-elevation.md b/guides/mat-elevation.md
index 9badc2b8a3be..469ad27453a1 100644
--- a/guides/mat-elevation.md
+++ b/guides/mat-elevation.md
@@ -1,20 +1,21 @@
 # mat-elevation
-mat-elevation exists to give you seperation between elements.
+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`
+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
-_elevation.scss
+In order to use the mixin for Elevation you must 
+`@import '~@angular/material/core/style/_elevation.scss';`
 $zValue must be a value between 0 and 24, inclusive.
-  `@include mat-elevation($zValue);`
+`@include mat-elevation($zValue);`
 
 
 How to use the mixin 
@@ -27,5 +28,5 @@ How to use the mixin
 }
 `
 
-# Depercated
-The use of `mdElevation($zValue)` is depercated.
\ No newline at end of file
+# Deprecated
+The use of `mdElevation($zValue)` is deprecated.
\ No newline at end of file

From 6160ef20b93acf6d2631b475dea4899db2b93447 Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Wed, 5 Apr 2017 12:55:27 -0700
Subject: [PATCH 06/11] added scss comment block

---
 guides/mat-elevation.md | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/guides/mat-elevation.md b/guides/mat-elevation.md
index 469ad27453a1..79b8fbb423aa 100644
--- a/guides/mat-elevation.md
+++ b/guides/mat-elevation.md
@@ -7,11 +7,11 @@ 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
 <!-- example(elevation-overview) -->
 
 
-# Mixins
+## Mixins
 In order to use the mixin for Elevation you must 
 `@import '~@angular/material/core/style/_elevation.scss';`
 $zValue must be a value between 0 and 24, inclusive.
@@ -19,14 +19,15 @@ $zValue must be a value between 0 and 24, inclusive.
 
 
 How to use the mixin 
-` .myClass {
-   @include $mat-elevation(2);
+```scss
+.myClass {
+  @include $mat-elevation(2);
 
-   &:active {
-     @include $mat-elevation(8);
-   }
+  &:active {
+    @include $mat-elevation(8);
+  }
 }
-`
+```
 
-# Deprecated
+## Deprecated
 The use of `mdElevation($zValue)` is deprecated.
\ No newline at end of file

From 9b73991fc0f753ed0c2566a8c829c9fcfd0220a7 Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Wed, 5 Apr 2017 13:21:44 -0700
Subject: [PATCH 07/11] fixed lint and made sure to link the style url

---
 .../elevation-overview/elevation-overview-example.ts         | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/examples/elevation-overview/elevation-overview-example.ts b/src/examples/elevation-overview/elevation-overview-example.ts
index 56bb48ebc92e..fd02c1253a50 100644
--- a/src/examples/elevation-overview/elevation-overview-example.ts
+++ b/src/examples/elevation-overview/elevation-overview-example.ts
@@ -2,7 +2,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'elevation-overview-example',
-  style:'./elevation-overview-example.css',
+  styleUrls: ['./elevation-overview-example.scss'],
   templateUrl: './elevation-overview-example.html',
 })
-export class elevationOverviewExample {}
+
+export class ElevationOverviewExample {}

From 3efe1ec5713531072d0e5baa56d4b0349d8d7f49 Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Thu, 6 Apr 2017 12:05:53 -0700
Subject: [PATCH 08/11] fixed link to theming

---
 guides/mat-elevation.md                                         | 2 +-
 src/examples/elevation-overview/elevation-overview-example.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/guides/mat-elevation.md b/guides/mat-elevation.md
index 79b8fbb423aa..01ce14ecbe8a 100644
--- a/guides/mat-elevation.md
+++ b/guides/mat-elevation.md
@@ -13,7 +13,7 @@ Elevation is implemented with a class, simply adding the class `mat-elevation-z#
 
 ## Mixins
 In order to use the mixin for Elevation you must 
-`@import '~@angular/material/core/style/_elevation.scss';`
+`@import '~@angular/material/theming';`
 $zValue must be a value between 0 and 24, inclusive.
 `@include mat-elevation($zValue);`
 
diff --git a/src/examples/elevation-overview/elevation-overview-example.scss b/src/examples/elevation-overview/elevation-overview-example.scss
index 5c0d6650567f..3cf2ec1fa7aa 100644
--- a/src/examples/elevation-overview/elevation-overview-example.scss
+++ b/src/examples/elevation-overview/elevation-overview-example.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/core/style/_elevation.scss';
+@import '~@angular/material/theming';
 
 div {
     width: auto;

From 0952077fc0e22217719a5b5b82346d63f52a1f9e Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Mon, 10 Apr 2017 16:00:20 -0700
Subject: [PATCH 09/11] docs (md elevation guide): $s removed from code.

---
 guides/mat-elevation.md                                      | 4 ++--
 .../elevation-overview/elevation-overview-example.scss       | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/guides/mat-elevation.md b/guides/mat-elevation.md
index 01ce14ecbe8a..53ef1d43510f 100644
--- a/guides/mat-elevation.md
+++ b/guides/mat-elevation.md
@@ -21,10 +21,10 @@ $zValue must be a value between 0 and 24, inclusive.
 How to use the mixin 
 ```scss
 .myClass {
-  @include $mat-elevation(2);
+  @include mat-elevation(2);
 
   &:active {
-    @include $mat-elevation(8);
+    @include mat-elevation(8);
   }
 }
 ```
diff --git a/src/examples/elevation-overview/elevation-overview-example.scss b/src/examples/elevation-overview/elevation-overview-example.scss
index 3cf2ec1fa7aa..3fca17da0ea6 100644
--- a/src/examples/elevation-overview/elevation-overview-example.scss
+++ b/src/examples/elevation-overview/elevation-overview-example.scss
@@ -11,10 +11,11 @@ div {
     margin-top: 10px;
 }
 
+
 .dynamimc {
-    @include $mat-elevation(2);
+    @include mat-elevation(2);
 
     &:active {
-        @include $mat-elevation(8);
+        @include mat-elevation(8);
     }
 }
\ No newline at end of file

From 8b54aabd9fd2a24be91b6ad37663d2875b8f6fa0 Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Thu, 13 Apr 2017 12:16:24 -0700
Subject: [PATCH 10/11] fixed spelling, and pr

---
 guides/mat-elevation.md                                       | 2 +-
 .../elevation-overview/elevation-overview-example.html        | 2 +-
 .../elevation-overview/elevation-overview-example.scss        | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/guides/mat-elevation.md b/guides/mat-elevation.md
index 53ef1d43510f..eacd655eb0b3 100644
--- a/guides/mat-elevation.md
+++ b/guides/mat-elevation.md
@@ -30,4 +30,4 @@ How to use the mixin
 ```
 
 ## Deprecated
-The use of `mdElevation($zValue)` is deprecated.
\ No newline at end of file
+The `mdElevation($zValue)` directive is deprecated.
\ No newline at end of file
diff --git a/src/examples/elevation-overview/elevation-overview-example.html b/src/examples/elevation-overview/elevation-overview-example.html
index a2d3f34e5b0c..2b960c61e1ae 100644
--- a/src/examples/elevation-overview/elevation-overview-example.html
+++ b/src/examples/elevation-overview/elevation-overview-example.html
@@ -1,4 +1,4 @@
-<div class="dynamimc">Hover over me!</div>
+<div class="dynamic">Hover over me!</div>
 
 <div class"no-elevation">No Elevation</div>
 
diff --git a/src/examples/elevation-overview/elevation-overview-example.scss b/src/examples/elevation-overview/elevation-overview-example.scss
index 3fca17da0ea6..b8e57b8d178f 100644
--- a/src/examples/elevation-overview/elevation-overview-example.scss
+++ b/src/examples/elevation-overview/elevation-overview-example.scss
@@ -12,10 +12,10 @@ div {
 }
 
 
-.dynamimc {
+.dynamic {
     @include mat-elevation(2);
 
-    &:active {
+    &:hover {
         @include mat-elevation(8);
     }
 }
\ No newline at end of file

From 2db4d3119d26bb15a224b25e7e460fb48037b47e Mon Sep 17 00:00:00 2001
From: Mac <Harlow44@hotmail.com>
Date: Thu, 13 Apr 2017 12:17:55 -0700
Subject: [PATCH 11/11] removed no-elevation class

---
 src/examples/elevation-overview/elevation-overview-example.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/examples/elevation-overview/elevation-overview-example.html b/src/examples/elevation-overview/elevation-overview-example.html
index 2b960c61e1ae..15da6028893b 100644
--- a/src/examples/elevation-overview/elevation-overview-example.html
+++ b/src/examples/elevation-overview/elevation-overview-example.html
@@ -1,5 +1,5 @@
 <div class="dynamic">Hover over me!</div>
 
-<div class"no-elevation">No Elevation</div>
+<div>No Elevation</div>
 
 <div class="mat-elevation-z24">Static class for styling</div>