mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
chore(progress): reduce linear progress rtl complexity
PiperOrigin-RevId: 558041659
This commit is contained in:
parent
e702a40ca5
commit
d06f29806a
@ -45,14 +45,6 @@ $_dot-background: 0 / $_dot-background-width 100%
|
|||||||
transparent $_dot-size
|
transparent $_dot-size
|
||||||
);
|
);
|
||||||
|
|
||||||
// Generates a list of rtl selectors. This is done so rules can be generated
|
|
||||||
// separately so they don't get dropped where unsupported.
|
|
||||||
$rtl-selectors: (
|
|
||||||
':host-context([dir="rtl"]) .progress',
|
|
||||||
':host([dir="rtl"]) .progress',
|
|
||||||
'.progress:dir(rtl)'
|
|
||||||
);
|
|
||||||
|
|
||||||
@mixin styles() {
|
@mixin styles() {
|
||||||
$tokens: tokens.md-comp-linear-progress-indicator-values();
|
$tokens: tokens.md-comp-linear-progress-indicator-values();
|
||||||
|
|
||||||
@ -80,6 +72,9 @@ $rtl-selectors: (
|
|||||||
}
|
}
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
|
// Animations need to be in LTR. We support RTL by flipping the indicator
|
||||||
|
// with scale(-1).
|
||||||
|
direction: ltr;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
border-radius: var(--_track-shape);
|
border-radius: var(--_track-shape);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -116,10 +111,9 @@ $rtl-selectors: (
|
|||||||
.dots {
|
.dots {
|
||||||
inset: 0;
|
inset: 0;
|
||||||
animation: linear infinite $_determinate-duration;
|
animation: linear infinite $_determinate-duration;
|
||||||
// stylelint-disable-next-line no-unknown-animations --
|
|
||||||
// animation generated via mixin
|
|
||||||
animation-name: buffering;
|
animation-name: buffering;
|
||||||
background: $_dot-background;
|
background: $_dot-background;
|
||||||
|
z-index: -1; // Place behind tracks for Safari
|
||||||
}
|
}
|
||||||
|
|
||||||
// indeterminate
|
// indeterminate
|
||||||
@ -145,8 +139,6 @@ $rtl-selectors: (
|
|||||||
|
|
||||||
.indeterminate .primary-bar {
|
.indeterminate .primary-bar {
|
||||||
animation: linear infinite $_indeterminate-duration;
|
animation: linear infinite $_indeterminate-duration;
|
||||||
// stylelint-disable-next-line no-unknown-animations --
|
|
||||||
// animation generated via mixin
|
|
||||||
animation-name: primary-indeterminate-translate;
|
animation-name: primary-indeterminate-translate;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -163,8 +155,6 @@ $rtl-selectors: (
|
|||||||
|
|
||||||
.indeterminate .secondary-bar {
|
.indeterminate .secondary-bar {
|
||||||
animation: linear infinite $_indeterminate-duration;
|
animation: linear infinite $_indeterminate-duration;
|
||||||
// stylelint-disable-next-line no-unknown-animations --
|
|
||||||
// animation generated via mixin
|
|
||||||
animation-name: secondary-indeterminate-translate;
|
animation-name: secondary-indeterminate-translate;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -179,34 +169,15 @@ $rtl-selectors: (
|
|||||||
calc($_indeterminate-duration * 2);
|
calc($_indeterminate-duration * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $selector in $rtl-selectors {
|
// TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655):
|
||||||
#{$selector} {
|
// remove :host and :host-context once Chrome supports :dir
|
||||||
.bar {
|
:host-context([dir='rtl']),
|
||||||
transform-origin: right center;
|
:host([dir='rtl']) {
|
||||||
}
|
transform: scale(-1);
|
||||||
|
}
|
||||||
|
|
||||||
.inactive-track {
|
:host(:dir(rtl)) {
|
||||||
transform-origin: right center;
|
transform: scale(-1);
|
||||||
}
|
|
||||||
|
|
||||||
.dots {
|
|
||||||
// stylelint-disable-next-line no-unknown-animations --
|
|
||||||
// animation generated via mixin
|
|
||||||
animation-name: buffering-rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.indeterminate .primary-bar {
|
|
||||||
// stylelint-disable-next-line no-unknown-animations --
|
|
||||||
// animation generated via mixin
|
|
||||||
animation-name: primary-indeterminate-translate-rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.indeterminate .secondary-bar {
|
|
||||||
// stylelint-disable-next-line no-unknown-animations --
|
|
||||||
// animation generated via mixin
|
|
||||||
animation-name: secondary-indeterminate-translate-rtl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes primary-indeterminate-scale {
|
@keyframes primary-indeterminate-scale {
|
||||||
@ -265,8 +236,61 @@ $rtl-selectors: (
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include _directional-keyframes('ltr');
|
@keyframes buffering {
|
||||||
@include _directional-keyframes('rtl');
|
0% {
|
||||||
|
// the amount to animate is aligned with the default track background
|
||||||
|
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 {
|
@keyframes four-color {
|
||||||
0% {
|
0% {
|
||||||
@ -313,66 +337,3 @@ $rtl-selectors: (
|
|||||||
// since background gradiants are not displayed in HCM.
|
// since background gradiants are not displayed in HCM.
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generates keyframes for ltr and rtl.
|
|
||||||
@mixin _directional-keyframes($dir) {
|
|
||||||
$is-rtl: $dir == 'rtl';
|
|
||||||
$sign: if($is-rtl, -1, 1);
|
|
||||||
$suffix: if($is-rtl, '-rtl', '');
|
|
||||||
|
|
||||||
@keyframes buffering#{$suffix} {
|
|
||||||
0% {
|
|
||||||
// the amount to animate is aligned with the default track background
|
|
||||||
transform: translateX(calc(#{$sign} * #{$_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#{$suffix} {
|
|
||||||
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(calc(#{$sign} * 83.6714%));
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(calc(#{$sign} * 200.611%));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes secondary-indeterminate-translate#{$suffix} {
|
|
||||||
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(calc(#{$sign} * 37.6519%));
|
|
||||||
}
|
|
||||||
|
|
||||||
48.35% {
|
|
||||||
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
|
|
||||||
transform: translateX(calc(#{$sign} * 84.3862%));
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(calc(#{$sign} * 160.278%));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user