From 951759e2954ee8bd514520becd1b0a4d27d7aa97 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 18 Nov 2022 09:46:30 +0100 Subject: [PATCH] fix(material/core): reintroduce opacity in elevation mixin During the switch to MDC the opacity parameter to the `elevation` mixin was removed which is a breaking change. It also isn't possible to achieve the same result by providing an `rgba` color, because MDC changes the color's opacity. Fixes #26004. --- src/material/core/style/_elevation.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/material/core/style/_elevation.scss b/src/material/core/style/_elevation.scss index b0079a093bf1..0b526b5a4ef1 100644 --- a/src/material/core/style/_elevation.scss +++ b/src/material/core/style/_elevation.scss @@ -36,20 +36,22 @@ $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 elevation($zValue, $color: $color) { - @if meta.type-of($color) == color { +@mixin elevation($zValue, $color: $color, $opacity: null) { + @if meta.type-of($color) == color and $opacity == null { @include mdc-elevation.elevation($zValue, $color); } @else { // Copied from @material/elevation/_elevation-theme.scss#_box-shadow // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC. + $shadow-color: + if(meta.type-of($color) == color and $opacity != null, rgba($color, $opacity), $color); $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue); $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue); $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue); $box-shadow: ( - #{'#{$umbra-z-value} #{$color}'}, - #{'#{$penumbra-z-value} #{$color}'}, - #{$ambient-z-value} $color + #{'#{$umbra-z-value} #{$shadow-color}'}, + #{'#{$penumbra-z-value} #{$shadow-color}'}, + #{$ambient-z-value} $shadow-color ); @include mdc-elevation.shadow($box-shadow); }