javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

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

references #17012
This commit is contained in:
Brandy Carney
2019-03-25 13:03:19 -04:00
committed by GitHub
parent 34f6f1d736
commit fccaaf8a91
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/components/progress-bar/progress-bar.scss
View File

@ -20,6 +20,8 @@
width: 100%; width: 100%;
contain: strict; contain: strict;
direction: ltr;
overflow: hidden; overflow: hidden;
} }
@ -41,6 +43,7 @@
.progress-buffer-bar:before, .progress-buffer-bar:before,
.buffer-circles { .buffer-circles {
@include position(0, 0, 0, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -52,7 +55,9 @@
.progress, .progress,
.progress-buffer-bar { .progress-buffer-bar {
@include transform-origin(start, top); /* stylelint-disable-next-line property-blacklist */
transform-origin: left top;
transition: transform 150ms linear; transition: transform 150ms linear;
} }
@ -84,7 +89,13 @@
// -------------------------------------------------- // --------------------------------------------------
.indeterminate-bar-primary { .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; animation: primary-indeterminate-translate 2s infinite linear;
.progress-indeterminate { .progress-indeterminate {
@ -94,7 +105,13 @@
} }
.indeterminate-bar-secondary { .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; animation: secondary-indeterminate-translate 2s infinite linear;
.progress-indeterminate { .progress-indeterminate {
@ -121,7 +138,8 @@
:host(.progress-bar-reversed) { :host(.progress-bar-reversed) {
.progress, .progress,
.progress-buffer-bar { .progress-buffer-bar {
@include transform-origin(end, top); /* stylelint-disable-next-line property-blacklist */
transform-origin: right top;
} }
.buffer-circles, .buffer-circles,

2
core/src/components/progress-bar/progress-bar.tsx
View File

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