Skip to content

Commit 6f6167c

Browse files
nolimits4webnolimits4web
committed
fix(progressbar): tweaked styles for RTL
1 parent cdfa92d commit 6f6167c

File tree

5 files changed

+132
-53
lines changed

5 files changed

+132
-53
lines changed

‎src/core/components/progressbar/progressbar-aurora.less‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,39 @@
3434
}
3535
}
3636
}
37-
38-
@keyframes aurora-progressbar-infinite {
39-
0% {
40-
transform: translate3d(-100%, 0, 0);
37+
.ltr({
38+
@keyframes aurora-progressbar-infinite {
39+
0% {
40+
transform: translate3d(-100%, 0, 0);
41+
}
42+
100% {
43+
transform: translate3d(100%, 0, 0);
44+
}
4145
}
42-
100% {
43-
transform: translate3d(100%, 0, 0);
46+
@keyframes aurora-progressbar-infinite-multicolor {
47+
0% {
48+
transform: translate3d(0%, 0, 0);
49+
}
50+
100% {
51+
transform: translate3d(-50%, 0, 0);
52+
}
4453
}
45-
}
46-
@keyframes aurora-progressbar-infinite-multicolor {
47-
0% {
48-
transform: translate3d(0%, 0, 0);
54+
});
55+
.rtl({
56+
@keyframes aurora-progressbar-infinite {
57+
0% {
58+
transform: translate3d(100%, 0, 0);
59+
}
60+
100% {
61+
transform: translate3d(-100%, 0, 0);
62+
}
4963
}
50-
100% {
51-
transform: translate3d(-50%, 0, 0);
64+
@keyframes aurora-progressbar-infinite-multicolor {
65+
0% {
66+
transform: translate3d(0%, 0, 0);
67+
}
68+
100% {
69+
transform: translate3d(50%, 0, 0);
70+
}
5271
}
53-
}
72+
});

‎src/core/components/progressbar/progressbar-ios.less‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,27 @@
2828
}
2929
}
3030
}
31-
32-
@keyframes ios-progressbar-infinite {
33-
0% {
34-
transform: translate3d(-100%, 0, 0);
31+
.ltr({
32+
@keyframes ios-progressbar-infinite {
33+
0% {
34+
transform: translate3d(-100%, 0, 0);
35+
}
36+
100% {
37+
transform: translate3d(100%, 0, 0);
38+
}
3539
}
36-
100% {
37-
transform: translate3d(100%, 0, 0);
40+
});
41+
.rtl({
42+
@keyframes ios-progressbar-infinite {
43+
0% {
44+
transform: translate3d(100%, 0, 0);
45+
}
46+
100% {
47+
transform: translate3d(-100%, 0, 0);
48+
}
3849
}
39-
}
50+
});
51+
4052
@keyframes ios-progressbar-infinite-multicolor {
4153
0% {
4254
transform: translate3d(0%, 0, 0);

‎src/core/components/progressbar/progressbar-md.less‎

Lines changed: 64 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,38 +22,74 @@
2222
}
2323
}
2424
}
25-
26-
@keyframes md-progressbar-infinite-1 {
27-
0% {
28-
transform: translateX(-10%) scaleX(0.1);
29-
}
30-
25% {
31-
transform: translateX(30%) scaleX(0.6);
32-
}
33-
50% {
34-
transform: translateX(100%) scaleX(1);
35-
}
36-
100% {
37-
transform: translateX(100%) scaleX(1);
38-
}
39-
}
40-
@keyframes md-progressbar-infinite-2 {
41-
0% {
42-
transform: translateX(-100%) scaleX(1);
43-
}
44-
40% {
45-
transform: translateX(-100%) scaleX(1);
25+
.ltr({
26+
@keyframes md-progressbar-infinite-1 {
27+
0% {
28+
transform: translateX(-10%) scaleX(0.1);
29+
}
30+
25% {
31+
transform: translateX(30%) scaleX(0.6);
32+
}
33+
50% {
34+
transform: translateX(100%) scaleX(1);
35+
}
36+
100% {
37+
transform: translateX(100%) scaleX(1);
38+
}
4639
}
47-
75% {
48-
transform: translateX(60%) scaleX(0.35);
40+
@keyframes md-progressbar-infinite-2 {
41+
0% {
42+
transform: translateX(-100%) scaleX(1);
43+
}
44+
40% {
45+
transform: translateX(-100%) scaleX(1);
46+
}
47+
75% {
48+
transform: translateX(60%) scaleX(0.35);
49+
}
50+
90% {
51+
transform: translateX(100%) scaleX(0.1);
52+
}
53+
100% {
54+
transform: translateX(100%) scaleX(0.1);
55+
}
4956
}
50-
90% {
51-
transform: translateX(100%) scaleX(0.1);
57+
});
58+
59+
.rtl({
60+
@keyframes md-progressbar-infinite-1 {
61+
0% {
62+
transform: translateX(10%) scaleX(0.1);
63+
}
64+
25% {
65+
transform: translateX(-30%) scaleX(0.6);
66+
}
67+
50% {
68+
transform: translateX(-100%) scaleX(1);
69+
}
70+
100% {
71+
transform: translateX(-100%) scaleX(1);
72+
}
5273
}
53-
100% {
54-
transform: translateX(100%) scaleX(0.1);
74+
@keyframes md-progressbar-infinite-2 {
75+
0% {
76+
transform: translateX(100%) scaleX(1);
77+
}
78+
40% {
79+
transform: translateX(100%) scaleX(1);
80+
}
81+
75% {
82+
transform: translateX(-60%) scaleX(0.35);
83+
}
84+
90% {
85+
transform: translateX(-100%) scaleX(0.1);
86+
}
87+
100% {
88+
transform: translateX(-100%) scaleX(0.1);
89+
}
5590
}
56-
}
91+
});
92+
5793
@keyframes md-progressbar-infinite-multicolor-bg {
5894
0% {
5995
background-color: @green;

‎src/core/components/progressbar/progressbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Progressbar = {
3232
}
3333
$progressbarLine
3434
.transition(typeof duration !== 'undefined' ? duration : '')
35-
.transform(`translate3d(${-100 + progressNormalized}%,0,0)`);
35+
.transform(`translate3d(${(-100 + progressNormalized) * (app.rtl ? -1 : 1)}%,0,0)`);
3636

3737
return $progressbarEl[0];
3838
},

‎src/core/components/progressbar/progressbar.less‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,16 @@
2020
width: 100%;
2121
height: 100%;
2222
position: absolute;
23-
left: 0;
2423
top: 0;
25-
transform: translate3d(-100%, 0, 0);
2624
transition-duration: 150ms;
25+
.ltr({
26+
left: 0;
27+
transform: translate3d(-100%, 0, 0);
28+
});
29+
.rtl({
30+
right: 0;
31+
transform: translate3d(100%, 0, 0);
32+
});
2733
}
2834
}
2935
.progressbar-infinite {
@@ -32,14 +38,20 @@
3238
&:after {
3339
content: '';
3440
position: absolute;
35-
left: 0;
3641
top: 0;
3742
width: 100%;
3843
height: 100%;
39-
transform-origin: left center;
4044
transform: translate3d(0, 0, 0);
4145
display: block;
4246
background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
47+
.ltr({
48+
left: 0;
49+
transform-origin: left center;
50+
});
51+
.rtl({
52+
right: 0;
53+
transform-origin: right center;
54+
});
4355
}
4456
&.color-multi {
4557
background: none !important;

0 commit comments

Comments
 (0)