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