Skip to content

Commit 564a63b

Browse files
crisbetocrisbeto
authored
refactor(material/core): simplify elevation styles (#29462)
Simplifies the elevation styles to make them more maintainable.
1 parent a5d2c75 commit 564a63b

File tree

1 file changed

+116
-27
lines changed

1 file changed

+116
-27
lines changed

‎src/material/core/style/_elevation.scss

Lines changed: 116 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,96 @@
11
@use 'sass:map';
2+
@use 'sass:math';
23
@use 'sass:meta';
3-
@use 'variables';
4-
@use '@material/elevation/elevation-theme' as mdc-elevation;
4+
@use 'sass:string';
5+
@use './variables';
6+
7+
$_umbra-opacity: 0.2;
8+
$_penumbra-opacity: 0.14;
9+
$_ambient-opacity: 0.12;
10+
11+
$_umbra-map: (
12+
0: '0px 0px 0px 0px',
13+
1: '0px 2px 1px -1px',
14+
2: '0px 3px 1px -2px',
15+
3: '0px 3px 3px -2px',
16+
4: '0px 2px 4px -1px',
17+
5: '0px 3px 5px -1px',
18+
6: '0px 3px 5px -1px',
19+
7: '0px 4px 5px -2px',
20+
8: '0px 5px 5px -3px',
21+
9: '0px 5px 6px -3px',
22+
10: '0px 6px 6px -3px',
23+
11: '0px 6px 7px -4px',
24+
12: '0px 7px 8px -4px',
25+
13: '0px 7px 8px -4px',
26+
14: '0px 7px 9px -4px',
27+
15: '0px 8px 9px -5px',
28+
16: '0px 8px 10px -5px',
29+
17: '0px 8px 11px -5px',
30+
18: '0px 9px 11px -5px',
31+
19: '0px 9px 12px -6px',
32+
20: '0px 10px 13px -6px',
33+
21: '0px 10px 13px -6px',
34+
22: '0px 10px 14px -6px',
35+
23: '0px 11px 14px -7px',
36+
24: '0px 11px 15px -7px',
37+
);
38+
39+
$_penumbra-map: (
40+
0: '0px 0px 0px 0px',
41+
1: '0px 1px 1px 0px',
42+
2: '0px 2px 2px 0px',
43+
3: '0px 3px 4px 0px',
44+
4: '0px 4px 5px 0px',
45+
5: '0px 5px 8px 0px',
46+
6: '0px 6px 10px 0px',
47+
7: '0px 7px 10px 1px',
48+
8: '0px 8px 10px 1px',
49+
9: '0px 9px 12px 1px',
50+
10: '0px 10px 14px 1px',
51+
11: '0px 11px 15px 1px',
52+
12: '0px 12px 17px 2px',
53+
13: '0px 13px 19px 2px',
54+
14: '0px 14px 21px 2px',
55+
15: '0px 15px 22px 2px',
56+
16: '0px 16px 24px 2px',
57+
17: '0px 17px 26px 2px',
58+
18: '0px 18px 28px 2px',
59+
19: '0px 19px 29px 2px',
60+
20: '0px 20px 31px 3px',
61+
21: '0px 21px 33px 3px',
62+
22: '0px 22px 35px 3px',
63+
23: '0px 23px 36px 3px',
64+
24: '0px 24px 38px 3px',
65+
);
66+
67+
$_ambient-map: (
68+
0: '0px 0px 0px 0px',
69+
1: '0px 1px 3px 0px',
70+
2: '0px 1px 5px 0px',
71+
3: '0px 1px 8px 0px',
72+
4: '0px 1px 10px 0px',
73+
5: '0px 1px 14px 0px',
74+
6: '0px 1px 18px 0px',
75+
7: '0px 2px 16px 1px',
76+
8: '0px 3px 14px 2px',
77+
9: '0px 3px 16px 2px',
78+
10: '0px 4px 18px 3px',
79+
11: '0px 4px 20px 3px',
80+
12: '0px 5px 22px 4px',
81+
13: '0px 5px 24px 4px',
82+
14: '0px 5px 26px 4px',
83+
15: '0px 6px 28px 5px',
84+
16: '0px 6px 30px 5px',
85+
17: '0px 6px 32px 5px',
86+
18: '0px 7px 34px 6px',
87+
19: '0px 7px 36px 6px',
88+
20: '0px 8px 38px 7px',
89+
21: '0px 8px 40px 7px',
90+
22: '0px 8px 42px 7px',
91+
23: '0px 9px 44px 8px',
92+
24: '0px 9px 46px 8px',
93+
);
594

695
// A collection of mixins and CSS classes that can be used to apply elevation to a material
796
// element.
@@ -37,29 +126,7 @@ $prefix: 'mat-elevation-z';
37126
// Applies the correct css rules to an element to give it the elevation specified by $zValue.
38127
// The $zValue must be between 0 and 24.
39128
@mixin elevation($zValue, $color: $color, $opacity: null) {
40-
@if meta.type-of($color) == color and $opacity == null {
41-
@include mdc-elevation.elevation($zValue, $color);
42-
}
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-
50-
$color-opacity: if($opacity != null, $opacity, 1);
51-
$umbra-color: _compute-color-opacity($color, mdc-elevation.$umbra-opacity * $color-opacity);
52-
$penumbra-color:
53-
_compute-color-opacity($color, mdc-elevation.$penumbra-opacity * $color-opacity);
54-
$ambient-color: _compute-color-opacity($color, mdc-elevation.$ambient-opacity * $color-opacity);
55-
56-
$box-shadow: (
57-
#{'#{$umbra-z-value} #{$umbra-color}'},
58-
#{'#{$penumbra-z-value} #{$penumbra-color}'},
59-
#{$ambient-z-value} $ambient-color
60-
);
61-
@include mdc-elevation.shadow($box-shadow);
62-
}
129+
box-shadow: get-box-shadow($zValue, $color, $opacity);
63130
}
64131

