Skip to content

Commit 98e77da

Browse files
thetaPCthetaPC
committed
refactor(progress-bar): cleanup styles
1 parent 9367f06 commit 98e77da

1 file changed

Lines changed: 84 additions & 79 deletions

File tree

‎core/src/components/progress-bar/progress-bar.scss‎

Lines changed: 84 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use "../../themes/mixins" as mixins;
22

3-
// Progress Bar
4-
// ---------------------------------------------
3+
// Progress Bar: Common Styles
4+
// --------------------------------------------------
55

66
:host {
77
/**
@@ -34,12 +34,25 @@
3434
height: 100%;
3535
}
3636

37+
.progress,
38+
.progress-indeterminate {
39+
z-index: 2;
40+
}
41+
42+
.progress-buffer-bar {
43+
z-index: 1;
44+
}
45+
3746
.buffer-circles-container,
3847
.buffer-circles {
3948
@include mixins.position(0, 0, 0, 0);
4049
position: absolute;
4150
}
4251

52+
.buffer-circles-container {
53+
overflow: hidden;
54+
}
55+
4356
// Extend a bit to overflow. The size of animated distance.
4457
.buffer-circles {
4558
/* stylelint-disable property-disallowed-list */
@@ -48,9 +61,10 @@
4861
/* stylelint-enable property-disallowed-list */
4962
}
5063

51-
// Determinate progress bar
52-
// ---------------------------------------------
64+
// Progress Bar Types
65+
// --------------------------------------------------
5366

67+
// Determinate
5468
.progress,
5569
.progress-buffer-bar,
5670
.buffer-circles-container {
@@ -60,23 +74,6 @@
6074
transition: transform 150ms linear;
6175
}
6276

63-
// Progress Bar: progress, buffer bar, and circles
64-
// ---------------------------------------------
65-
66-
.progress,
67-
.progress-indeterminate {
68-
z-index: 2;
69-
}
70-
71-
.progress-buffer-bar {
72-
z-index: 1;
73-
}
74-
75-
.buffer-circles-container {
76-
overflow: hidden;
77-
}
78-
79-
// Determinate
8077
.progress {
8178
background: var(--ion-progress-bar-determinate-progress-default-background);
8279
}
@@ -85,18 +82,6 @@
8582
background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
8683
}
8784

