Skip to content
Permalink
Browse files

fix(progress-bar): flip rtl using the existing reversed property (#17464

)

updates the progress bar to always use the ltr dir but take advantage of the reversed property when dir is rtl.

references #17012
  • Loading branch information...
brandyscarney committed Mar 25, 2019
1 parent 34f6f1d commit fccaaf8a91f7e4750f99f7c8436847118f911d80
@@ -20,6 +20,8 @@
width: 100%;

contain: strict;

direction: ltr;
overflow: hidden;
}

@@ -41,6 +43,7 @@
.progress-buffer-bar:before,
.buffer-circles {
@include position(0, 0, 0, 0);

position: absolute;

width: 100%;
@@ -52,7 +55,9 @@

.progress,
.progress-buffer-bar {
@include transform-origin(start, top);
/* stylelint-disable-next-line property-blacklist */
transform-origin: left top;

transition: transform 150ms linear;
}

@@ -84,7 +89,13 @@
// --------------------------------------------------

.indeterminate-bar-primary {
@include position(0, 0, 0, -145.166611%);
/* stylelint-disable property-blacklist */
top: 0;
right: 0;
bottom: 0;
left: -145.166611%;
/* stylelint-enable property-blacklist */

animation: primary-indeterminate-translate 2s infinite linear;

.progress-indeterminate {
@@ -94,7 +105,13 @@
}

.indeterminate-bar-secondary {
@include position(0, 0, 0, -54.888891%);
/* stylelint-disable property-blacklist */
top: 0;
right: 0;
bottom: 0;
left: -54.888891%;
/* stylelint-enable property-blacklist */

animation: secondary-indeterminate-translate 2s infinite linear;

.progress-indeterminate {
@@ -121,7 +138,8 @@
:host(.progress-bar-reversed) {
.progress,
.progress-buffer-bar {
@include transform-origin(end, top);
/* stylelint-disable-next-line property-blacklist */
transform-origin: right top;
}

.buffer-circles,
@@ -64,7 +64,7 @@ export class ProgressBar implements ComponentInterface {
...createColorClasses(color),
[`progress-bar-${type}`]: true,
'progress-paused': paused,
'progress-bar-reversed': reversed,
'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
}
};
}

0 comments on commit fccaaf8

Please sign in to comment.
You can’t perform that action at this time.