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(radio): 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: 4568b / 1034b gzip
Size after: 3245b (-29%) / 907b gzip (-12%)

PiperOrigin-RevId: 600928780
This commit is contained in:
Elizabeth Mitchell 2024-01-23 15:40:59 -08:00 committed by Copybara-Service
parent a2721c39d4
commit 044ee51d13
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
radio/internal/_radio.scss
View File

@ -32,31 +32,30 @@ $_md-sys-motion: tokens.md-sys-motion-values();
@mixin styles() { @mixin styles() {
$tokens: tokens.md-comp-radio-values(); $tokens: tokens.md-comp-radio-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-radio-#{$token}, #{$value}));
}
@layer { @layer {
:host { :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; display: inline-flex;
height: var(--_icon-size); height: map.get($tokens, 'icon-size');
outline: none; outline: none;
position: relative; position: relative;
vertical-align: top; // Fix extra space when placed inside display: block 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 // Remove highlight color for mobile Safari
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
cursor: pointer; 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]) { :host([disabled]) {
@ -64,7 +63,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
} }
:host([touch-target='wrapper']) { :host([touch-target='wrapper']) {
margin: max(0px, ((48px - var(--_icon-size)) / 2)); margin: max(0px, ((48px - map.get($tokens, 'icon-size')) / 2));
} }
.container { .container {
@ -84,10 +83,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
.checked { .checked {
@include ripple.theme( @include ripple.theme(
( (
hover-color: var(--_selected-hover-state-layer-color), hover-color: map.get($tokens, 'selected-hover-state-layer-color'),
hover-opacity: var(--_selected-hover-state-layer-opacity), hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),
pressed-color: var(--_selected-pressed-state-layer-color), pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),
pressed-opacity: var(--_selected-pressed-state-layer-opacity), pressed-opacity:
map.get($tokens, 'selected-pressed-state-layer-opacity'),
) )
); );
} }
@ -109,13 +109,13 @@ $_md-sys-motion: tokens.md-sys-motion-values();
md-ripple { md-ripple {
border-radius: 50%; border-radius: 50%;
height: var(--_state-layer-size); height: map.get($tokens, 'state-layer-size');
inset: unset; inset: unset;
width: var(--_state-layer-size); width: map.get($tokens, 'state-layer-size');
} }
.icon { .icon {
fill: var(--_icon-color); fill: map.get($tokens, 'icon-color');
inset: 0; inset: 0;
position: absolute; position: absolute;
} }
@ -132,7 +132,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
} }
.checked .icon { .checked .icon {
fill: var(--_selected-icon-color); fill: map.get($tokens, 'selected-icon-color');
} }
.checked .inner.circle { .checked .inner.circle {
@ -157,37 +157,37 @@ $_md-sys-motion: tokens.md-sys-motion-values();
} }
:host(:hover) .icon { :host(:hover) .icon {
fill: var(--_hover-icon-color); fill: map.get($tokens, 'hover-icon-color');
} }
:host(:focus-within) .icon { :host(:focus-within) .icon {
fill: var(--_focus-icon-color); fill: map.get($tokens, 'focus-icon-color');
} }
:host(:active) .icon { :host(:active) .icon {
fill: var(--_pressed-icon-color); fill: map.get($tokens, 'pressed-icon-color');
} }
:host([disabled]) .icon { :host([disabled]) .icon {
fill: var(--_disabled-unselected-icon-color); fill: map.get($tokens, 'disabled-unselected-icon-color');
opacity: var(--_disabled-unselected-icon-opacity); opacity: map.get($tokens, 'disabled-unselected-icon-opacity');
} }
:host(:hover) .checked .icon { :host(:hover) .checked .icon {
fill: var(--_selected-hover-icon-color); fill: map.get($tokens, 'selected-hover-icon-color');
} }
:host(:focus-within) .checked .icon { :host(:focus-within) .checked .icon {
fill: var(--_selected-focus-icon-color); fill: map.get($tokens, 'selected-focus-icon-color');
} }
:host(:active) .checked .icon { :host(:active) .checked .icon {
fill: var(--_selected-pressed-icon-color); fill: map.get($tokens, 'selected-pressed-icon-color');
} }
:host([disabled]) .checked .icon { :host([disabled]) .checked .icon {
fill: var(--_disabled-selected-icon-color); fill: map.get($tokens, 'disabled-selected-icon-color');
opacity: var(--_disabled-selected-icon-opacity); opacity: map.get($tokens, 'disabled-selected-icon-opacity');
} }
} }