From 79d2cf0aa9b062533534163b1586c02ad7048a4a Mon Sep 17 00:00:00 2001
From: Ramez Atassi <ramez@al-salamah.net>
Date: Wed, 8 Apr 2020 19:55:53 +0300
Subject: [PATCH] fix(split-pane): show border in RTL mode

a new border mixin is added to support borders in both direction modes
(LTR & RTL). This mixin is then used in the split-pane component to fix
the bug

closes #20994
---
 .../components/split-pane/split-pane.ios.scss  | 16 ++--------------
 .../components/split-pane/split-pane.md.scss   | 18 +++---------------
 core/src/themes/ionic.mixins.scss              | 10 ++++++++++
 3 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/core/src/components/split-pane/split-pane.ios.scss b/core/src/components/split-pane/split-pane.ios.scss
index 085ab306adf..ee297f0167b 100644
--- a/core/src/components/split-pane/split-pane.ios.scss
+++ b/core/src/components/split-pane/split-pane.ios.scss
@@ -11,27 +11,15 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side) {
-  @include rtl() {
-    border-right: 0;
-    border-left: var(--border);
-  }
+  @include border(0, var(--border), 0, 0);
 
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: var(--border);
-  border-left: 0;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
-  @include rtl() {
-    border-right: var(--border);
-    border-left: 0;
-  }
+  @include border(0, 0, 0, var(--border));
   
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: 0;
-  border-left: var(--border);
 }
diff --git a/core/src/components/split-pane/split-pane.md.scss b/core/src/components/split-pane/split-pane.md.scss
index 29a910162b8..1336f61d75d 100644
--- a/core/src/components/split-pane/split-pane.md.scss
+++ b/core/src/components/split-pane/split-pane.md.scss
@@ -11,27 +11,15 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side) {
-  @include rtl() {
-    border-right: 0;
-    border-left: var(--border);
-  }
+  @include border(0, var(--border), 0, 0);
 
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: var(--border);
-  border-left: 0;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
-  @include rtl() {
-    border-right: var(--border);
-    border-left: 0;
-  }
-  
+  @include border(0, 0, 0, var(--border));
+
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: 0;
-  border-left: var(--border);
 }
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index cc8b0751f0f..e3e4afb0dc7 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/core/src/themes/ionic.mixins.scss
@@ -324,6 +324,16 @@
   bottom: $bottom;
 }
 
+// Add border for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
+  @include property(border, $top, $end, $bottom, $start);
+}
+
 // Add border radius for all directions
 // @param {string} $top-start
 // @param {string} $top-end