mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
refactor(radio): 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: 4568b / 1034b gzip Size after: 3245b (-29%) / 907b gzip (-12%) PiperOrigin-RevId: 600928780
This commit is contained in:
parent
a2721c39d4
commit
044ee51d13
@ -32,31 +32,30 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-radio-values();
|
||||
@each $token, $value in $tokens {
|
||||
$tokens: map.set($tokens, $token, var(--md-radio-#{$token}, #{$value}));
|
||||
}
|
||||
|
||||
@layer {
|
||||
:host {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: var(--md-radio-#{$token}, #{$value});
|
||||
}
|
||||
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-color: var(--_hover-state-layer-color),
|
||||
hover-opacity: var(--_hover-state-layer-opacity),
|
||||
pressed-color: var(--_pressed-state-layer-color),
|
||||
pressed-opacity: var(--_pressed-state-layer-opacity),
|
||||
)
|
||||
);
|
||||
|
||||
display: inline-flex;
|
||||
height: var(--_icon-size);
|
||||
height: map.get($tokens, 'icon-size');
|
||||
outline: none;
|
||||
position: relative;
|
||||
vertical-align: top; // Fix extra space when placed inside display: block
|
||||
width: var(--_icon-size);
|
||||
width: map.get($tokens, 'icon-size');
|
||||
// Remove highlight color for mobile Safari
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-color: map.get($tokens, 'hover-state-layer-color'),
|
||||
hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
|
||||
pressed-color: map.get($tokens, 'pressed-state-layer-color'),
|
||||
pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
@ -64,7 +63,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
}
|
||||
|
||||
:host([touch-target='wrapper']) {
|
||||
margin: max(0px, ((48px - var(--_icon-size)) / 2));
|
||||
margin: max(0px, ((48px - map.get($tokens, 'icon-size')) / 2));
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -84,10 +83,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
.checked {
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-color: var(--_selected-hover-state-layer-color),
|
||||
hover-opacity: var(--_selected-hover-state-layer-opacity),
|
||||
pressed-color: var(--_selected-pressed-state-layer-color),
|
||||
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
|
||||
hover-color: map.get($tokens, 'selected-hover-state-layer-color'),
|
||||
hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),
|
||||
pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),
|
||||
pressed-opacity:
|
||||
map.get($tokens, 'selected-pressed-state-layer-opacity'),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -109,13 +109,13 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
|
||||
md-ripple {
|
||||
border-radius: 50%;
|
||||
height: var(--_state-layer-size);
|
||||
height: map.get($tokens, 'state-layer-size');
|
||||
inset: unset;
|
||||
width: var(--_state-layer-size);
|
||||
width: map.get($tokens, 'state-layer-size');
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--_icon-color);
|
||||
fill: map.get($tokens, 'icon-color');
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
@ -132,7 +132,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
}
|
||||
|
||||
.checked .icon {
|
||||
fill: var(--_selected-icon-color);
|
||||
fill: map.get($tokens, 'selected-icon-color');
|
||||
}
|
||||
|
||||
.checked .inner.circle {
|
||||
@ -157,37 +157,37 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
}
|
||||
|
||||
:host(:hover) .icon {
|
||||
fill: var(--_hover-icon-color);
|
||||
fill: map.get($tokens, 'hover-icon-color');
|
||||
}
|
||||
|
||||
:host(:focus-within) .icon {
|
||||
fill: var(--_focus-icon-color);
|
||||
fill: map.get($tokens, 'focus-icon-color');
|
||||
}
|
||||
|
||||
:host(:active) .icon {
|
||||
fill: var(--_pressed-icon-color);
|
||||
fill: map.get($tokens, 'pressed-icon-color');
|
||||
}
|
||||
|
||||
:host([disabled]) .icon {
|
||||
fill: var(--_disabled-unselected-icon-color);
|
||||
opacity: var(--_disabled-unselected-icon-opacity);
|
||||
fill: map.get($tokens, 'disabled-unselected-icon-color');
|
||||
opacity: map.get($tokens, 'disabled-unselected-icon-opacity');
|
||||
}
|
||||
|
||||
:host(:hover) .checked .icon {
|
||||
fill: var(--_selected-hover-icon-color);
|
||||
fill: map.get($tokens, 'selected-hover-icon-color');
|
||||
}
|
||||
|
||||
:host(:focus-within) .checked .icon {
|
||||
fill: var(--_selected-focus-icon-color);
|
||||
fill: map.get($tokens, 'selected-focus-icon-color');
|
||||
}
|
||||
|
||||
:host(:active) .checked .icon {
|
||||
fill: var(--_selected-pressed-icon-color);
|
||||
fill: map.get($tokens, 'selected-pressed-icon-color');
|
||||
}
|
||||
|
||||
:host([disabled]) .checked .icon {
|
||||
fill: var(--_disabled-selected-icon-color);
|
||||
opacity: var(--_disabled-selected-icon-opacity);
|
||||
fill: map.get($tokens, 'disabled-selected-icon-color');
|
||||
opacity: map.get($tokens, 'disabled-selected-icon-opacity');
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user