75 lines
1.4 KiB
SCSS
75 lines
1.4 KiB
SCSS
// @todo RTL layout
|
|
|
|
:host {
|
|
--menu-min-width: 270px;
|
|
--menu-max-width: 28%;
|
|
--menu-display: flex;
|
|
--content-display: block;
|
|
--border-width: 1;
|
|
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
position: absolute;
|
|
inset: 0;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
contain: strict;
|
|
}
|
|
|
|
:host(.menu-only) {
|
|
--menu-min-width: 0;
|
|
--menu-max-width: 100%;
|
|
--content-display: none;
|
|
--border-width: 0;
|
|
}
|
|
|
|
:host(.content-only) {
|
|
--menu-display: none;
|
|
--border-width: 0;
|
|
}
|
|
|
|
:host-context(ion-app.md) {
|
|
--border: calc(var(--border-width) * 1px) solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13))));
|
|
}
|
|
|
|
:host-context(ion-app.ios) {
|
|
--border: calc(var(--border-width) * .55px) solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
|
|
}
|
|
|
|
.menu,
|
|
.content {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: relative;
|
|
box-shadow: none !important;
|
|
z-index: 0;
|
|
}
|
|
|
|
.menu {
|
|
display: var(--menu-display);
|
|
flex-shrink: 0;
|
|
order: -1;
|
|
border-left: unset;
|
|
border-right: unset;
|
|
border-inline-start: 0;
|
|
border-inline-end: var(--border);
|
|
min-width: var(--menu-min-width);
|
|
max-width: var(--menu-max-width);
|
|
width: 100%;
|
|
}
|
|
|
|
.content {
|
|
display: var(--content-display);
|
|
flex: 1;
|
|
|
|
::ng-deep ion-header {
|
|
display: none;
|
|
}
|
|
|
|
}
|