arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Progress): handle carousel and carousel-inverse animations in RTL mode (#2400)

Browse Source 
Co-authored-by: malik jouda <m.jouda@approved.tech>
This commit is contained in:
Malik-Jouda
2024-10-17 23:28:19 +03:00
committed by GitHub
parent 1b7e36cf70
commit 20fb46a3ba
1 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/runtime/components/elements/Progress.vue
View File

@@ -256,6 +256,20 @@ progress:indeterminate {
}
}
[dir=rtl] &.bar-animation-carousel {
&:after {
animation: carousel-rtl 2s ease-in-out infinite;
}
&::-webkit-progress-value {
animation: carousel-rtl 2s ease-in-out infinite;
}
&::-moz-progress-bar {
animation: carousel-rtl 2s ease-in-out infinite;
}
}
&.bar-animation-carousel-inverse {
&:after {
animation: carousel-inverse 2s ease-in-out infinite;
@@ -270,6 +284,20 @@ progress:indeterminate {
}
}
[dir=rtl] &.bar-animation-carousel-inverse {
&:after {
animation: carousel-inverse-rtl 2s ease-in-out infinite;
}
&::-webkit-progress-value {
animation: carousel-inverse-rtl 2s ease-in-out infinite;
}
&::-moz-progress-bar {
animation: carousel-inverse-rtl 2s ease-in-out infinite;
}
}
&.bar-animation-swing {
&:after {
animation: swing 3s ease-in-out infinite;
@@ -315,6 +343,22 @@ progress:indeterminate {
}
}
@keyframes carousel-rtl {
0%,
100% {
width: 50%
}
0% {
transform: translateX(100%)
}
100% {
transform: translateX(-200%)
}
}
@keyframes carousel-inverse {
0%,
@@ -331,6 +375,22 @@ progress:indeterminate {
}
}
@keyframes carousel-inverse-rtl {
0%,
100% {
width: 50%
}
0% {
transform: translateX(-200%)
}
100% {
transform: translateX(100%)
}
}
@keyframes swing {
0%,