mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
a2721c39d4
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
184 lines
5.0 KiB
SCSS
184 lines
5.0 KiB
SCSS
//
|
|
// Copyright 2022 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// go/keep-sorted start
|
|
@use 'sass:map';
|
|
// go/keep-sorted end
|
|
// go/keep-sorted start
|
|
@use '../../ripple/ripple';
|
|
@use '../../tokens';
|
|
// go/keep-sorted end
|
|
|
|
$_md-sys-motion: tokens.md-sys-motion-values();
|
|
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
|
|
|
|
@mixin styles($tokens) {
|
|
@layer styles {
|
|
.handle-container {
|
|
display: flex;
|
|
place-content: center;
|
|
place-items: center;
|
|
position: relative;
|
|
// this easing is custom to perform the "overshoot" animation
|
|
transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
$margin: calc(
|
|
map.get($tokens, 'track-width') - map.get($tokens, 'track-height')
|
|
);
|
|
|
|
.selected .handle-container {
|
|
margin-inline-start: $margin;
|
|
}
|
|
|
|
.unselected .handle-container {
|
|
margin-inline-end: $margin;
|
|
}
|
|
|
|
.disabled .handle-container {
|
|
transition: none;
|
|
}
|
|
|
|
.handle {
|
|
// Handle shape
|
|
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;
|
|
transition-duration: 250ms, 250ms;
|
|
transition-timing-function: $_easing-standard, $_easing-standard;
|
|
z-index: 0;
|
|
}
|
|
|
|
.handle::before {
|
|
content: '';
|
|
display: flex;
|
|
inset: 0;
|
|
position: absolute;
|
|
border-radius: inherit;
|
|
box-sizing: border-box;
|
|
transition: background-color 67ms linear;
|
|
}
|
|
|
|
.disabled .handle,
|
|
.disabled .handle::before {
|
|
transition: none;
|
|
}
|
|
|
|
.selected .handle {
|
|
height: map.get($tokens, 'selected-handle-height');
|
|
width: map.get($tokens, 'selected-handle-width');
|
|
}
|
|
|
|
.handle.with-icon {
|
|
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: 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: map.get($tokens, 'selected-handle-color');
|
|
}
|
|
|
|
.selected:hover .handle::before {
|
|
background-color: map.get($tokens, 'selected-hover-handle-color');
|
|
}
|
|
|
|
.selected:focus-within .handle::before {
|
|
background-color: map.get($tokens, 'selected-focus-handle-color');
|
|
}
|
|
|
|
.selected:active .handle::before {
|
|
background-color: map.get($tokens, 'selected-pressed-handle-color');
|
|
}
|
|
|
|
.selected.disabled .handle::before {
|
|
background-color: map.get($tokens, 'disabled-selected-handle-color');
|
|
opacity: map.get($tokens, 'disabled-selected-handle-opacity');
|
|
}
|
|
|
|
.unselected .handle::before {
|
|
background-color: map.get($tokens, 'handle-color');
|
|
}
|
|
|
|
.unselected:hover .handle::before {
|
|
background-color: map.get($tokens, 'hover-handle-color');
|
|
}
|
|
|
|
.unselected:focus-within .handle::before {
|
|
background-color: map.get($tokens, 'focus-handle-color');
|
|
}
|
|
|
|
.unselected:active .handle::before {
|
|
background-color: map.get($tokens, 'pressed-handle-color');
|
|
}
|
|
|
|
.unselected.disabled .handle::before {
|
|
background-color: map.get($tokens, 'disabled-handle-color');
|
|
opacity: map.get($tokens, 'disabled-handle-opacity');
|
|
}
|
|
|
|
md-ripple {
|
|
border-radius: map.get($tokens, 'state-layer-shape');
|
|
height: map.get($tokens, 'state-layer-size');
|
|
inset: unset;
|
|
width: map.get($tokens, 'state-layer-size');
|
|
}
|
|
|
|
.selected md-ripple {
|
|
@include ripple.theme(
|
|
(
|
|
'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'),
|
|
)
|
|
);
|
|
}
|
|
|
|
.unselected md-ripple {
|
|
@include ripple.theme(
|
|
(
|
|
'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'),
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
@layer hcm {
|
|
@media (forced-colors: active) {
|
|
.unselected .handle::before {
|
|
background: ButtonText;
|
|
}
|
|
|
|
.disabled .handle::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.disabled.unselected .handle::before {
|
|
background: GrayText;
|
|
}
|
|
}
|
|
}
|
|
}
|