material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +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() { @mixin styles() {
$tokens: tokens.md-comp-ripple-values(); $tokens: tokens.md-comp-ripple-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-ripple-#{$token}, #{$value}));
}
:host { :host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-ripple-#{$token}, #{$value});
}
display: flex; display: flex;
margin: auto; margin: auto;
pointer-events: none; pointer-events: none;
@ -66,7 +65,7 @@
} }
&::before { &::before {
background-color: var(--_hover-color); background-color: map.get($tokens, 'hover-color');
inset: 0; inset: 0;
transition: opacity 15ms linear, background-color 15ms linear; transition: opacity 15ms linear, background-color 15ms linear;
} }
@ -75,7 +74,7 @@
// press ripple fade-out // press ripple fade-out
background: radial-gradient( background: radial-gradient(
closest-side, closest-side,
var(--_pressed-color) max(calc(100% - 70px), 65%), map.get($tokens, 'pressed-color') max(calc(100% - 70px), 65%),
transparent 100% transparent 100%
); );
transform-origin: center center; transform-origin: center center;
@ -84,13 +83,13 @@
} }
.hovered::before { .hovered::before {
background-color: var(--_hover-color); background-color: map.get($tokens, 'hover-color');
opacity: var(--_hover-opacity); opacity: map.get($tokens, 'hover-opacity');
} }
.pressed::after { .pressed::after {
// press ripple fade-in // press ripple fade-in
opacity: var(--_pressed-opacity); opacity: map.get($tokens, 'pressed-opacity');
transition-duration: 105ms; transition-duration: 105ms;
} }
} }