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

refactor(ripple): reduce CSS size

Browse Source 
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:
Elizabeth Mitchell 2024-01-23 15:01:03 -08:00 committed by Copybara-Service
parent 93071d47bd
commit 0eb0e94bdc
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ripple/internal/_ripple.scss
View File

@ -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;
}
}