mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +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() {
|
@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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user