Skip to content

Commit e92e9cc

Browse files
crisbetocrisbeto
authored
refactor(material/progress-bar): simplify structural styles (angular#29303)
Reworks the progress bar styles to be simpler and easier to maintain.
1 parent d9181b5 commit e92e9cc

File tree

3 files changed

+320
-30
lines changed

3 files changed

+320
-30
lines changed

‎src/material/core/style/_vendor-prefixes.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,9 @@
4848
-moz-osx-font-smoothing: grayscale;
4949
-webkit-font-smoothing: antialiased;
5050
}
51+
52+
@mixin mask-image($value) {
53+
-webkit-mask-image: $value;
54+
mask-image: $value;
55+
}
5156
// stylelint-enable

‎src/material/progress-bar/_progress-bar-theme.scss

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@use '../core/theming/validation';
55
@use '../core/tokens/token-utils';
66
@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
7-
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
87

98
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
109
/// for the mat-progress-bar.
@@ -16,14 +15,19 @@
1615
@else {
1716
// Add default values for tokens not related to color, typography, or density.
1817
@include sass-utils.current-selector-or-root() {
19-
@include mdc-linear-progress-theme.theme(tokens-mdc-linear-progress.get-unthemable-tokens());
18+
@include token-utils.create-token-values(
19+
tokens-mdc-linear-progress.$prefix,
20+
tokens-mdc-linear-progress.get-unthemable-tokens()
21+
);
2022
}
2123
}
2224
}
2325

2426
@mixin _palette-styles($theme, $palette-name) {
25-
@include mdc-linear-progress-theme.theme(
26-
tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name));
27+
@include token-utils.create-token-values(
28+
tokens-mdc-linear-progress.$prefix,
29+
tokens-mdc-linear-progress.get-color-tokens($theme, $palette-name)
30+
);
2731
}
2832

2933
/// Outputs color theme styles for the mat-progress-bar.
@@ -98,7 +102,6 @@
98102
@mixin _theme-from-tokens($tokens, $options...) {
99103
@include validation.selector-defined(
100104
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
101-
$mdc-linear-progress-tokens:
102-
token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...);
103-
@include mdc-linear-progress-theme.theme($mdc-linear-progress-tokens);
105+
$tokens: token-utils.get-tokens-for($tokens, tokens-mdc-linear-progress.$prefix, $options...);
106+
@include token-utils.create-token-values(tokens-mdc-linear-progress.$prefix, $tokens);
104107
}

‎src/material/progress-bar/progress-bar.scss

Lines changed: 305 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
@use '@material/theme/custom-properties' as mdc-custom-properties;
2-
@use '@material/linear-progress/linear-progress' as mdc-linear-progress;
3-
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
4-
@use '../core/tokens/m2/mdc/linear-progress' as m2-mdc-linear-progress;
5-
6-
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
7-
// Add the MDC progress-bar static styles.
8-
@include mdc-linear-progress.static-styles();
9-
10-
// Add the official slots for the MDC progress-bar.
11-
@include mdc-linear-progress-theme.theme-styles(m2-mdc-linear-progress.get-token-slots());
12-
}
1+
@use '@angular/cdk';
2+
@use '../core/tokens/m2/mdc/linear-progress' as tokens-mdc-linear-progress;
3+
@use '../core/tokens/token-utils';
4+
@use '../core/style/vendor-prefixes';
135

