mirror of
https://github.com/material-components/material-web.git
synced 2026-01-09 07:21:09 +08:00
55b4650063
BREAKING CHANGE: Sass component tokens, such as `tokens.md-comp-checkbox-values()`, return `var(--md-<component>, <value>)` instead of just the CSS value. Use `$exclude-custom-properties: true` to remove them. PiperOrigin-RevId: 652550625
336 lines
8.5 KiB
SCSS
336 lines
8.5 KiB
SCSS
//
|
|
// Copyright 2023 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
// go/keep-sorted start
|
|
@use 'sass:list';
|
|
// go/keep-sorted end
|
|
// go/keep-sorted start
|
|
@use '../../tokens';
|
|
// go/keep-sorted end
|
|
|
|
@mixin theme($tokens) {
|
|
$supported-tokens: tokens.$md-comp-linear-progress-supported-tokens;
|
|
@each $token, $value in $tokens {
|
|
@if list.index($supported-tokens, $token) == null {
|
|
@error 'Token `#{$token}` is not a supported token.';
|
|
}
|
|
|
|
@if $value {
|
|
--md-linear-progress-#{$token}: #{$value};
|
|
}
|
|
}
|
|
}
|
|
|
|
// note, transition settings match MDC
|
|
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L79
|
|
$_determinate-duration: 250ms;
|
|
$_determinate-easing: cubic-bezier(0.4, 0, 0.6, 1);
|
|
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L218
|
|
$_indeterminate-duration: 2s;
|
|
|
|
@mixin styles() {
|
|
$tokens: tokens.md-comp-linear-progress-values();
|
|
|
|
:host {
|
|
@each $token, $value in $tokens {
|
|
--_#{$token}: #{$value};
|
|
}
|
|
|
|
border-radius: var(--_track-shape);
|
|
display: flex;
|
|
position: relative;
|
|
// note, this matches the `meter` element and is just done so
|
|
// there's a default width.
|
|
min-width: 80px;
|
|
height: var(--_track-height);
|
|
content-visibility: auto;
|
|
contain: strict;
|
|
}
|
|
|
|
.progress,
|
|
.dots,
|
|
.inactive-track,
|
|
.bar,
|
|
.bar-inner {
|
|
position: absolute;
|
|
}
|
|
|
|
.progress {
|
|
// Animations need to be in LTR. We support RTL by flipping the indicator
|
|
// with scale(-1).
|
|
direction: ltr;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bar {
|
|
animation: none;
|
|
// position is offset for indeterminate animation, so we lock the inline size here.
|
|
width: 100%;
|
|
height: var(--_active-indicator-height);
|
|
transform-origin: left center;
|
|
transition: transform $_determinate-duration $_determinate-easing;
|
|
}
|
|
|
|
.secondary-bar {
|
|
display: none;
|
|
}
|
|
|
|
.bar-inner {
|
|
inset: 0;
|
|
animation: none;
|
|
background: var(--_active-indicator-color);
|
|
}
|
|
|
|
.inactive-track {
|
|
background: var(--_track-color);
|
|
inset: 0;
|
|
transition: transform $_determinate-duration $_determinate-easing;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.dots {
|
|
inset: 0;
|
|
animation: linear infinite $_determinate-duration;
|
|
animation-name: buffering;
|
|
// The color of the buffer dots, which are masked out of this background
|
|
// color.
|
|
background-color: var(--_track-color);
|
|
background-repeat: repeat-x;
|
|
// SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
|
|
// This svg creates a black circle on a transparent background which is used
|
|
// to mask out the animated buffering dots. This technique allows for dot
|
|
// color customization via the background-color property, and mask-image
|
|
// displays when forced-colors are active.
|
|
$svg: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E";
|
|
// required for full support with Chrome, Edge, and Opera.
|
|
-webkit-mask-image: url($svg);
|
|
mask-image: url($svg);
|
|
z-index: -1; // Place behind tracks for Safari
|
|
}
|
|
|
|
// dots are hidden when indeterminate or when there is no visible buffer to
|
|
// prevent infinite invisible animation.
|
|
.dots[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
// indeterminate
|
|
.indeterminate .bar {
|
|
transition: none;
|
|
}
|
|
|
|
// note, the numbers here come directly from the mdc implementation.
|
|
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
|
|
.indeterminate .primary-bar {
|
|
inset-inline-start: -145.167%;
|
|
}
|
|
|
|
.indeterminate .secondary-bar {
|
|
inset-inline-start: -54.8889%;
|
|
// this is display none by default.
|
|
display: block;
|
|
}
|
|
|
|
.indeterminate .primary-bar {
|
|
animation: linear infinite $_indeterminate-duration;
|
|
animation-name: primary-indeterminate-translate;
|
|
}
|
|
|
|
.indeterminate .primary-bar > .bar-inner {
|
|
animation: linear infinite $_indeterminate-duration
|
|
primary-indeterminate-scale;
|
|
}
|
|
|
|
.indeterminate.four-color .primary-bar > .bar-inner {
|
|
animation-name: primary-indeterminate-scale, four-color;
|
|
animation-duration: $_indeterminate-duration,
|
|
calc($_indeterminate-duration * 2);
|
|
}
|
|
|
|
.indeterminate .secondary-bar {
|
|
animation: linear infinite $_indeterminate-duration;
|
|
animation-name: secondary-indeterminate-translate;
|
|
}
|
|
|
|
.indeterminate .secondary-bar > .bar-inner {
|
|
animation: linear infinite $_indeterminate-duration
|
|
secondary-indeterminate-scale;
|
|
}
|
|
|
|
.indeterminate.four-color .secondary-bar > .bar-inner {
|
|
animation-name: secondary-indeterminate-scale, four-color;
|
|
animation-duration: $_indeterminate-duration,
|
|
calc($_indeterminate-duration * 2);
|
|
}
|
|
|
|
:host(:dir(rtl)) {
|
|
transform: scale(-1);
|
|
}
|
|
|
|
@keyframes primary-indeterminate-scale {
|
|
0% {
|
|
transform: scaleX(0.08);
|
|
}
|
|
|
|
36.65% {
|
|
animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
|
|
transform: scaleX(0.08);
|
|
}
|
|
|
|
69.15% {
|
|
animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
|
|
transform: scaleX(0.661479);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(0.08);
|
|
}
|
|
}
|
|
|
|
@keyframes secondary-indeterminate-scale {
|
|
0% {
|
|
animation-timing-function: cubic-bezier(
|
|
0.205028,
|
|
0.057051,
|
|
0.57661,
|
|
0.453971
|
|
);
|
|
transform: scaleX(0.08);
|
|
}
|
|
|
|
19.15% {
|
|
animation-timing-function: cubic-bezier(
|
|
0.152313,
|
|
0.196432,
|
|
0.648374,
|
|
1.00432
|
|
);
|
|
transform: scaleX(0.457104);
|
|
}
|
|
|
|
44.15% {
|
|
animation-timing-function: cubic-bezier(
|
|
0.257759,
|
|
-0.003163,
|
|
0.211762,
|
|
1.38179
|
|
);
|
|
transform: scaleX(0.72796);
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(0.08);
|
|
}
|
|
}
|
|
|
|
@keyframes buffering {
|
|
0% {
|
|
$_dot-size: calc(var(--_track-height) / 2);
|
|
// the amount to animate is aligned with the default track background
|
|
$_dot-background-width: calc($_dot-size * 5);
|
|
transform: translateX(#{$_dot-background-width});
|
|
}
|
|
}
|
|
|
|
// note, the numbers here come directly from the mdc implementation.
|
|
// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
|
|
// keyframes
|
|
@keyframes primary-indeterminate-translate {
|
|
0% {
|
|
transform: translateX(0px);
|
|
}
|
|
|
|
20% {
|
|
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
|
|
transform: translateX(0px);
|
|
}
|
|
|
|
59.15% {
|
|
animation-timing-function: cubic-bezier(
|
|
0.302435,
|
|
0.381352,
|
|
0.55,
|
|
0.956352
|
|
);
|
|
transform: translateX(83.6714%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(200.611%);
|
|
}
|
|
}
|
|
|
|
@keyframes secondary-indeterminate-translate {
|
|
0% {
|
|
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
|
|
transform: translateX(0px);
|
|
}
|
|
|
|
25% {
|
|
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
|
|
transform: translateX(37.6519%);
|
|
}
|
|
|
|
48.35% {
|
|
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
|
transform: translateX(84.3862%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(160.278%);
|
|
}
|
|
}
|
|
|
|
@keyframes four-color {
|
|
0% {
|
|
background: var(--_four-color-active-indicator-one-color);
|
|
}
|
|
|
|
15% {
|
|
background: var(--_four-color-active-indicator-one-color);
|
|
}
|
|
25% {
|
|
background: var(--_four-color-active-indicator-two-color);
|
|
}
|
|
40% {
|
|
background: var(--_four-color-active-indicator-two-color);
|
|
}
|
|
|
|
50% {
|
|
background: var(--_four-color-active-indicator-three-color);
|
|
}
|
|
65% {
|
|
background: var(--_four-color-active-indicator-three-color);
|
|
}
|
|
75% {
|
|
background: var(--_four-color-active-indicator-four-color);
|
|
}
|
|
90% {
|
|
background: var(--_four-color-active-indicator-four-color);
|
|
}
|
|
100% {
|
|
background: var(--_four-color-active-indicator-one-color);
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
:host {
|
|
outline: 1px solid CanvasText;
|
|
}
|
|
|
|
.bar-inner,
|
|
.dots {
|
|
background-color: CanvasText;
|
|
}
|
|
|
|
// TODO(b/296262544): fix dots not being CanvasText. This need a refactor,
|
|
// since background gradiants are not displayed in HCM.
|
|
}
|
|
}
|