mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
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:
@ -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);
|
|
||||||
}
|
}
|
||||||
|
@ -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);
|
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Reference in New Issue
Block a user