AdminLTE/scss/layout/_layout-mobile.scss

66 lines
1.2 KiB
SCSS

@include media-breakpoint-down(md) {
.wrapper {
grid-template-areas:
"main-sidebar main-brand main-header"
"main-sidebar content-wrapper main-header"
"main-sidebar main-footer main-header";
grid-template-columns: auto 1fr auto;
.main-sidebar {
position: fixed;
top: 0;
bottom: 0;
margin-left: -#{$sidebar-width};
min-height: 100vh;
.sidebar {
overflow-x: hidden;
overflow-y: auto;
}
}
.main-header {
position: fixed;
top: 0;
bottom: 0;
min-height: 100vh;
z-index: $zindex-header-mobile;
width: $sidebar-width;
margin-left: -#{$sidebar-width};
align-items: baseline;
@include transition($sidebar-transition);
.navbar-nav {
flex-direction: column;
}
.sidebar-full-icon {
display: none;
}
}
.brand-link {
animation: none;
}
.sidebar-full-icon,
.header-full-icon {
display: block;
}
}
.sidebar-open {
.main-sidebar {
margin-left: 0;
}
}
@include media-breakpoint-down(md) {
.header-mobile-open {
.main-header {
margin-left: 0;
}
}
}
}