From 92a868e40b998448c6bcd47aef83ed37514098ac Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Sep 2017 22:01:39 +0200
Subject: [PATCH] fix(button): allow for elevation to be overwritten (#7305)

Allows for the consumer to set the button elevation through the elevation classes, similarly to the menu, card and expansion components.

Fixes #7264.
---
 src/lib/button/_button-base.scss       |  8 ++++----
 src/lib/card/card.scss                 |  5 +----
 src/lib/core/_core.scss                |  2 +-
 src/lib/core/style/_elevation.scss     | 11 +++++++++++
 src/lib/core/style/_menu-common.scss   |  7 +------
 src/lib/expansion/expansion-panel.scss |  5 +----
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index cb15d5391fbb..44b9e39e3aa8 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -66,7 +66,7 @@ $mat-mini-fab-padding: 8px !default;
 %mat-raised-button {
   @extend %mat-button-base;
 
-  @include mat-elevation(2);
+  @include mat-overridable-elevation(2);
 
   // Force hardware acceleration.
   transform: translate3d(0, 0, 0);
@@ -76,7 +76,7 @@ $mat-mini-fab-padding: 8px !default;
               mat-elevation-transition-property-value();
 
   &:not([disabled]):active {
-    @include mat-elevation(8);
+    @include mat-overridable-elevation(8);
   }
 
   &[disabled] {
@@ -88,7 +88,7 @@ $mat-mini-fab-padding: 8px !default;
 @mixin mat-fab($size, $padding) {
   @extend %mat-raised-button;
 
-  @include mat-elevation(6);
+  @include mat-overridable-elevation(6);
 
   // Reset the min-width from the button base.
   min-width: 0;
@@ -101,7 +101,7 @@ $mat-mini-fab-padding: 8px !default;
   flex-shrink: 0;
 
   &:not([disabled]):active {
-    @include mat-elevation(12);
+    @include mat-overridable-elevation(12);
   }
 
   .mat-button-wrapper {
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index 584fef8af43c..cb627b841a9e 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -10,15 +10,12 @@ $mat-card-header-size: 40px !default;
 
 .mat-card {
   @include mat-elevation-transition;
+  @include mat-overridable-elevation(2);
   display: block;
   position: relative;
   padding: $mat-card-default-padding;
   border-radius: $mat-card-border-radius;
 
-  &:not([class*='mat-elevation-z']) {
-    @include mat-elevation(2);
-  }
-
   @include cdk-high-contrast {
     outline: solid 1px;
   }
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
index 7a4372719261..a4aef3daca70 100644
--- a/src/lib/core/_core.scss
+++ b/src/lib/core/_core.scss
@@ -19,7 +19,7 @@
   // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
   // elevated.
   @for $zValue from 0 through 24 {
-    .mat-elevation-z#{$zValue} {
+    .#{$_mat-elevation-prefix}#{$zValue} {
       @include mat-elevation($zValue);
     }
   }
diff --git a/src/lib/core/style/_elevation.scss b/src/lib/core/style/_elevation.scss
index 80dff61f1860..c8fa0de039ac 100644
--- a/src/lib/core/style/_elevation.scss
+++ b/src/lib/core/style/_elevation.scss
@@ -126,6 +126,9 @@ $mat-elevation-transition-duration: 280ms !default;
 // The default easing value for elevation transitions.
 $mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;
 
+// Prefix for elevation-related selectors.
+$_mat-elevation-prefix: 'mat-elevation-z';
+
 // Applies the correct css rules to an element to give it the elevation specified by $zValue.
 // The $zValue must be between 0 and 24.
 @mixin mat-elevation($zValue) {
@@ -141,6 +144,14 @@ $mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function
               #{map-get($_ambient-elevation-map, $zValue)};
 }
 
+// Applies the elevation to an element in a manner that allows
+// consumers to override it via the Material elevation classes.
+@mixin mat-overridable-elevation($zValue) {
+  &:not([class*='#{$_mat-elevation-prefix}']) {
+    @include mat-elevation($zValue);
+  }
+}
+
 // Returns a string that can be used as the value for a transition property for elevation.
 // Calling this function directly is useful in situations where a component needs to transition
 // more than one property.
diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss
index ba363b1bcaa9..74800cfec21f 100644
--- a/src/lib/core/style/_menu-common.scss
+++ b/src/lib/core/style/_menu-common.scss
@@ -14,14 +14,9 @@ $mat-menu-icon-margin: 16px !default;
 
 
 @mixin mat-menu-base($default-elevation) {
+  @include mat-overridable-elevation($default-elevation);
   min-width: $mat-menu-overlay-min-width;
   max-width: $mat-menu-overlay-max-width;
-
-  // Allow elevation to be overwritten.
-  &:not([class*='mat-elevation-z']) {
-    @include mat-elevation($default-elevation);
-  }
-
   overflow: auto;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 }
diff --git a/src/lib/expansion/expansion-panel.scss b/src/lib/expansion/expansion-panel.scss
index cbaa59dc7fbf..24215855ddeb 100644
--- a/src/lib/expansion/expansion-panel.scss
+++ b/src/lib/expansion/expansion-panel.scss
@@ -3,14 +3,11 @@
 
 .mat-expansion-panel {
   @include mat-elevation-transition;
+  @include mat-overridable-elevation(2);
   box-sizing: content-box;
   display: block;
   margin: 0;
   transition: margin 225ms $mat-fast-out-slow-in-timing-function;
-
-  &:not([class*='mat-elevation-z']) {
-    @include mat-elevation(2);
-  }
 }
 
 .mat-expansion-panel-content {