Skip to content

refactor(material/progress-bar): simplify structural styles #29303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 24, 2024
Merged

refactor(material/progress-bar): simplify structural styles #29303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/material/core/style/_vendor-prefixes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,9 @@
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

@mixin mask-image($value) {
-webkit-mask-image: $value;
mask-image: $value;
}
// stylelint-enable
17 changes: 10 additions & 7 deletions src/material/progress-bar/_progress-bar-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
@use '../core/theming/validation';
@use '../core/tokens/token-utils';
@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;

/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
/// for the mat-progress-bar.
Expand All @@ -16,14 +15,19 @@
@else {
// Add default values for tokens not related to color, typography, or density.
@include sass-utils.current-selector-or-root() {
@include mdc-linear-progress-theme.theme(tokens-mdc-linear-progress.get-unthemable-tokens());
@include token-utils.create-token-values(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-unthemable-tokens()
);
}
}
}

@mixin _palette-styles($theme, $palette-name) {
@include mdc-linear-progress-theme.theme(
tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name));
@include token-utils.create-token-values(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name)
);
}

/// Outputs color theme styles for the mat-progress-bar.
Expand Down Expand Up @@ -98,7 +102,6 @@
@mixin _theme-from-tokens($tokens, $options...) {
@include validation.selector-defined(
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
$mdc-linear-progress-tokens:
token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...);
@include mdc-linear-progress-theme.theme($mdc-linear-progress-tokens);
$tokens: token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...);
@include token-utils.create-token-values(tokens-mdc-linear-progress.$prefix, $tokens);
}
328 changes: 305 additions & 23 deletions src/material/progress-bar/progress-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
@use '@material/theme/custom-properties' as mdc-custom-properties;
@use '@material/linear-progress/linear-progress' as mdc-linear-progress;
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
@use '../core/tokens/m2/mdc/linear-progress' as m2-mdc-linear-progress;

@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
// Add the MDC progress-bar static styles.
@include mdc-linear-progress.static-styles();

// Add the official slots for the MDC progress-bar.
@include mdc-linear-progress-theme.theme-styles(m2-mdc-linear-progress.get-token-slots());
}
@use '@angular/cdk';
@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
@use '../core/tokens/token-utils';
@use '../core/style/vendor-prefixes';

.mat-mdc-progress-bar {
// Explicitly set to `block` since the browser defaults custom elements to `inline`.
Expand Down Expand Up @@ -39,16 +31,306 @@
transition: transform 1ms;
}
}
}

.mdc-linear-progress {
position: relative;
width: 100%;
transform: translateZ(0);
outline: 1px solid transparent;
overflow-x: hidden;
transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);

@include token-utils.use-tokens(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-token-slots()
) {
$track-variable: token-utils.get-token-variable(track-height);
$indicator-height-variable: token-utils.get-token-variable(active-indicator-height);
height: max(var(#{$track-variable}), var(#{$indicator-height-variable}));
}

@include cdk.high-contrast(active, off) {
outline-color: CanvasText;
}
}

.mdc-linear-progress__bar {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 100%;
animation: none;
transform-origin: top left;
transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);

@include token-utils.use-tokens(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-token-slots()
) {
@include token-utils.create-token-slot(height, active-indicator-height);
}

.mdc-linear-progress--indeterminate & {
transition: none;
}

[dir='rtl'] & {
right: 0;
transform-origin: center right;
}
}

.mdc-linear-progress__bar-inner {
display: inline-block;
position: absolute;
width: 100%;
animation: none;
border-top-style: solid;

@include token-utils.use-tokens(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-token-slots()
) {
@include token-utils.create-token-slot(border-color, active-indicator-color);
@include token-utils.create-token-slot(border-top-width, active-indicator-height);
}
}

.mdc-linear-progress__buffer {
display: flex;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 100%;
overflow: hidden;

@include token-utils.use-tokens(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-token-slots()
) {
@include token-utils.create-token-slot(height, track-height);
@include token-utils.create-token-slot(border-radius, track-shape);
}
}