146
.mat-mdc-progress-bar {
157
// Explicitly set to `block` since the browser defaults custom elements to `inline`.
@@ -39,16 +31,306 @@
3931
transition: transform 1ms;
4032
}
4133
}
34+
}
35+
36+
.mdc-linear-progress {
37+
position: relative;
38+
width: 100%;
39+
transform: translateZ(0);
40+
outline: 1px solid transparent;
41+
overflow-x: hidden;
42+
transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
43+
44+
@include token-utils.use-tokens(
45+
tokens-mdc-linear-progress.$prefix,
46+
tokens-mdc-linear-progress.get-token-slots()
47+
) {
48+
$track-variable: token-utils.get-token-variable(track-height);
49+
$indicator-height-variable: token-utils.get-token-variable(active-indicator-height);
50+
height: max(var(#{$track-variable}), var(#{$indicator-height-variable}));
51+
}
52+
53+
@include cdk.high-contrast(active, off) {
54+
outline-color: CanvasText;
55+
}
56+
}
57+
58+
.mdc-linear-progress__bar {
59+
position: absolute;
60+
top: 0;
61+
bottom: 0;
62+
margin: auto 0;
63+
width: 100%;
64+
animation: none;
65+
transform-origin: top left;
66+
transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
67+
68+
@include token-utils.use-tokens(
69+
tokens-mdc-linear-progress.$prefix,
70+
tokens-mdc-linear-progress.get-token-slots()
71+
) {
72+
@include token-utils.create-token-slot(height, active-indicator-height);
73+
}
74+
75+
.mdc-linear-progress--indeterminate & {
76+
transition: none;
77+
}
78+
79+
[dir='rtl'] & {
80+
right: 0;
81+
transform-origin: center right;
82+
}
83+
}
84+
85+
.mdc-linear-progress__bar-inner {
86+
display: inline-block;
87+
position: absolute;
88+
width: 100%;
89+
animation: none;
90+
border-top-style: solid;
91+
92+
@include token-utils.use-tokens(
93+
tokens-mdc-linear-progress.$prefix,
94+
tokens-mdc-linear-progress.get-token-slots()
95+
) {
96+
@include token-utils.create-token-slot(border-color, active-indicator-color);
97+
@include token-utils.create-token-slot(border-top-width, active-indicator-height);
98+
}
99+
}
100+
101+
.mdc-linear-progress__buffer {
102+
display: flex;
103+
position: absolute;
104+
top: 0;
105+
bottom: 0;
106+
margin: auto 0;
107+
width: 100%;
108+
overflow: hidden;
109+
110+
@include token-utils.use-tokens(
111+
tokens-mdc-linear-progress.$prefix,
112+
tokens-mdc-linear-progress.get-token-slots()
113+
) {
114+
@include token-utils.create-token-slot(height, track-height);
115+
@include token-utils.create-token-slot(border-radius, track-shape);
116+
}
117+
}
118+
119+
.mdc-linear-progress__buffer-dots {
120+
$mask: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' " +
121+
"xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' " +
122+
"enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' " +
123+
"preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E";
124+
125+
@include vendor-prefixes.mask-image(url($mask));
126+
background-repeat: repeat-x;
127+
flex: auto;
128+
transform: rotate(180deg);
129+
animation: mdc-linear-progress-buffering 250ms infinite linear;
130+
131+
@include token-utils.use-tokens(
132+
tokens-mdc-linear-progress.$prefix,
133+
tokens-mdc-linear-progress.get-token-slots()
134+
) {
135+
@include token-utils.create-token-slot(background-color, track-color);
136+
}
137+
138+
@include cdk.high-contrast(active, off) {
139+
background-color: ButtonBorder;
140+
}
141+
142+
[dir='rtl'] & {
143+
animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
144+
transform: rotate(0);
145+
}
146+
}
147+
148+
.mdc-linear-progress__buffer-bar {
149+
flex: 0 1 100%;
150+
transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
151+
152+
@include token-utils.use-tokens(
153+
tokens-mdc-linear-progress.$prefix,
154+
tokens-mdc-linear-progress.get-token-slots()
155+
) {
156+
@include token-utils.create-token-slot(background-color, track-color);
157+
}
158+
}
159+
160+
.mdc-linear-progress__primary-bar {
161+
transform: scaleX(0);
162+
163+
.mdc-linear-progress--indeterminate & {
164+
left: -145.166611%;
165+
}
166+
167+
.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
168+
animation: mdc-linear-progress-primary-indeterminate-translate 2s infinite linear;
169+
}
170+
171+
.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
172+
> .mdc-linear-progress__bar-inner {
173+
animation: mdc-linear-progress-primary-indeterminate-scale 2s infinite linear;
174+
}
175+
}
176+
177+
[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--animation-ready & {
178+
animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
179+
}
180+
181+
[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--indeterminate & {
182+
right: -145.166611%;
183+
left: auto;
184+
}
185+
}
186+
187+
.mdc-linear-progress__secondary-bar {
188+
display: none;
189+
190+
.mdc-linear-progress--indeterminate & {
191+
left: -54.888891%;
192+
display: block;
193+
}
194+
195+
.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
196+
animation: mdc-linear-progress-secondary-indeterminate-translate 2s infinite linear;
197+
}
198+
199+
.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready & {
200+
> .mdc-linear-progress__bar-inner {
201+
animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear;
202+
}
203+
}
42204

43-
// These values were derived from the default values of MDC's linear-progress.
44-
--mdc-linear-progress-primary-half: 83.67142%;
45-
--mdc-linear-progress-primary-full: 200.611057%;
46-
--mdc-linear-progress-secondary-quarter: 37.651913%;
47-
--mdc-linear-progress-secondary-half: 84.386165%;
48-
--mdc-linear-progress-secondary-full: 160.277782%;
49-
--mdc-linear-progress-primary-half-neg: -83.67142%;
50-
--mdc-linear-progress-primary-full-neg: -200.611057%;
51-
--mdc-linear-progress-secondary-quarter-neg: -37.651913%;
52-
--mdc-linear-progress-secondary-half-neg: -84.386165%;
53-
--mdc-linear-progress-secondary-full-neg: -160.277782%;
205+
[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--animation-ready & {
206+
animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
207+
}
208+
209+
[dir='rtl'] .mdc-linear-progress.mdc-linear-progress--indeterminate & {
210+
right: -54.888891%;
211+
left: auto;
212+
}
213+
}
214+
215+
@keyframes mdc-linear-progress-buffering {
216+
from {
217+
@include token-utils.use-tokens(
218+
tokens-mdc-linear-progress.$prefix,
219+
tokens-mdc-linear-progress.get-token-slots()
220+
) {
221+
$track-variable: token-utils.get-token-variable(track-height);
222+
transform: rotate(180deg) translateX(calc(var(#{$track-variable}) * -2.5));
223+
}
224+
}
225+
}
226+
227+
@keyframes mdc-linear-progress-primary-indeterminate-translate {
228+
0% {
229+
transform: translateX(0);
230+
}
231+
20% {
232+
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
233+
transform: translateX(0);
234+
}
235+
59.15% {
236+
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
237+
transform: translateX(83.67142%);
238+
}
239+
100% {
240+
transform: translateX(200.611057%);
241+
}
242+
}
243+
244+
@keyframes mdc-linear-progress-primary-indeterminate-scale {
245+
0% {
246+
transform: scaleX(0.08);
247+
}
248+
36.65% {
249+
animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
250+
transform: scaleX(0.08);
251+
}
252+
69.15% {
253+
animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
254+
transform: scaleX(0.661479);
255+
}
256+
100% {
257+
transform: scaleX(0.08);
258+
}
259+
}
260+
261+
@keyframes mdc-linear-progress-secondary-indeterminate-translate {
262+
0% {
263+
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
264+
transform: translateX(0);
265+
}
266+
25% {
267+
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
268+
transform: translateX(37.651913%);
269+
}
270+
48.35% {
271+
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
272+
transform: translateX(84.386165%);
273+
}
274+
100% {
275+
transform: translateX(160.277782%);
276+
}
277+
}
278+
279+
@keyframes mdc-linear-progress-secondary-indeterminate-scale {
280+
0% {
281+
animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
282+
transform: scaleX(0.08);
283+
}
284+
19.15% {
285+
animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
286+
transform: scaleX(0.457104);
287+
}
288+
44.15% {
289+
animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
290+
transform: scaleX(0.72796);
291+
}
292+
100% {
293+
transform: scaleX(0.08);
294+
}
295+
}
296+
297+
@keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {
298+
0% {
299+
transform: translateX(0);
300+
}
301+
20% {
302+
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
303+
transform: translateX(0);
304+
}
305+
59.15% {
306+
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
307+
transform: translateX(-83.67142%);
308+
}
309+
100% {
310+
transform: translateX(-200.611057%);
311+
}
312+
}
313+
314+
@keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
315+
0% {
316+
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
317+
transform: translateX(0);
318+
}
319+
25% {
320+
animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
321+
transform: translateX(-37.651913%);
322+
}
323+
48.35% {
324+
animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
325+
transform: translateX(-84.386165%);
326+
}
327+
100% {
328+
transform: translateX(-160.277782%);
329+
}
330+
}
331+
332+
@keyframes mdc-linear-progress-buffering-reverse {
333+
from {
334+
transform: translateX(-10px);
335+
}
54336
}

0 commit comments

Comments
 (0)