From 935554eef5ae1ae829dca64b5023b4aeafa1d13d Mon Sep 17 00:00:00 2001 From: Mac 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 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 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 + + + +# 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 @@ +
Hover over me!
+ +
No Elevation
+ +
Static class for styling
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 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 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 # 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 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 -# 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 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 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 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 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 @@ -
Hover over me!
+
Hover over me!
No Elevation
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 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 @@
Hover over me!
-
No Elevation
+
No Elevation
Static class for styling