@webority/theme 0.3.0 → 0.5.0

package/scss/wui/_shell.scss

@@ -0,0 +1,474 @@
+// Splash / boot loader, persistent app shell.
+//
+// Part of the wui-components layer — see _wui-components.scss for the whole
+// picture and the load order. Order within the layer is LOAD-BEARING: these
+// partials are a split of one stylesheet, not independent modules, so a rule
+// here may be overridden by a later partial. Never reorder the imports.
+
+// Splash / boot loader — the full-viewport screen shown while the app resolves
+// its session, before the first route can render.
+// ============================================================================
+.splash {
+    position: fixed;
+    inset: 0;
+    // Above the app but below a modal's backdrop, so an error dialog raised during
+    // boot is never trapped behind it.
+    z-index: 1040;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    background: var(--color-bg);
+}
+.splash-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 18px;
+    text-align: center;
+}
+.splash-logo {
+    max-width: 180px;
+    height: auto;
+}
+.splash-mark {
+    width: 56px;
+    height: 56px;
+    display: inline-grid;
+    place-items: center;
+    border-radius: var(--radius-lg);
+    background: var(--color-primary);
+    color: var(--color-on-scrim);
+    font-size: 22px;
+    font-weight: 700;
+}
+.splash-text {
+    font-size: 14px;
+    color: var(--color-text-muted);
+}
+// A determinate-looking bar with no real progress value would lie about how far
+// along boot is, so this is an indeterminate sweep.
+.splash-bar {
+    position: relative;
+    width: 180px;
+    height: 3px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+}
+.splash-bar::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 40%;
+    border-radius: 999px;
+    background: var(--color-primary);
+    animation: wui-splash-sweep 1.1s var(--wui-ease-ui) infinite;
+}
+@keyframes wui-splash-sweep {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(350%);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .splash-bar::after {
+        // Motion off, but keep a visible bar — an empty track would read as stalled.
+        animation: none;
+        width: 100%;
+        opacity: 0.55;
+    }
+}
+
+// ============================================================================
+// Persistent app shell — the sidebar + topbar + content frame every authenticated
+// portal sits inside.
+//
+// Every class here is `app-`-prefixed. The obvious names are already taken:
+// `.nav-item`, `.nav-link` and `.navbar-*` are Bootstrap's own, so a shared
+// package claiming them would silently restyle every consumer's Bootstrap nav.
+// ============================================================================
+
+// The rail width and the expanded width are variables because three separate
+// things must agree on them: the grid column, the collapse toggle's left offset,
+// and the footer's left inset. Hardcoding them in three places is how they drift.
+.app-shell {
+    --app-sidebar-w: 260px;
+    --app-sidebar-rail-w: 88px;
+
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--app-sidebar-w) 1fr;
+    min-height: 100vh;
+    background: var(--color-bg);
+    transition: grid-template-columns 0.2s var(--wui-ease-ui);
+}
+.app-shell.collapsed {
+    grid-template-columns: var(--app-sidebar-rail-w) 1fr;
+}
+// A page with no side nav at all (a focused wizard, a full-bleed report).
+.app-shell.no-sidebar {
+    grid-template-columns: 1fr;
+}
+.app-shell.no-sidebar .app-sidebar,
+.app-shell.no-sidebar .app-sidebar-toggle {
+    display: none;
+}
+.app-shell.no-sidebar .app-footer {
+    left: 0;
+}
+
+.app-sidebar {
+    position: sticky;
+    top: 0;
+    align-self: start;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 20px 16px;
+    overflow: hidden;
+    background: var(--color-surface);
+    transition: padding 0.2s var(--wui-ease-ui);
+}
+.app-shell.collapsed .app-sidebar {
+    padding: 20px 12px;
+}
+.app-sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 32px;
+    margin-bottom: 8px;
+    // The brand row must not shrink when the nav list below it overflows.
+    flex: none;
+    overflow: hidden;
+}
+// The nav list scrolls independently while the brand row stays put. `min-height: 0`
+// is load-bearing — without it this flex child refuses to shrink below its content
+// and the overflow never engages, so the lower nav items become unreachable.
+.app-sidebar-scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow-y: auto;
+    // The rail is chrome, not content: a scrollbar here reads as clutter and, at
+    // 88px collapsed, would eat a meaningful share of the width.
+    scrollbar-width: none;
+}
+.app-sidebar-scroll::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+}
+.app-sidebar-foot {
+    flex: none;
+    padding-top: 12px;
+}
+
+.app-nav-group {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-top: 16px;
+}
+// Groups after the first are separated by a rule; the first sits directly under
+// the brand row and needs none.
+.app-nav-group + .app-nav-group {
+    margin-top: 20px;
+    padding-top: 12px;
+    border-top: 1px solid var(--color-border);
+}
+.app-nav-group-label {
+    padding: 6px 14px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-subtle);
+}
+
+.app-nav-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    // 44px is the touch-target floor, and it is the same control height buttons
+    // and inputs use — the nav reads as part of the same system.
+    min-height: var(--wui-control-height);
+    padding: 9px 14px;
+    border-radius: var(--radius-xl);
+    corner-shape: squircle;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-muted);
+    text-decoration: none;
+    transition:
+        background 0.12s ease,
+        color 0.12s ease,
+        padding 0.2s var(--wui-ease-ui),
+        gap 0.2s var(--wui-ease-ui);
+}
+.app-nav-item:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    text-decoration: none;
+}
+.app-nav-item.active {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+    font-weight: 600;
+}
+.app-nav-item:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+.app-nav-icon {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    color: var(--color-text-subtle);
+}
+.app-nav-item.active .app-nav-icon {
+    color: var(--color-primary);
+}
+.app-nav-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.app-nav-badge {
+    margin-left: auto;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--color-text-subtle);
+}
+// On an active row the badge inverts: the row already carries the soft tint, so a
+// tinted badge on top of it would vanish.
+.app-nav-item.active .app-nav-badge {
+    background: var(--color-surface);
+    color: var(--color-primary);
+}
+
+// Collapsed rail: icons only, centred. The label is removed from the flow rather
+// than hidden, so it cannot leave a phantom gap beside the icon.
+.app-shell.collapsed .app-nav-item {
+    justify-content: center;
+    gap: 0;
+    padding: 9px 0;
+}
+.app-shell.collapsed .app-nav-text,
+.app-shell.collapsed .app-nav-badge,
+.app-shell.collapsed .app-nav-group-label,
+.app-shell.collapsed .app-sidebar-brand-text {
+    display: none;
+}
+
+// A circular button centred on the sidebar's right edge. It is fixed to the
+// viewport, not a sidebar child, because the sidebar clips its own overflow and
+// would cut the button in half.
+.app-sidebar-toggle {
+    position: fixed;
+    // 36px = half the 72px topbar, so the button lines up with the topbar's centre.
+    top: 36px;
+    left: calc(var(--app-sidebar-w) - 12px);
+    z-index: 30;
+    width: 24px;
+    height: 24px;
+    display: inline-grid;
+    place-items: center;
+    transform: translateY(-50%);
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+        left 0.2s var(--wui-ease-ui),
+        background 0.12s ease,
+        color 0.12s ease,
+        box-shadow 0.12s ease;
+}
+.app-sidebar-toggle:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    box-shadow: var(--shadow-sm);
+}
+.app-sidebar-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+.app-shell.collapsed .app-sidebar-toggle {
+    left: calc(var(--app-sidebar-rail-w) - 12px);
+}
+.app-sidebar-toggle > * {
+    transition: transform 0.2s ease;
+}
+.app-shell.collapsed .app-sidebar-toggle > * {
+    transform: rotate(180deg);
+}
+
+.app-main {
+    display: flex;
+    flex-direction: column;
+    // Without this the content column refuses to shrink below its widest child, so
+    // one wide table pushes the whole shell into a horizontal scroll.
+    min-width: 0;
+}
+.app-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    min-height: 72px;
+    padding: 12px 28px;
+    background: var(--color-surface);
+    // Transparent rather than absent, so gaining the divider on scroll doesn't
+    // shift the layout by a pixel.
+    border-bottom: 1px solid transparent;
+    transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+}
+.app-topbar.scrolled {
+    border-bottom-color: var(--color-border);
+}
+// Two groups: the leading one shrinks and ellipsises a long page title, the
+// trailing one is pinned so actions are never pushed off-screen.
+.app-topbar-start {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+.app-topbar-end {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.app-topbar-menu {
+    display: none;
+    flex: none;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+}
+.app-topbar-menu:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.app-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 24px 28px;
+}
+.app-footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: var(--app-sidebar-w);
+    z-index: 30;
+    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
+    backdrop-filter: blur(50px);
+    -webkit-backdrop-filter: blur(50px);
+    transition: left 0.2s var(--wui-ease-ui);
+}
+.app-shell.collapsed .app-footer {
+    left: var(--app-sidebar-rail-w);
+}
+
+// Below lg the sidebar becomes a drawer: off-canvas by default, slid in over a
+// scrim. The grid drops to one column so the content takes the full width.
+@include media-breakpoint-down(lg) {
+    .app-shell.app-shell,
+    .app-shell.app-shell.collapsed {
+        grid-template-columns: 1fr;
+    }
+    .app-shell.app-shell .app-sidebar {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1045;
+        width: var(--app-sidebar-w);
+        padding: 20px 16px;
+        transform: translateX(-100%);
+        transition: transform 0.24s var(--wui-ease-out-quart);
+        box-shadow: var(--shadow-overlay-lg);
+    }
+    .app-shell.app-shell.mobile-open .app-sidebar {
+        transform: translateX(0);
+    }
+    // The rail is a desktop affordance; on a drawer it makes no sense, so the
+    // drawer always shows full labels even when the desktop state is collapsed.
+    .app-shell.app-shell.collapsed .app-nav-item {
+        justify-content: flex-start;
+        gap: 12px;
+        padding: 9px 14px;
+    }
+    .app-shell.app-shell.collapsed .app-nav-text,
+    .app-shell.app-shell.collapsed .app-nav-badge,
+    .app-shell.app-shell.collapsed .app-nav-group-label {
+        display: revert;
+    }
+    .app-shell.app-shell .app-sidebar-toggle {
+        display: none;
+    }
+    .app-shell.app-shell .app-topbar-menu {
+        display: inline-grid;
+    }
+    .app-shell.app-shell .app-footer,
+    .app-shell.app-shell.collapsed .app-footer {
+        left: 0;
+    }
+    .app-shell.app-shell .app-content,
+    .app-shell.app-shell .app-topbar {
+        padding-inline: 16px;
+    }
+}
+// The scrim exists only while the drawer is open, and only below lg — it is
+// rendered unconditionally and made visible here so there is no JS breakpoint check.
+.app-scrim {
+    display: none;
+}
+@include media-breakpoint-down(lg) {
+    .app-shell.app-shell.mobile-open .app-scrim {
+        position: fixed;
+        inset: 0;
+        z-index: 1044;
+        display: block;
+        border: 0;
+        padding: 0;
+        background: var(--color-scrim);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-shell,
+    .app-sidebar,
+    .app-nav-item,
+    .app-sidebar-toggle,
+    .app-sidebar-toggle > *,
+    .app-footer,
+    .app-topbar {
+        transition: none;
+    }
+}