Add support for RTL language.
jrockowitz opened this issue · comments
@NigelOToole First off, YOU ROCK!!! This is the cleanest, easiest to implement progress tracker I have ever seen.
I am including your library in the Webform module for Drupal 8.
Someone just created an issue noting that RTL is not supported.
I hoping that you would just need to tweak the progress bar's layout based on the [dir="rtl"] attribute.
Thanks very much. This is something I have thought about implementing but dont have any experience with. Can you offer any help with this? Perhaps create a codepen with the progress tracker and a suggested way to implement this?
I am not a front-end dev but I was able to add RTL support for the Webform module specific progress bar layouts using the below CSS, which I am sure can be optimized.
[dir="rtl"] .progress-step:not(:last-child)::after {
display: none;
}
[dir="rtl"] .progress-step:not(:first-child)::after {
content: '';
display: block;
position: absolute;
z-index: -10;
top: 12px;
bottom: 12px;
right: -14px;
width: 100%;
height: 4px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
[dir="rtl"] .progress-tracker--center .progress-step::after {
right: -50%
}
Here is the JS Fiddle. https://jsfiddle.net/jrockowitz/fwtpdvfp/11/
I have updated the plugin with some basic RTL support, please have a look.