65132
// Applies the elevation to an element in a manner that allows
@@ -71,8 +138,30 @@ $prefix: 'mat-elevation-z';
71138
}
72139

73140
// Gets the box shadow value for a specific elevation.
74-
@function get-box-shadow($z-value, $shadow-color: black) {
75-
@return mdc-elevation.elevation-box-shadow($z-value, $shadow-color);
141+
@function get-box-shadow($zValue, $shadow-color: black, $opacity: null) {
142+
@if $zValue == null {
143+
@return null;
144+
}
145+
146+
@if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
147+
@error '$zValue must be a unitless number, but received `#{$zValue}`';
148+
}
149+
150+
@if $zValue < 0 or $zValue > 24 {
151+
@error '$zValue must be between 0 and 24, but received `#{$zValue}`';
152+
}
153+
154+
$umbra-z-value: map.get($_umbra-map, $zValue);
155+
$penumbra-z-value: map.get($_penumbra-map, $zValue);
156+
$ambient-z-value: map.get($_ambient-map, $zValue);
157+
158+
$color-opacity: if($opacity != null, $opacity, 1);
159+
$umbra-color: _compute-color-opacity($shadow-color, $_umbra-opacity * $color-opacity);
160+
$penumbra-color: _compute-color-opacity($shadow-color, $_penumbra-opacity * $color-opacity);
161+
$ambient-color: _compute-color-opacity($shadow-color, $_ambient-opacity * $color-opacity);
162+
163+
@return string.unquote('#{$umbra-z-value} #{$umbra-color}, #{$penumbra-z-value} ' +
164+
'#{$penumbra-color}, #{$ambient-z-value} #{$ambient-color}');
76165
}
77166

78167
// Returns a string that can be used as the value for a transition property for elevation.

0 commit comments

Comments
 (0)