fix(split-pane): properly show border in rtl mode (#20995)

closes #20994 Co-authored-by: Ramez Atassi <ramez@al-salamah.net>
ionic-team · Apr 8, 2020 · 7a21708 · 7a21708
1 parent 8a02b28
commit 7a21708
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/core/src/components/split-pane/split-pane.ios.scss b/core/src/components/split-pane/split-pane.ios.scss
@@ -11,17 +11,15 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side) {
+  @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 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,17 +11,15 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side) {
+  @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 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