Skip to content

Commit ffa1089

Browse files
committed
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.
1 parent 3571f68 commit ffa1089

File tree

6 files changed

+19
-19
lines changed

6 files changed

+19
-19
lines changed

src/lib/button/_button-base.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ $mat-mini-fab-padding: 8px !default;
6666
%mat-raised-button {
6767
@extend %mat-button-base;
6868

69-
@include mat-elevation(2);
69+
@include mat-overridable-elevation(2);
7070

7171
// Force hardware acceleration.
7272
transform: translate3d(0, 0, 0);
@@ -76,7 +76,7 @@ $mat-mini-fab-padding: 8px !default;
7676
mat-elevation-transition-property-value();
7777

7878
&:not([disabled]):active {
79-
@include mat-elevation(8);
79+
@include mat-overridable-elevation(8);
8080
}
8181

8282
&[disabled] {
@@ -88,7 +88,7 @@ $mat-mini-fab-padding: 8px !default;
8888
@mixin mat-fab($size, $padding) {
8989
@extend %mat-raised-button;
9090

91-
@include mat-elevation(6);
91+
@include mat-overridable-elevation(6);
9292

9393
// Reset the min-width from the button base.
9494
min-width: 0;
@@ -101,7 +101,7 @@ $mat-mini-fab-padding: 8px !default;
101101
flex-shrink: 0;
102102

103103
&:not([disabled]):active {
104-
@include mat-elevation(12);
104+
@include mat-overridable-elevation(12);
105105
}
106106

107107
.mat-button-wrapper {

src/lib/card/card.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,12 @@ $mat-card-header-size: 40px !default;
1010

1111
.mat-card {
1212
@include mat-elevation-transition;
13+
@include mat-overridable-elevation(2);
1314
display: block;
1415
position: relative;
1516
padding: $mat-card-default-padding;
1617
border-radius: $mat-card-border-radius;
1718

18-
&:not([class*='mat-elevation-z']) {
19-
@include mat-elevation(2);
20-
}
21-
2219
@include cdk-high-contrast {
2320
outline: solid 1px;
2421
}

src/lib/core/_core.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
// `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
2020
// elevated.
2121
@for $zValue from 0 through 24 {
22-
.mat-elevation-z#{$zValue} {
22+
.#{$_mat-elevation-prefix}#{$zValue} {
2323
@include mat-elevation($zValue);
2424
}
2525
}

src/lib/core/style/_elevation.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,9 @@ $mat-elevation-transition-duration: 280ms !default;
126126
// The default easing value for elevation transitions.
127127
$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;
128128

129+
// Prefix for elevation-related selectors.
130+
$_mat-elevation-prefix: 'mat-elevation-z';
131+
129132
// Applies the correct css rules to an element to give it the elevation specified by $zValue.
130133
// The $zValue must be between 0 and 24.
131134
@mixin mat-elevation($zValue) {
@@ -141,6 +144,14 @@ $mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function
141144
#{map-get($_ambient-elevation-map, $zValue)};
142145
}
143146

147+
// Applies the elevation to an element in a manner that allows
148+
// consumers to override it via the Material elevation classes.
149+
@mixin mat-overridable-elevation($zValue) {
150+
&:not([class*='#{$_mat-elevation-prefix}']) {
151+
@include mat-elevation($zValue);
152+
}
153+
}
154+
144155
// Returns a string that can be used as the value for a transition property for elevation.
145156
// Calling this function directly is useful in situations where a component needs to transition
146157
// more than one property.

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,9 @@ $mat-menu-icon-margin: 16px !default;
1414

1515

1616
@mixin mat-menu-base($default-elevation) {
17+
@include mat-overridable-elevation($default-elevation);
1718
min-width: $mat-menu-overlay-min-width;
1819
max-width: $mat-menu-overlay-max-width;
19-
20-
// Allow elevation to be overwritten.
21-
&:not([class*='mat-elevation-z']) {
22-
@include mat-elevation($default-elevation);
23-
}
24-
2520
overflow: auto;
2621
-webkit-overflow-scrolling: touch; // for momentum scroll on mobile
2722
}

src/lib/expansion/expansion-panel.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@
33

44
.mat-expansion-panel {
55
@include mat-elevation-transition;
6+
@include mat-overridable-elevation(2);
67
box-sizing: content-box;
78
display: block;
89
margin: 0;
910
transition: margin 225ms $mat-fast-out-slow-in-timing-function;
10-
11-
&:not([class*='mat-elevation-z']) {
12-
@include mat-elevation(2);
13-
}
1411
}
1512

1613
.mat-expansion-panel-content {

0 commit comments

Comments
 (0)