.mdc-linear-progress__buffer-dots {
$mask: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' " +
"xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' " +
"enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' " +
"preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E";

@include vendor-prefixes.mask-image(url($mask));
background-repeat: repeat-x;
flex: auto;
transform: rotate(180deg);
animation: mdc-linear-progress-buffering 250ms infinite linear;

@include token-utils.use-tokens(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-token-slots()
) {
@include token-utils.create-token-slot(background-color, track-color);
}

@include cdk.high-contrast(active, off) {
background-color: ButtonBorder;
}

[dir='rtl'] & {
animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
transform: rotate(0);
}
}

.mdc-linear-progress__buffer-bar {
flex: 0 1 100%;
transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);

@include token-utils.use-tokens(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-token-slots()
) {
@include token-utils.create-token-slot(background-color, track-color);
}
}

.mdc-linear-progress__primary-bar {
transform: scaleX(0);

.mdc-linear-progress--indeterminate & {
left: -145.166611%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where do these percentage values come from? Is it just what MDC used?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, they were basically hardcoded as CSS variables in MDC. I just inlined them since nobody is realistically changing those variables.

}

.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite linear;
}

.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
> .mdc-linear-progress__bar-inner {
animation: mdc-linear-progress-primary-indeterminate-scale 2s infinite linear;
}
}

[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--animation-ready & {
animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
}

[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--indeterminate & {
right: -145.166611%;
left: auto;
}
}

.mdc-linear-progress__secondary-bar {
display: none;

.mdc-linear-progress--indeterminate & {
left: -54.888891%;
display: block;
}

.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
animation: mdc-linear-progress-secondary-indeterminate-translate 2s infinite linear;
}

.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
> .mdc-linear-progress__bar-inner {
animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear;
}
}

// These values were derived from the default values of MDC's linear-progress.
--mdc-linear-progress-primary-half: 83.67142%;
--mdc-linear-progress-primary-full: 200.611057%;
--mdc-linear-progress-secondary-quarter: 37.651913%;
--mdc-linear-progress-secondary-half: 84.386165%;
--mdc-linear-progress-secondary-full: 160.277782%;
--mdc-linear-progress-primary-half-neg: -83.67142%;
--mdc-linear-progress-primary-full-neg: -200.611057%;
--mdc-linear-progress-secondary-quarter-neg: -37.651913%;
--mdc-linear-progress-secondary-half-neg: -84.386165%;
--mdc-linear-progress-secondary-full-neg: -160.277782%;
[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--animation-ready & {
animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
}

[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--indeterminate & {
right: -54.888891%;
left: auto;
}
}

@keyframes mdc-linear-progress-buffering {
from {
@include token-utils.use-tokens(
tokens-mdc-linear-progress.$prefix,
tokens-mdc-linear-progress.get-token-slots()
) {
$track-variable: token-utils.get-token-variable(track-height);
transform: rotate(180deg) translateX(calc(var(#{$track-variable}) * -2.5));
}
}
}

@keyframes mdc-linear-progress-primary-indeterminate-translate {
0% {
transform: translateX(0);
}
20% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(0);
}
59.15% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(83.67142%);
}
100% {
transform: translateX(200.611057%);
}
}

@keyframes mdc-linear-progress-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 mdc-linear-progress-secondary-indeterminate-translate {
0% {
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
transform: translateX(0);
}
25% {
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
transform: translateX(37.651913%);
}
48.35% {
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
transform: translateX(84.386165%);
}
100% {
transform: translateX(160.277782%);
}
}

@keyframes mdc-linear-progress-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.004315);
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 mdc-linear-progress-primary-indeterminate-translate-reverse {
0% {
transform: translateX(0);
}
20% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
transform: translateX(0);
}
59.15% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(-83.67142%);
}
100% {
transform: translateX(-200.611057%);
}
}

@keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
0% {
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
transform: translateX(0);
}
25% {
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
transform: translateX(-37.651913%);
}
48.35% {
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
transform: translateX(-84.386165%);
}
100% {
transform: translateX(-160.277782%);
}
}

@keyframes mdc-linear-progress-buffering-reverse {
from {
transform: translateX(-10px);
}
}