Skip to content

Commit 3188791

Browse files
committed
handle CSS var elevation colors
1 parent 29abfb4 commit 3188791

File tree

1 file changed

+15
-1
lines changed

1 file changed

+15
-1
lines changed

src/material/core/style/_elevation.scss

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,21 @@ $prefix: 'mat-elevation-z';
3838
// Applies the correct css rules to an element to give it the elevation specified by $zValue.
3939
// The $zValue must be between 0 and 24.
4040
@mixin elevation($zValue, $color: $color) {
41-
@include mdc-elevation.elevation($zValue, $color);
41+
@if meta.type-of($color) == color {
42+
@include mdc-elevation.elevation($zValue, $color);
43+
} @else {
44+
// Copied from @material/elevation/_elevation-theme.scss#_box-shadow
45+
// TODO(mmalerba): Add support for graceful handling of CSS var color to MDC.
46+
$umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue);
47+
$penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue);
48+
$ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue);
49+
$box-shadow: (
50+
#{'#{$umbra-z-value} #{$color}'},
51+
#{'#{$penumbra-z-value} #{$color}'},
52+
#{$ambient-z-value} $color
53+
);
54+
@include mdc-elevation.shadow($box-shadow);
55+
}
4256
}
4357

4458
// Applies the elevation to an element in a manner that allows

0 commit comments

Comments
 (0)