Skip to content

Commit f162937

Browse files
desig9steindesig9stein
authored
Fix circular progress value and keyframes names (#1543)
1 parent 5d3b162 commit f162937

File tree

6 files changed

+37
-35
lines changed

6 files changed

+37
-35
lines changed

‎src/components/progress/themes/animations.scss‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ $easing-curves: (
2929
}
3030

3131
// Primary animation
32-
@keyframes indeterminate-primary {
32+
@keyframes igc-indeterminate-primary {
3333
0% {
3434
transform: translateX(0);
3535
}
@@ -49,7 +49,7 @@ $easing-curves: (
4949
}
5050
}
5151

52-
@keyframes indeterminate-primary-scale {
52+
@keyframes igc-indeterminate-primary-scale {
5353
0% {
5454
transform: scaleX(0.08);
5555
}
@@ -70,7 +70,7 @@ $easing-curves: (
7070
}
7171

7272
// Secondary animation
73-
@keyframes indeterminate-secondary {
73+
@keyframes igc-indeterminate-secondary {
7474
0% {
7575
animation-timing-function: timing-function('secondary-translate-start');
7676
transform: translateX(0);
@@ -91,7 +91,7 @@ $easing-curves: (
9191
}
9292
}
9393

94-
@keyframes indeterminate-secondary-scale {
94+
@keyframes igc-indeterminate-secondary-scale {
9595
0% {
9696
animation-timing-function: timing-function('secondary-scale-slow-start');
9797
transform: scaleX(0.08);
@@ -113,7 +113,7 @@ $easing-curves: (
113113
}
114114

115115
// Fluent linear animations
116-
@keyframes indeterminate-bar-fluent {
116+
@keyframes igc-indeterminate-bar-fluent {
117117
0% {
118118
transform: translateX(-100%);
119119
transform-origin: left;
@@ -125,7 +125,7 @@ $easing-curves: (
125125
}
126126
}
127127

128-
@keyframes indeterminate-bar-fluent-rtl {
128+
@keyframes igc-indeterminate-bar-fluent-rtl {
129129
0% {
130130
transform: translateX(100%);
131131
transform-origin: right;
@@ -138,7 +138,7 @@ $easing-curves: (
138138
}
139139

140140
// Circular animations
141-
@keyframes indeterminate-accordion {
141+
@keyframes igc-indeterminate-accordion {
142142
0% {
143143
stroke-dashoffset: calc(#{$circumference} * 2);
144144
stroke-dasharray: calc(#{$circumference} * 9 / 10);
@@ -149,7 +149,7 @@ $easing-curves: (
149149
}
150150
}
151151

152-
@keyframes indeterminate-accordion-rtl {
152+
@keyframes igc-indeterminate-accordion-rtl {
153153
0% {
154154
stroke-dashoffset: calc(#{$circumference} * -2);
155155
stroke-dasharray: calc(#{$circumference} * 9 / 10);
@@ -162,7 +162,7 @@ $easing-curves: (
162162

163163
// Fluent: Circular progress animation for indeterminate state.
164164
// Dynamically changes stroke-dasharray and rotates for a smooth spinning effect.
165-
@keyframes indeterminate-circular-fluent {
165+
@keyframes igc-indeterminate-circular-fluent {
166166
0% {
167167
// Start the stroke at the correct position by adjusting the dasharray and dashoffset
168168
stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
@@ -193,7 +193,7 @@ $easing-curves: (
193193
}
194194
}
195195

196-
@keyframes indeterminate-circular-fluent-rtl {
196+
@keyframes igc-indeterminate-circular-fluent-rtl {
197197
0% {
198198
stroke-dasharray: calc(#{$circumference} * 0.0001), #{$circumference};
199199

@@ -220,7 +220,7 @@ $easing-curves: (
220220
}
221221

222222
// Generic animations
223-
@keyframes rotate-center {
223+
@keyframes igc-rotate-center {
224224
0% {
225225
transform: rotate(0);
226226
}
@@ -230,14 +230,14 @@ $easing-curves: (
230230
}
231231
}
232232

233-
@keyframes initial-counter {
233+
@keyframes igc-initial-counter {
234234
from {
235235
--_progress-integer: 0;
236236
--_progress-fraction: 0;
237237
}
238238
}
239239

240-
@keyframes initial-width {
240+
@keyframes igc-initial-width {
241241
from {
242242
width: 0;
243243
}
@@ -247,7 +247,7 @@ $easing-curves: (
247247
}
248248
}
249249

250-
@keyframes initial-dashoffset {
250+
@keyframes igc-initial-dashoffset {
251251
from {
252252
/* Start with no progress (0%) */
253253
stroke-dashoffset: #{$circumference};

‎src/components/progress/themes/circular/circular.progress.base.scss‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,13 @@
3030
}
3131

3232
[part~='counter'] {
33-
animation: initial-counter var(--_transition-duration) ease-in-out;
33+
animation: igc-initial-counter var(--_transition-duration) ease-in-out;
3434
transition:
3535
--_progress-integer var(--_transition-duration) ease-in-out,
3636
--_progress-fraction var(--_transition-duration) ease-in-out;
3737
counter-reset:
3838
progress-integer var(--_progress-integer, 0)
3939
progress-fraction var(--_progress-fraction, 0);
40-
41-
&::before {
42-
@include type-style('subtitle-2');
43-
}
4440
}
4541

4642
[part~='counter']:not([part~='fraction'])::before {
@@ -58,7 +54,7 @@
5854
transform-origin: center;
5955

6056
&:not([part~='indeterminate']) [part~='fill'] {
61-
animation: initial-dashoffset var(--_transition-duration) linear;
57+
animation: igc-initial-dashoffset var(--_transition-duration) linear;
6258
stroke-dasharray: #{$circumference} #{$circumference};
6359
stroke-dashoffset: calc(#{$circumference} - var(--_progress-percentage) * #{$circumference});
6460
}
@@ -90,18 +86,18 @@
9086

9187
[part~='svg'][part~='indeterminate'] {
9288
transform-origin: 50% 50%;
93-
animation: 3s linear 0s infinite $animation-direction none running rotate-center;
89+
animation: 3s linear 0s infinite $animation-direction none running igc-rotate-center;
9490

9591
[part~='fill'] {
9692
stroke-dashoffset: calc(#{$circumference} * 2);
97-
animation: indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) $animation-direction infinite;
93+
animation: igc-indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) $animation-direction infinite;
9894
}
9995
}
10096

10197
:host(:dir(rtl)),
10298
:host([dir='rtl']) {
10399
[part~='svg'][part~='indeterminate'] [part~='fill'] {
104-
animation-name: indeterminate-accordion-rtl;
100+
animation-name: igc-indeterminate-accordion-rtl;
105101
}
106102

107103
[part~='indeterminate'] {
@@ -118,7 +114,7 @@
118114

119115
[part~='svg'] {
120116
&:not([part~='indeterminate']) [part~='fill'] {
121-
animation: initial-dashoffset-rtl var(--_transition-duration) linear;
117+
animation: igc-initial-dashoffset var(--_transition-duration) linear;
122118
stroke-dasharray: #{$circumference} #{$circumference};
123119
stroke-dashoffset: calc(#{$circumference} + var(--_progress-percentage) * #{$circumference});
124120
}

‎src/components/progress/themes/circular/shared/circular.progress.fluent.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ $theme: $fluent;
2727

2828
[part~='fill'] {
2929
stroke-linecap: round;
30-
animation: 2s linear 0s infinite normal none running indeterminate-circular-fluent
30+
animation: 2s linear 0s infinite normal none running igc-indeterminate-circular-fluent
3131
}
3232
}
3333

3434
:host(:dir(rtl)),
3535
:host([dir='rtl']) {
3636
[part~='svg'][part~='indeterminate'] [part~='fill'] {
37-
animation-name: indeterminate-circular-fluent-rtl;
37+
animation-name: igc-indeterminate-circular-fluent-rtl;
3838
}
3939
}

‎src/components/progress/themes/linear/linear.progress.base.scss‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
:host {
88
--track-size: #{rem(4px)};
99
--linear-animation-duration: 2000ms;
10+
--linear-strips-orientation: -45deg;
11+
}
12+
13+
:host(:dir(rtl)),
14+
:host([dir='rtl']) {
15+
--linear-strips-orientation: 45deg;
1016
}
1117

1218
[part~='base'] {
@@ -51,7 +57,7 @@
5157

5258
[part~='fill']:not([part~='indeterminate']) {
5359
overflow: hidden;
54-
animation: initial-width var(--_transition-duration) linear;
60+
animation: igc-initial-width var(--_transition-duration) linear;
5561
}
5662

5763
[part~='indeterminate'],
@@ -74,20 +80,20 @@
7480

7581
[part~='indeterminate']:not([part~='secondary']) {
7682
transform: scale3d(0, 1, 1);
77-
animation: indeterminate-primary var(--linear-animation-duration) infinite linear;
83+
animation: igc-indeterminate-primary var(--linear-animation-duration) infinite linear;
7884
left: -145.1666%;
7985

8086
&::after {
81-
animation: indeterminate-primary-scale var(--linear-animation-duration) infinite linear;
87+
animation: igc-indeterminate-primary-scale var(--linear-animation-duration) infinite linear;
8288
}
8389
}
8490

8591
[part~='secondary'] {
86-
animation: indeterminate-secondary var(--linear-animation-duration) infinite linear;
92+
animation: igc-indeterminate-secondary var(--linear-animation-duration) infinite linear;
8793
left: -54.8888%;
8894

8995
&::after {
90-
animation: indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;
96+
animation: igc-indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;
9197
width: 100%;
9298
height: inherit;
9399
}
@@ -98,7 +104,7 @@
98104
}
99105

100106
[part~='counter'] {
101-
animation: initial-counter var(--_transition-duration) ease-in-out;
107+
animation: igc-initial-counter var(--_transition-duration) ease-in-out;
102108
counter-reset:
103109
progress-integer var(--_progress-integer, 0)
104110
progress-fraction var(--_progress-fraction, 0);

‎src/components/progress/themes/linear/shared/linear.progress.common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ $theme: $material;
2525

2626
:host([striped][variant='#{$part}']) {
2727
--striped-bg: #{var-get($theme, $color-key) repeating-linear-gradient(
28-
-45deg,
28+
var(--linear-strips-orientation),
2929
var-get($theme, $color-key),
3030
var-get($theme, $color-key) var(--stripe-size),
3131
var-get($theme, 'stripes-color') var(--stripe-size),

‎src/components/progress/themes/linear/shared/linear.progress.fluent.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ $track-color: color(gray, 200);
1717
}
1818

1919
[part~='indeterminate'] {
20-
animation-name: indeterminate-bar-fluent-rtl;
20+
animation-name: igc-indeterminate-bar-fluent-rtl;
2121
}
2222
}
2323

@@ -40,7 +40,7 @@ $track-color: color(gray, 200);
4040
[part~='indeterminate']:not([part~='secondary']) {
4141
width: 33% !important;
4242
min-width: 33%;
43-
animation-name: indeterminate-bar-fluent;
43+
animation-name: igc-indeterminate-bar-fluent;
4444
animation-duration: var(--linear-animation-duration);
4545
animation-timing-function: ease;
4646
animation-iteration-count: infinite;

0 commit comments

Comments
 (0)