diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index e798411bf7..a8525ee3d7 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -144,7 +144,7 @@ $toggle-ios-item-end-padding-start: $item-ios-padding-start !default; background-color: $toggle-ios-handle-background-color; box-shadow: $toggle-ios-handle-box-shadow; - transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms; + transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms; will-change: transform; contain: strict; @@ -174,6 +174,10 @@ $toggle-ios-item-end-padding-start: $item-ios-padding-start !default; .toggle-ios.toggle-checked .toggle-inner { transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0); + @include rtl() { + transform: translate3d(-($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2)), 0, 0); + } + } diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss index f070514eab..bbbe405a68 100644 --- a/src/components/toggle/toggle.md.scss +++ b/src/components/toggle/toggle.md.scss @@ -180,6 +180,10 @@ $toggle-md-item-end-padding-start: $item-md-padding-start !default; .toggle-md.toggle-checked .toggle-inner { background-color: $toggle-md-handle-background-color-on; transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0); + + @include rtl() { + transform: translate3d(-($toggle-md-track-width - $toggle-md-handle-width), 0, 0); + } } diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts index bac5daf53c..f665cab3cc 100644 --- a/src/components/toggle/toggle.ts +++ b/src/components/toggle/toggle.ts @@ -155,16 +155,18 @@ export class Toggle extends BaseInput implements IonicTapInput, AfterCo let activated: boolean; if (this._value) { - if (currentX + 15 < this._startX) { + if ((this._plt.isRTL && (currentX - 15 > this._startX)) || + (!this._plt.isRTL && (currentX + 15 < this._startX))) { dirty = true; value = false; activated = true; } - } else if (currentX - 15 > this._startX) { + } else if ((this._plt.isRTL && (currentX + 15 < this._startX)) || + (!this._plt.isRTL && (currentX - 15 > this._startX))){ dirty = true; value = true; - activated = (currentX < this._startX + 5); + activated = (this._plt.isRTL ? (currentX > this._startX - 5) : (currentX < this._startX + 5)); } if (dirty) { @@ -190,12 +192,14 @@ export class Toggle extends BaseInput implements IonicTapInput, AfterCo this._zone.run(() => { if (this._value) { - if (this._startX + 4 > endX) { + if ((this._plt.isRTL && (this._startX - 4 < endX)) || + (!this._plt.isRTL && (this._startX + 4 > endX))){ this.value = false; this._haptic.selection(); } - } else if (this._startX - 4 < endX) { + } else if ((this._plt.isRTL && (this._startX + 4 > endX)) || + (!this._plt.isRTL && (this._startX - 4 < endX))) { this.value = true; this._haptic.selection(); } diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss index 155acc4a83..1b9ab8bfac 100644 --- a/src/components/toggle/toggle.wp.scss +++ b/src/components/toggle/toggle.wp.scss @@ -162,6 +162,10 @@ $toggle-wp-item-end-padding-start: $item-wp-padding-start !default; .toggle-wp.toggle-checked .toggle-inner { background-color: $toggle-wp-handle-background-color-on; transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0); + + @include rtl() { + transform: translate3d(-($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2)), 0, 0); + } }