mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
chore(elevation): move private custom properties off of host
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:
parent
044ee51d13
commit
901a5cbd12
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user