57 lines
1.2 KiB
SCSS
57 lines
1.2 KiB
SCSS
|
// ============================================================================
|
||
|
|
// Layout Shell — Adaptive layout container
|
||
|
|
// Desktop: Nav Rail (left) + Main Content (right)
|
||
|
|
// Mobile: Header + Content + Bottom Nav (stacked)
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
.layout-shell {
|
||
|
|
display: flex;
|
||
|
|
min-height: 100vh;
|
||
|
|
background-color: var(--cc-background);
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-shell__nav-rail {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-shell__main {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 0; // Prevent flex overflow
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-shell__header {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-shell__content {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
padding: var(--cc-section-padding);
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-shell__bottom-nav {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mobile: Stack layout vertically, add bottom padding for bottom nav
|
||
|
|
@media (max-width: 599px) {
|
||
|
|
.layout-shell {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-shell__content {
|
||
|
|
// Account for bottom nav bar height
|
||
|
|
padding-bottom: calc(var(--cc-bottom-nav-height) + 16px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Tablet: Ensure content padding accommodates collapsed nav rail
|
||
|
|
@media (min-width: 600px) and (max-width: 1023px) {
|
||
|
|
.layout-shell__content {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
}
|