59 lines
1.4 KiB
CSS
59 lines
1.4 KiB
CSS
/* RTL Progress Bar Fixes */
|
|
/* This file contains fixes for progress bars in RTL (Arabic) mode */
|
|
|
|
/* Ensure progress bars are visible and animate correctly in RTL */
|
|
.progress {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
.progress-bar {
|
|
/* Ensure the progress bar fills from left to right even in RTL */
|
|
transform-origin: left center !important;
|
|
}
|
|
|
|
/* Fix for animated progress bars in RTL */
|
|
@keyframes progress-bar-rtl {
|
|
from {
|
|
width: 0%;
|
|
}
|
|
to {
|
|
width: var(--progress-width);
|
|
}
|
|
}
|
|
|
|
/* Apply animation to progress bars with data-width attribute */
|
|
.progress-bar[data-width] {
|
|
animation: progress-bar-rtl 0.8s ease-in-out forwards;
|
|
width: 0%;
|
|
}
|
|
|
|
/* Ensure progress bar text is still RTL if needed */
|
|
.progress-bar .progress-bar-text {
|
|
direction: rtl;
|
|
}
|
|
|
|
/* Fix for striped progress bars in RTL */
|
|
.progress-bar-striped {
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
rgba(255, 255, 255, 0.15) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, 0.15) 50%,
|
|
rgba(255, 255, 255, 0.15) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
) !important;
|
|
}
|
|
|
|
/* Ensure progress bar colors work correctly */
|
|
.progress-bar.bg-success,
|
|
.progress-bar.bg-info,
|
|
.progress-bar.bg-warning,
|
|
.progress-bar.bg-danger,
|
|
.progress-bar.bg-primary,
|
|
.progress-bar.bg-secondary {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|