material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

chore(elevation): move private custom properties off of host

Browse Source 
Elevation doesn't have variant styles, but it still uses shorter private custom properties to reduce its CSS size. I added a comment explaining why and moved the custom properties into the inner shadow dom so they can't be set on the host.

No size changes.

PiperOrigin-RevId: 601128500
This commit is contained in:
Elizabeth Mitchell 2024-01-24 08:26:57 -08:00 committed by Copybara-Service
parent 044ee51d13
commit 901a5cbd12
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
elevation/internal/_elevation.scss
View File

@ -27,12 +27,11 @@
@mixin styles() {
$tokens: tokens.md-comp-elevation-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-elevation-#{$token}, #{$value}));
}
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-elevation-#{$token}, #{$value});
}
display: flex;
pointer-events: none;
}
@ -53,6 +52,13 @@
.shadow::after {
content: '';
transition-property: box-shadow, opacity;
// Elevation doesn't share styles with multiple variants, so we normally
// would not use private custom properties. However, these variables are
// repeated several times in the styles below, and a shorter custom property
// reduces the CSS size, minified and gzip.
--_level: #{map.get($tokens, 'level')};
--_shadow-color: #{map.get($tokens, 'shadow-color')};
}
// Key box shadow