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

closes #20994

Co-authored-by: Ramez Atassi <ramez@al-salamah.net>
This commit is contained in:
Ramez Atassi
2020-04-08 22:27:24 +03:00
committed by GitHub
parent 8a02b28efe
commit 7a21708d24
3 changed files with 18 additions and 12 deletions

View File

@ -11,17 +11,15 @@
} }
:host(.split-pane-visible) ::slotted(.split-pane-side) { :host(.split-pane-visible) ::slotted(.split-pane-side) {
@include border(0, var(--border), 0, 0);
min-width: var(--side-min-width); min-width: var(--side-min-width);
max-width: var(--side-max-width); max-width: var(--side-max-width);
border-right: var(--border);
border-left: 0;
} }
:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) { :host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
@include border(0, 0, 0, var(--border));
min-width: var(--side-min-width); min-width: var(--side-min-width);
max-width: var(--side-max-width); max-width: var(--side-max-width);
border-right: 0;
border-left: var(--border);
} }

View File

@ -11,17 +11,15 @@
} }
:host(.split-pane-visible) ::slotted(.split-pane-side) { :host(.split-pane-visible) ::slotted(.split-pane-side) {
@include border(0, var(--border), 0, 0);
min-width: var(--side-min-width); min-width: var(--side-min-width);
max-width: var(--side-max-width); max-width: var(--side-max-width);
border-right: var(--border);
border-left: 0;
} }
:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) { :host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
@include border(0, 0, 0, var(--border));
min-width: var(--side-min-width); min-width: var(--side-min-width);
max-width: var(--side-max-width); max-width: var(--side-max-width);
border-right: 0;
border-left: var(--border);
} }

View File

@ -324,6 +324,16 @@
bottom: $bottom; 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 // Add border radius for all directions
// @param {string} $top-start // @param {string} $top-start
// @param {string} $top-end // @param {string} $top-end