Joshua
8da593c450
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
73 lines
2.0 KiB
SCSS
73 lines
2.0 KiB
SCSS
// ============================================================================
|
||
// Layout Shell — Adaptive layout container
|
||
// Per CUB-27 spec breakpoints:
|
||
// Compact (0–599px): Header + Content + Bottom Nav (stacked)
|
||
// Medium (600–1023px): Collapsed Nav Rail + Header + Content
|
||
// Expanded (≥1024px): Expandable Nav Rail + Header + Content
|
||
// ============================================================================
|
||
|
||
.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;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Compact (0–599px): Stack layout vertically, bottom nav visible
|
||
// ---------------------------------------------------------------------------
|
||
@media (max-width: 599px) {
|
||
.layout-shell {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.layout-shell__content {
|
||
padding: var(--cc-section-padding-compact);
|
||
// Account for bottom nav bar height
|
||
padding-bottom: calc(var(--cc-bottom-nav-height) + 16px);
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Medium (600–1023px): Sidebar + content, collapsed nav rail
|
||
// ---------------------------------------------------------------------------
|
||
@media (min-width: 600px) and (max-width: 1023px) {
|
||
.layout-shell__content {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Expanded (≥1024px): Full nav rail with expandable behavior
|
||
// ---------------------------------------------------------------------------
|
||
@media (min-width: 1024px) {
|
||
.layout-shell__content {
|
||
padding: var(--cc-section-padding);
|
||
}
|
||
} |