mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
refactor(ripple): reduce CSS size
Reduces the size by removing private (`--_*`) custom properties. These are not needed since the component does not share styles across variants. Size before: 1293b / 532b gzip Size after: 1171b (-9%) / 502b gzip (-0.2%) PiperOrigin-RevId: 600917333
This commit is contained in:
parent
93071d47bd
commit
0eb0e94bdc
@ -26,12 +26,11 @@
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-ripple-values();
|
||||
@each $token, $value in $tokens {
|
||||
$tokens: map.set($tokens, $token, var(--md-ripple-#{$token}, #{$value}));
|
||||
}
|
||||
|
||||
:host {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: var(--md-ripple-#{$token}, #{$value});
|
||||
}
|
||||
|
||||
display: flex;
|
||||
margin: auto;
|
||||
pointer-events: none;
|
||||
@ -66,7 +65,7 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--_hover-color);
|
||||
background-color: map.get($tokens, 'hover-color');
|
||||
inset: 0;
|
||||
transition: opacity 15ms linear, background-color 15ms linear;
|
||||
}
|
||||
@ -75,7 +74,7 @@
|
||||
// press ripple fade-out
|
||||
background: radial-gradient(
|
||||
closest-side,
|
||||
var(--_pressed-color) max(calc(100% - 70px), 65%),
|
||||
map.get($tokens, 'pressed-color') max(calc(100% - 70px), 65%),
|
||||
transparent 100%
|
||||
);
|
||||
transform-origin: center center;
|
||||
@ -84,13 +83,13 @@
|
||||
}
|
||||
|
||||
.hovered::before {
|
||||
background-color: var(--_hover-color);
|
||||
opacity: var(--_hover-opacity);
|
||||
background-color: map.get($tokens, 'hover-color');
|
||||
opacity: map.get($tokens, 'hover-opacity');
|
||||
}
|
||||
|
||||
.pressed::after {
|
||||
// press ripple fade-in
|
||||
opacity: var(--_pressed-opacity);
|
||||
opacity: map.get($tokens, 'pressed-opacity');
|
||||
transition-duration: 105ms;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user