88-
// Indeterminate
89-
.progress-indeterminate {
90-
background: var(--ion-progress-bar-indeterminate-progress-default-background);
91-
}
92-
93-
:host(.progress-bar-indeterminate) .progress-buffer-bar {
94-
background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
95-
}
96-
97-
// Progress Bar: Buffer Circles
98-
// ---------------------------------------------
99-
10085
.buffer-circles {
10186
background-image: radial-gradient(
10287
ellipse at center,
@@ -115,8 +100,17 @@
115100
animation: buffering 450ms infinite linear;
116101
}
117102

118-
// Progress Bar: Shape Variants
119-
// ---------------------------------------------
103+
// Indeterminate
104+
.progress-indeterminate {
105+
background: var(--ion-progress-bar-indeterminate-progress-default-background);
106+
}
107+
108+
:host(.progress-bar-indeterminate) .progress-buffer-bar {
109+
background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
110+
}
111+
112+
// Progress Bar Shapes
113+
// --------------------------------------------------
120114

121115
:host(.progress-bar-shape-round) {
122116
@include mixins.border-radius(var(--ion-progress-bar-shape-round-border-radius));
@@ -126,68 +120,47 @@
126120
@include mixins.border-radius(var(--ion-progress-bar-shape-rectangular-border-radius));
127121
}
128122

129-
// Progress Bar: Solid (buffer = 1)
130-
// ---------------------------------------------
123+
// Progress Bar Semantic Colors
124+
// --------------------------------------------------
131125

132-
// Indeterminate
133-
:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
134-
background: var(
135-
--ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
136-
var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
137-
);
126+
// Determinate
127+
:host(.ion-color) .progress {
128+
background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
138129
}
139130

140-
// Determinate
141-
:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
131+
:host(.ion-color.progress-bar-determinate:not(.progress-bar-solid)) .progress-buffer-bar {
142132
background: var(
143-
--ion-progress-bar-determinate-buffer-bar-solid-default-background,
133+
--ion-progress-bar-determinate-buffer-bar-semantic-default-background,
144134
var(--ion-progress-bar-determinate-buffer-bar-default-background)
145135
);
146136
}
147137

148-
:host(.progress-bar-solid) .buffer-circles {
138+
:host(.ion-color) .buffer-circles {
149139
background-image: radial-gradient(
150140
ellipse at center,
151-
var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 0%,
152-
var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 30%,
141+
var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%,
142+
var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%,
153143
transparent 30%
154144
);
155145
}
156146

157-
// Progress Bar: Color
158-
// ---------------------------------------------
159-
160147
// Indeterminate
161148
:host(.ion-color) .progress-indeterminate {
162149
background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
163150
}
164151

165-
:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
166-
background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
167-
}
168-
169-
// Determinate
170-
:host(.ion-color) .progress {
171-
background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
172-
}
173-
174-
:host(.ion-color.progress-bar-determinate) .progress-buffer-bar {
175-
background: var(--ion-progress-bar-determinate-buffer-bar-semantic-default-background);
176-
}
177-
178-
:host(.ion-color) .buffer-circles {
179-
background-image: radial-gradient(
180-
ellipse at center,
181-
var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%,
182-
var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%,
183-
transparent 30%
152+
:host(.ion-color.progress-bar-indeterminate:not(.progress-bar-solid)) .progress-buffer-bar {
153+
background: var(
154+
--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background,
155+
var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
184156
);
185157
}
186158

187-
// Progress Bar: States
188-
// ---------------------------------------------
159+
// Progress Bar States
160+
// --------------------------------------------------
189161

190-
// Reversed: if set to true, the animation will be reversed
162+
// Reversed
163+
// If set to true, the animation will be reversed
191164
// and the bar will start at the top right
192165
:host(.progress-bar-reversed) {
193166
transform: scaleX(-1);
@@ -202,9 +175,38 @@
202175
}
203176
}
204177

205-
// Indeterminate Animation
206-
// ---------------------------------------------
178+
// Progress Bar Solid State (buffer = 1)
179+
// --------------------------------------------------
207180

181+
// Determinate
182+
:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
183+
background: var(
184+
--ion-progress-bar-determinate-buffer-bar-solid-default-background,
185+
var(--ion-progress-bar-determinate-buffer-bar-default-background)
186+
);
187+
}
188+
189+
:host(.progress-bar-solid) .buffer-circles {
190+
background-image: radial-gradient(
191+
ellipse at center,
192+
var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 0%,
193+
var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 30%,
194+
transparent 30%
195+
);
196+
}
197+
198+
// Indeterminate
199+
:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
200+
background: var(
201+
--ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
202+
var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
203+
);
204+
}
205+
206+
// Progress Bar Animation
207+
// --------------------------------------------------
208+
209+
// Indeterminate
208210
.indeterminate-bar-primary {
209211
/* stylelint-disable property-disallowed-list */
210212
top: 0;
@@ -237,10 +239,10 @@
237239
}
238240
}
239241

240-
// Progress Bar: Animation Keyframes
241-
// ---------------------------------------------
242-
// Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss
242+
// Progress Bar Animation Keyframes
243+
// --------------------------------------------------
243244

245+
// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L323-L357
244246
@keyframes primary-indeterminate-translate {
245247
0% {
246248
transform: translateX(0);
@@ -263,6 +265,7 @@
263265
}
264266
}
265267

268+
// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L359-L379
266269
@keyframes primary-indeterminate-scale {
267270
0% {
268271
transform: scaleX(0.08);
@@ -285,6 +288,7 @@
285288
}
286289
}
287290

291+
// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L381-L414
288292
@keyframes secondary-indeterminate-translate {
289293
0% {
290294
animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
@@ -309,6 +313,7 @@
309313
}
310314
}
311315

316+
// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L416-L452
312317
@keyframes secondary-indeterminate-scale {
313318
0% {
314319
animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);

0 commit comments

Comments
 (0)