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 ionic-team#20994
ataramez · Apr 8, 2020 · 79d2cf0 · 79d2cf0
1 parent d03dccb
commit 79d2cf0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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