From 10f4df42d0c8c6b38fdec63b7bc58bfbfe534688 Mon Sep 17 00:00:00 2001
From: Sina <sinajavaheri@gmail.com>
Date: Sat, 10 Jun 2017 01:26:41 +0430
Subject: [PATCH] fix(item-sliding): RTL fix for item sliding (#11825)

* fix(item-sliding): fix item-sliding RTL

fix a bug that options disappear on RTL

* wrong class

* revert back ts changes

* create scss fixes

* correct order of rule set

* Right is right and left is left

unless we use start or end for rtl and ltr right should be placed right
and so does left.

* using multi-dir and ltr mixins

* Currect order on RTL using ltr and rtl specific mixins

* dupplicate the comment to disable PropertySpelling
---
 src/components/item/item-sliding.scss | 84 ++++++++++++++++++++++-----
 1 file changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/components/item/item-sliding.scss b/src/components/item/item-sliding.scss
index acc0b391ed..3b8554b620 100644
--- a/src/components/item/item-sliding.scss
+++ b/src/components/item/item-sliding.scss
@@ -17,26 +17,53 @@ ion-item-sliding .item {
 }
 
 ion-item-options {
-  @include position(0, 0, null, null);
-
   position: absolute;
-
   z-index: $z-index-item-options;
   display: none;
 
-  justify-content: flex-end;
-
   height: 100%;
 
   font-size: 14px;
-
   visibility: hidden;
+
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    top: 0;
+
+    right: 0;
+  }
+
+  @include ltr() {
+    justify-content: flex-end;
+  }
+
+  @include rtl() {
+    justify-content: flex-start;
+
+    &:not([side=right]) {
+      justify-content: flex-end;
+
+      // scss-lint:disable PropertySpelling
+      right: auto;
+      left: 0;
+    }
+  }
 }
 
 ion-item-options[side=left] {
-  @include position-horizontal(0, auto);
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    right: auto;
+    left: 0;
+  }
 
-  justify-content: flex-start;
+  @include ltr() {
+    justify-content: flex-start;
+  }
+
+  @include rtl() {
+    justify-content: flex-end;
+  }
 }
 
 ion-item-options .button {
@@ -63,6 +90,13 @@ ion-item-options:not([icon-start]) .button:not([icon-only]) {
 }
 
 ion-item-sliding.active-slide {
+  @include rtl() {
+    &.active-options-left ion-item-options:not([side=right]) {
+      width: 100%;
+
+      visibility: visible;
+     }
+  }
 
   .item,
   .item.activated {
@@ -101,19 +135,37 @@ button[expandable] {
 }
 
 ion-item-sliding.active-swipe-right button[expandable] {
-  @include padding-horizontal(90%, null);
-
-  order: 1;
-
   transition-duration: .6s;
   transition-property: padding-left;
+
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    padding-left: 90%;
+  }
+
+  @include ltr() {
+    order: 1;
+  }
+
+  @include rtl() {
+    order: -1;
+  }
 }
 
 ion-item-sliding.active-swipe-left button[expandable] {
-  @include padding-horizontal(null, 90%);
-
-  order: -1;
-
   transition-duration: .6s;
   transition-property: padding-right;
+
+  @include multi-dir() {
+    // scss-lint:disable PropertySpelling
+    padding-right: 90%;
+  }
+
+  @include ltr() {
+    order: -1;
+  }
+
+  @include rtl() {
+    order: 1;
+  }
 }