88 lines
1.9 KiB
SCSS
88 lines
1.9 KiB
SCSS
@import "~theme/globals";
|
|
|
|
:host {
|
|
--menu-min-width: 270px;
|
|
--menu-max-width: 28%;
|
|
--menu-box-shadow: var(--core-menu-box-shadow-end);
|
|
--menu-z: 2;
|
|
--menu-border-width: 1px;
|
|
--menu-border-color: var(--stroke);
|
|
--menu-display: flex;
|
|
--content-display: block;
|
|
--content-outlet-display: none;
|
|
--content-placeholder-display: var(--content-display);
|
|
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
position: absolute;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
contain: strict;
|
|
|
|
.menu,
|
|
.content-outlet {
|
|
top: var(--offset-top);
|
|
height: calc(100% - var(--offset-top));
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: relative;
|
|
box-shadow: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.menu {
|
|
box-shadow: var(--menu-box-shadow);
|
|
z-index: var(--menu-z);
|
|
display: var(--menu-display);
|
|
flex-shrink: 0;
|
|
order: -1;
|
|
width: 100%;
|
|
@include border-start(0);
|
|
@include border-end(var(--menu-border-width), solid, var(--menu-border-color));
|
|
min-width: var(--menu-min-width);
|
|
max-width: var(--menu-max-width);
|
|
}
|
|
|
|
.content-outlet {
|
|
display: var(--content-outlet-display);
|
|
flex: 1;
|
|
|
|
::ng-deep ion-header {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
.content-placeholder {
|
|
display: var(--content-placeholder-display);
|
|
flex: 1;
|
|
position: relative;
|
|
background-color: var(--ion-background);
|
|
}
|
|
|
|
}
|
|
|
|
:host(.menu-only) {
|
|
--menu-min-width: 0px;
|
|
--menu-max-width: 100%;
|
|
--content-display: none;
|
|
--menu-border-width: 0px;
|
|
--menu-box-shadow: none;
|
|
--menu-z: 0px;
|
|
--selected-item-color: transparent;
|
|
}
|
|
|
|
:host(.content-only) {
|
|
--menu-display: none;
|
|
--menu-border-width: 0px;
|
|
}
|
|
|
|
:host(.outlet-activated) {
|
|
--content-placeholder-display: none;
|
|
--content-outlet-display: var(--content-display);
|
|
}
|