87 lines
1.5 KiB
SCSS
87 lines
1.5 KiB
SCSS
|
@import "~theme/breakpoints";
|
||
|
|
|
||
|
|
// @todo RTL layout
|
||
|
|
|
||
|
|
:host {
|
||
|
|
--side-width: 100%;
|
||
|
|
--side-min-width: 270px;
|
||
|
|
--side-max-width: 28%;
|
||
|
|
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
contain: strict;
|
||
|
|
}
|
||
|
|
|
||
|
|
:host-context(ion-app.md) {
|
||
|
|
--border: 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: .55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-content,
|
||
|
|
ion-router-outlet {
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
position: relative;
|
||
|
|
box-shadow: none !important;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-content {
|
||
|
|
display: flex;
|
||
|
|
flex-shrink: 0;
|
||
|
|
order: -1;
|
||
|
|
border-left: unset;
|
||
|
|
border-right: unset;
|
||
|
|
border-inline-start: 0;
|
||
|
|
border-inline-end: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-router-outlet {
|
||
|
|
flex: 1;
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
::ng-deep ion-header {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
:host(.outlet-activated) {
|
||
|
|
|
||
|
|
ion-router-outlet {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
ion-content {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: $breakpoint-tablet) {
|
||
|
|
|
||
|
|
ion-content {
|
||
|
|
border-inline-end: var(--border);
|
||
|
|
min-width: var(--side-min-width);
|
||
|
|
max-width: var(--side-max-width);
|
||
|
|
}
|
||
|
|
|
||
|
|
:host(.outlet-activated) ion-content {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|