fix(button): allow for elevation to be overwritten

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

Fixes #7264.

Author: crisbeto

src/lib/button/_button-base.scss

@@ -66,7 +66,9 @@ $mat-mini-fab-padding: 8px !default;
 %mat-raised-button {
   @extend %mat-button-base;
 
-  @include mat-elevation(2);
+  &:not([class*='#{$_mat-elevation-prefix}']) {
+    @include mat-elevation(2);
+  }
 
   // Force hardware acceleration.
   transform: translate3d(0, 0, 0);
@@ -75,7 +77,7 @@ $mat-mini-fab-padding: 8px !default;
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
 
-  &:not([disabled]):active {
+  &:not([disabled]):not([class*='#{$_mat-elevation-prefix}']):active {
     @include mat-elevation(8);
   }
 
@@ -88,7 +90,9 @@ $mat-mini-fab-padding: 8px !default;
 @mixin mat-fab($size, $padding) {
   @extend %mat-raised-button;
 
-  @include mat-elevation(6);
+  &:not([class*='#{$_mat-elevation-prefix}']) {
+    @include mat-elevation(6);
+  }
 
   // Reset the min-width from the button base.
   min-width: 0;
@@ -100,7 +104,7 @@ $mat-mini-fab-padding: 8px !default;
 
   flex-shrink: 0;
 
-  &:not([disabled]):active {
+  &:not([disabled]):not([class*='#{$_mat-elevation-prefix}']):active {
     @include mat-elevation(12);
   }
 

src/lib/card/card.scss

@@ -15,7 +15,7 @@ $mat-card-header-size: 40px !default;
   padding: $mat-card-default-padding;
   border-radius: $mat-card-border-radius;
 
-  &:not([class*='mat-elevation-z']) {
+  &:not([class*='#{$_mat-elevation-prefix}']) {
     @include mat-elevation(2);
   }
 

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

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) {

src/lib/core/style/_menu-common.scss

@@ -18,7 +18,7 @@ $mat-menu-icon-margin: 16px !default;
   max-width: $mat-menu-overlay-max-width;
 
   // Allow elevation to be overwritten.
-  &:not([class*='mat-elevation-z']) {
+  &:not([class*='#{$_mat-elevation-prefix}']) {
     @include mat-elevation($default-elevation);
   }
 

src/lib/expansion/expansion-panel.scss

@@ -8,7 +8,7 @@
   margin: 0;
   transition: margin 225ms $mat-fast-out-slow-in-timing-function;
 
-  &:not([class*='mat-elevation-z']) {
+  &:not([class*='#{$_mat-elevation-prefix}']) {
     @include mat-elevation(2);
   }
 }