mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
refactor(switch): 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: 14,615b / 2,327b gzip Size after: 10,802 (-26%) / 1,865b gzip (-20%) PiperOrigin-RevId: 600918909
This commit is contained in:
parent
0eb0e94bdc
commit
a2721c39d4
@ -14,7 +14,7 @@
|
||||
$_md-sys-motion: tokens.md-sys-motion-values();
|
||||
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
||||
|
||||
@mixin styles() {
|
||||
@mixin styles($tokens) {
|
||||
@layer styles {
|
||||
.handle-container {
|
||||
display: flex;
|
||||
@ -25,7 +25,9 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
||||
transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
$margin: calc(var(--_track-width) - var(--_track-height));
|
||||
$margin: calc(
|
||||
map.get($tokens, 'track-width') - map.get($tokens, 'track-height')
|
||||
);
|
||||
|
||||
.selected .handle-container {
|
||||
margin-inline-start: $margin;
|
||||
@ -41,12 +43,12 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
||||
|
||||
.handle {
|
||||
// Handle shape
|
||||
border-start-start-radius: var(--_handle-shape-start-start);
|
||||
border-start-end-radius: var(--_handle-shape-start-end);
|
||||
border-end-end-radius: var(--_handle-shape-end-end);
|
||||
border-end-start-radius: var(--_handle-shape-end-start);
|
||||
height: var(--_handle-height);
|
||||
width: var(--_handle-width);
|
||||
border-start-start-radius: map.get($tokens, 'handle-shape-start-start');
|
||||
border-start-end-radius: map.get($tokens, 'handle-shape-start-end');
|
||||
border-end-end-radius: map.get($tokens, 'handle-shape-end-end');
|
||||
border-end-start-radius: map.get($tokens, 'handle-shape-end-start');
|
||||
height: map.get($tokens, 'handle-height');
|
||||
width: map.get($tokens, 'handle-width');
|
||||
|
||||
transform-origin: center;
|
||||
transition-property: height, width;
|
||||
@ -71,79 +73,82 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
||||
}
|
||||
|
||||
.selected .handle {
|
||||
height: var(--_selected-handle-height);
|
||||
width: var(--_selected-handle-width);
|
||||
height: map.get($tokens, 'selected-handle-height');
|
||||
width: map.get($tokens, 'selected-handle-width');
|
||||
}
|
||||
|
||||
.handle.with-icon {
|
||||
height: var(--_with-icon-handle-height);
|
||||
width: var(--_with-icon-handle-width);
|
||||
height: map.get($tokens, 'with-icon-handle-height');
|
||||
width: map.get($tokens, 'with-icon-handle-width');
|
||||
}
|
||||
|
||||
.selected:not(.disabled):active .handle,
|
||||
.unselected:not(.disabled):active .handle {
|
||||
height: var(--_pressed-handle-height);
|
||||
width: var(--_pressed-handle-width);
|
||||
height: map.get($tokens, 'pressed-handle-height');
|
||||
width: map.get($tokens, 'pressed-handle-width');
|
||||
transition-timing-function: linear;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.selected .handle::before {
|
||||
background-color: var(--_selected-handle-color);
|
||||
background-color: map.get($tokens, 'selected-handle-color');
|
||||
}
|
||||
|
||||
.selected:hover .handle::before {
|
||||
background-color: var(--_selected-hover-handle-color);
|
||||
background-color: map.get($tokens, 'selected-hover-handle-color');
|
||||
}
|
||||
|
||||
.selected:focus-within .handle::before {
|
||||
background-color: var(--_selected-focus-handle-color);
|
||||
background-color: map.get($tokens, 'selected-focus-handle-color');
|
||||
}
|
||||
|
||||
.selected:active .handle::before {
|
||||
background-color: var(--_selected-pressed-handle-color);
|
||||
background-color: map.get($tokens, 'selected-pressed-handle-color');
|
||||
}
|
||||
|
||||
.selected.disabled .handle::before {
|
||||
background-color: var(--_disabled-selected-handle-color);
|
||||
opacity: var(--_disabled-selected-handle-opacity);
|
||||
background-color: map.get($tokens, 'disabled-selected-handle-color');
|
||||
opacity: map.get($tokens, 'disabled-selected-handle-opacity');
|
||||
}
|
||||
|
||||
.unselected .handle::before {
|
||||
background-color: var(--_handle-color);
|
||||
background-color: map.get($tokens, 'handle-color');
|
||||
}
|
||||
|
||||
.unselected:hover .handle::before {
|
||||
background-color: var(--_hover-handle-color);
|
||||
background-color: map.get($tokens, 'hover-handle-color');
|
||||
}
|
||||
|
||||
.unselected:focus-within .handle::before {
|
||||
background-color: var(--_focus-handle-color);
|
||||
background-color: map.get($tokens, 'focus-handle-color');
|
||||
}
|
||||
|
||||
.unselected:active .handle::before {
|
||||
background-color: var(--_pressed-handle-color);
|
||||
background-color: map.get($tokens, 'pressed-handle-color');
|
||||
}
|
||||
|
||||
.unselected.disabled .handle::before {
|
||||
background-color: var(--_disabled-handle-color);
|
||||
opacity: var(--_disabled-handle-opacity);
|
||||
background-color: map.get($tokens, 'disabled-handle-color');
|
||||
opacity: map.get($tokens, 'disabled-handle-opacity');
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
border-radius: var(--_state-layer-shape);
|
||||
height: var(--_state-layer-size);
|
||||
border-radius: map.get($tokens, 'state-layer-shape');
|
||||
height: map.get($tokens, 'state-layer-size');
|
||||
inset: unset;
|
||||
width: var(--_state-layer-size);
|
||||
width: map.get($tokens, 'state-layer-size');
|
||||
}
|
||||
|
||||
.selected md-ripple {
|
||||
@include ripple.theme(
|
||||
(
|
||||
'hover-color': var(--_selected-hover-state-layer-color),
|
||||
'pressed-color': var(--_selected-pressed-state-layer-color),
|
||||
'hover-opacity': var(--_selected-hover-state-layer-opacity),
|
||||
'pressed-opacity': var(--_selected-pressed-state-layer-opacity),
|
||||
'hover-color': map.get($tokens, 'selected-hover-state-layer-color'),
|
||||
'pressed-color':
|
||||
map.get($tokens, 'selected-pressed-state-layer-color'),
|
||||
'hover-opacity':
|
||||
map.get($tokens, 'selected-hover-state-layer-opacity'),
|
||||
'pressed-opacity':
|
||||
map.get($tokens, 'selected-pressed-state-layer-opacity'),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -151,10 +156,10 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
||||
.unselected md-ripple {
|
||||
@include ripple.theme(
|
||||
(
|
||||
'hover-color': var(--_hover-state-layer-color),
|
||||
'pressed-color': var(--_pressed-state-layer-color),
|
||||
'hover-opacity': var(--_hover-state-layer-opacity),
|
||||
'pressed-opacity': var(--_pressed-state-layer-opacity),
|
||||
'hover-color': map.get($tokens, 'hover-state-layer-color'),
|
||||
'pressed-color': map.get($tokens, 'pressed-state-layer-color'),
|
||||
'hover-opacity': map.get($tokens, 'hover-state-layer-opacity'),
|
||||
'pressed-opacity': map.get($tokens, 'pressed-state-layer-opacity'),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -13,7 +13,7 @@
|
||||
$_md-sys-motion: tokens.md-sys-motion-values();
|
||||
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
||||
|
||||
@mixin styles() {
|
||||
@mixin styles($tokens) {
|
||||
@layer styles {
|
||||
.icons {
|
||||
position: relative;
|
||||
@ -50,49 +50,49 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
||||
}
|
||||
|
||||
.icon--off {
|
||||
width: var(--_icon-size);
|
||||
height: var(--_icon-size);
|
||||
color: var(--_icon-color);
|
||||
width: map.get($tokens, 'icon-size');
|
||||
height: map.get($tokens, 'icon-size');
|
||||
color: map.get($tokens, 'icon-color');
|
||||
}
|
||||
|
||||
.unselected:hover .icon--off {
|
||||
color: var(--_hover-icon-color);
|
||||
color: map.get($tokens, 'hover-icon-color');
|
||||
}
|
||||
|
||||
.unselected:focus-within .icon--off {
|
||||
color: var(--_focus-icon-color);
|
||||
color: map.get($tokens, 'focus-icon-color');
|
||||
}
|
||||
|
||||
.unselected:active .icon--off {
|
||||
color: var(--_pressed-icon-color);
|
||||
color: map.get($tokens, 'pressed-icon-color');
|
||||
}
|
||||
|
||||
.unselected.disabled .icon--off {
|
||||
color: var(--_disabled-icon-color);
|
||||
opacity: var(--_disabled-icon-opacity);
|
||||
color: map.get($tokens, 'disabled-icon-color');
|
||||
opacity: map.get($tokens, 'disabled-icon-opacity');
|
||||
}
|
||||
|
||||
.icon--on {
|
||||
width: var(--_selected-icon-size);
|
||||
height: var(--_selected-icon-size);
|
||||
color: var(--_selected-icon-color);
|
||||
width: map.get($tokens, 'selected-icon-size');
|
||||
height: map.get($tokens, 'selected-icon-size');
|
||||
color: map.get($tokens, 'selected-icon-color');
|
||||
}
|
||||
|
||||
.selected:hover .icon--on {
|
||||
color: var(--_selected-hover-icon-color);
|
||||
color: map.get($tokens, 'selected-hover-icon-color');
|
||||
}
|
||||
|
||||
.selected:focus-within .icon--on {
|
||||
color: var(--_selected-focus-icon-color);
|
||||
color: map.get($tokens, 'selected-focus-icon-color');
|
||||
}
|
||||
|
||||
.selected:active .icon--on {
|
||||
color: var(--_selected-pressed-icon-color);
|
||||
color: map.get($tokens, 'selected-pressed-icon-color');
|
||||
}
|
||||
|
||||
.selected.disabled .icon--on {
|
||||
color: var(--_disabled-selected-icon-color);
|
||||
opacity: var(--_disabled-selected-icon-opacity);
|
||||
color: map.get($tokens, 'disabled-selected-icon-color');
|
||||
opacity: map.get($tokens, 'disabled-selected-icon-opacity');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -43,48 +43,48 @@
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: tokens.md-comp-switch-values();
|
||||
@each $token, $value in $tokens {
|
||||
$tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value}));
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
$tokens: map.merge(
|
||||
$tokens,
|
||||
(
|
||||
'handle-shape-start-start':
|
||||
var(
|
||||
--md-switch-handle-shape-start-start,
|
||||
map.get($tokens, 'handle-shape')
|
||||
),
|
||||
'handle-shape-start-end':
|
||||
var(
|
||||
--md-switch-handle-shape-start-end,
|
||||
map.get($tokens, 'handle-shape')
|
||||
),
|
||||
'handle-shape-end-end':
|
||||
var(--md-switch-handle-shape-end-end, map.get($tokens, 'handle-shape')),
|
||||
'handle-shape-end-start':
|
||||
var(
|
||||
--md-switch-handle-shape-end-start,
|
||||
map.get($tokens, 'handle-shape')
|
||||
),
|
||||
'track-shape-start-start':
|
||||
var(
|
||||
--md-switch-track-shape-start-start,
|
||||
map.get($tokens, 'track-shape')
|
||||
),
|
||||
'track-shape-start-end':
|
||||
var(--md-switch-track-shape-start-end, map.get($tokens, 'track-shape')),
|
||||
'track-shape-end-end':
|
||||
var(--md-switch-track-shape-end-end, map.get($tokens, 'track-shape')),
|
||||
'track-shape-end-start':
|
||||
var(--md-switch-track-shape-end-start, map.get($tokens, 'track-shape')),
|
||||
)
|
||||
);
|
||||
|
||||
@layer styles, hcm;
|
||||
@layer styles {
|
||||
:host {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: var(--md-switch-#{$token}, #{$value});
|
||||
}
|
||||
|
||||
// Support logical shape properties
|
||||
--_handle-shape-start-start: var(
|
||||
--md-switch-handle-shape-start-start,
|
||||
var(--_handle-shape)
|
||||
);
|
||||
--_handle-shape-start-end: var(
|
||||
--md-switch-handle-shape-start-end,
|
||||
var(--_handle-shape)
|
||||
);
|
||||
--_handle-shape-end-end: var(
|
||||
--md-switch-handle-shape-end-end,
|
||||
var(--_handle-shape)
|
||||
);
|
||||
--_handle-shape-end-start: var(
|
||||
--md-switch-handle-shape-end-start,
|
||||
var(--_handle-shape)
|
||||
);
|
||||
--_track-shape-start-start: var(
|
||||
--md-switch-track-shape-start-start,
|
||||
var(--_track-shape)
|
||||
);
|
||||
--_track-shape-start-end: var(
|
||||
--md-switch-track-shape-start-end,
|
||||
var(--_track-shape)
|
||||
);
|
||||
--_track-shape-end-end: var(
|
||||
--md-switch-track-shape-end-end,
|
||||
var(--_track-shape)
|
||||
);
|
||||
--_track-shape-end-start: var(
|
||||
--md-switch-track-shape-end-start,
|
||||
var(--_track-shape)
|
||||
);
|
||||
|
||||
display: inline-flex;
|
||||
outline: none;
|
||||
vertical-align: top;
|
||||
@ -97,16 +97,16 @@
|
||||
}
|
||||
|
||||
:host([touch-target='wrapper']) {
|
||||
margin: max(0px, (48px - var(--_track-height)) / 2) 0px;
|
||||
margin: max(0px, (48px - map.get($tokens, 'track-height')) / 2) 0px;
|
||||
}
|
||||
|
||||
md-focus-ring {
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
'shape-start-start': var(--_track-shape-start-start),
|
||||
'shape-start-end': var(--_track-shape-start-end),
|
||||
'shape-end-end': var(--_track-shape-end-end),
|
||||
'shape-end-start': var(--_track-shape-end-start),
|
||||
'shape-start-start': map.get($tokens, 'track-shape-start-start'),
|
||||
'shape-start-end': map.get($tokens, 'track-shape-start-end'),
|
||||
'shape-end-end': map.get($tokens, 'track-shape-end-end'),
|
||||
'shape-end-start': map.get($tokens, 'track-shape-end-start'),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -116,14 +116,14 @@
|
||||
display: inline-flex;
|
||||
flex-shrink: 0; // Stop from collapsing in flex containers
|
||||
position: relative;
|
||||
width: var(--_track-width);
|
||||
height: var(--_track-height);
|
||||
width: map.get($tokens, 'track-width');
|
||||
height: map.get($tokens, 'track-height');
|
||||
|
||||
// Track shape
|
||||
border-start-start-radius: var(--_track-shape-start-start);
|
||||
border-start-end-radius: var(--_track-shape-start-end);
|
||||
border-end-end-radius: var(--_track-shape-end-end);
|
||||
border-end-start-radius: var(--_track-shape-end-start);
|
||||
border-start-start-radius: map.get($tokens, 'track-shape-start-start');
|
||||
border-start-end-radius: map.get($tokens, 'track-shape-start-end');
|
||||
border-end-end-radius: map.get($tokens, 'track-shape-end-end');
|
||||
border-end-start-radius: map.get($tokens, 'track-shape-end-start');
|
||||
}
|
||||
|
||||
// Input is also touch target
|
||||
@ -143,7 +143,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include track.styles();
|
||||
@include handle.styles();
|
||||
@include icon.styles();
|
||||
@include track.styles($tokens);
|
||||
@include handle.styles($tokens);
|
||||
@include icon.styles($tokens);
|
||||
}
|
||||
|
@ -7,7 +7,7 @@
|
||||
@use 'sass:map';
|
||||
// go/keep-sorted end
|
||||
|
||||
@mixin styles() {
|
||||
@mixin styles($tokens) {
|
||||
@layer styles {
|
||||
.track {
|
||||
position: absolute;
|
||||
@ -45,7 +45,7 @@
|
||||
.disabled .track::before,
|
||||
.disabled .track::after {
|
||||
transition: none;
|
||||
opacity: var(--_disabled-track-opacity);
|
||||
opacity: map.get($tokens, 'disabled-track-opacity');
|
||||
}
|
||||
|
||||
.disabled .track::before {
|
||||
@ -53,19 +53,19 @@
|
||||
}
|
||||
|
||||
.selected .track::before {
|
||||
background-color: var(--_selected-track-color);
|
||||
background-color: map.get($tokens, 'selected-track-color');
|
||||
}
|
||||
|
||||
.selected:hover .track::before {
|
||||
background-color: var(--_selected-hover-track-color);
|
||||
background-color: map.get($tokens, 'selected-hover-track-color');
|
||||
}
|
||||
|
||||
.selected:focus-within .track::before {
|
||||
background-color: var(--_selected-focus-track-color);
|
||||
background-color: map.get($tokens, 'selected-focus-track-color');
|
||||
}
|
||||
|
||||
.selected:active .track::before {
|
||||
background-color: var(--_selected-pressed-track-color);
|
||||
background-color: map.get($tokens, 'selected-pressed-track-color');
|
||||
}
|
||||
|
||||
.selected.disabled .track {
|
||||
@ -73,34 +73,34 @@
|
||||
}
|
||||
|
||||
.selected.disabled .track::before {
|
||||
background-color: var(--_disabled-selected-track-color);
|
||||
background-color: map.get($tokens, 'disabled-selected-track-color');
|
||||
}
|
||||
|
||||
.unselected .track::before {
|
||||
background-color: var(--_track-color);
|
||||
border-color: var(--_track-outline-color);
|
||||
background-color: map.get($tokens, 'track-color');
|
||||
border-color: map.get($tokens, 'track-outline-color');
|
||||
border-style: solid;
|
||||
border-width: var(--_track-outline-width);
|
||||
border-width: map.get($tokens, 'track-outline-width');
|
||||
}
|
||||
|
||||
.unselected:hover .track::before {
|
||||
background-color: var(--_hover-track-color);
|
||||
border-color: var(--_hover-track-outline-color);
|
||||
background-color: map.get($tokens, 'hover-track-color');
|
||||
border-color: map.get($tokens, 'hover-track-outline-color');
|
||||
}
|
||||
|
||||
.unselected:focus-visible .track::before {
|
||||
background-color: var(--_focus-track-color);
|
||||
border-color: var(--_focus-track-outline-color);
|
||||
background-color: map.get($tokens, 'focus-track-color');
|
||||
border-color: map.get($tokens, 'focus-track-outline-color');
|
||||
}
|
||||
|
||||
.unselected:active .track::before {
|
||||
background-color: var(--_pressed-track-color);
|
||||
border-color: var(--_pressed-track-outline-color);
|
||||
background-color: map.get($tokens, 'pressed-track-color');
|
||||
border-color: map.get($tokens, 'pressed-track-outline-color');
|
||||
}
|
||||
|
||||
.unselected.disabled .track::before {
|
||||
background-color: var(--_disabled-track-color);
|
||||
border-color: var(--_disabled-track-outline-color);
|
||||
background-color: map.get($tokens, 'disabled-track-color');
|
||||
border-color: map.get($tokens, 'disabled-track-outline-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user