/* ========================================================================== site_left_nav.css — shared left nav / left rail layout for every app ========================================================================== Screen tiers (must match static/js/site_left_nav.js): desktop >= 768px full-width nav (toggle collapses it to a rail) tablet 576px – 767px icon rail (toggle pins it open at full width) mobile < 576px hidden (toggle shows / hides the icon rail) State set on by site_left_nav.js: data-shell-breakpoint "desktop" | "tablet" | "mobile" data-left-nav-state "expanded" | "collapsed" (icon rail) | "closed" (mobile, hidden) Nav markup (both carry [data-shell-left-nav]): Development nav #left-side-card rail class .left-nav-collapsed (site.css) Application nav .esign-left-nav rail class .esign-left-nav--collapsed (esign_nav.css) The rail classes hide the link texts. This file only handles size and position. .site-left-nav--peek Added while the user hovers / taps a rail. The nav opens at full width OVER the page content; a negative right margin keeps its footprint at rail width so the content underneath does not move. ========================================================================== */ :root { /* Overwritten on by site_left_nav.js with the measured top-nav height. */ --site-left-nav-top: var(--top-navbar-height-lg, 72px); --site-left-nav-full-width: var(--side-menu-width-md, 17rem); --site-left-nav-rail-width: 5rem; --site-left-nav-layer: 1001; --site-left-nav-transition: 200ms ease-out; --site-left-nav-shadow: 4px 0 24px rgba(15, 23, 42, 0.15); } /* Each nav family has its own rail width. */ #left-side-card[data-shell-left-nav] { --site-left-nav-rail-width: 5rem; } .esign-left-nav[data-shell-left-nav] { --site-left-nav-rail-width: var(--esign-nav-icon-width, 3.75rem); --site-left-nav-full-width: var(--esign-nav-full-width, 220px); } /* ── Tablet and desktop (>= 576px): nav sits in the page flow ────────────── */ @media (min-width: 576px) { /* Older site.css rules turn the development nav into a fixed strip or push it off-screen below 992px. Keep it in the page flow at every tier. */ #left-side-card[data-shell-left-nav] { position: relative; transform: none; flex: 0 0 auto; align-self: stretch; } #left-side-card[data-shell-left-nav]:not(.left-nav-collapsed) { width: var(--site-left-nav-full-width) !important; min-width: var(--site-left-nav-full-width) !important; } /* Peek: full width over the content, footprint stays at rail width. */ [data-shell-left-nav].site-left-nav--peek { width: var(--site-left-nav-full-width) !important; min-width: var(--site-left-nav-full-width) !important; margin-right: calc(var(--site-left-nav-rail-width) - var(--site-left-nav-full-width)); z-index: var(--site-left-nav-layer); box-shadow: var(--site-left-nav-shadow); } } /* Older site.css rules make the inner development nav a fixed 5rem strip between 576px and 898px. Let it fill its card instead. */ @media (min-width: 576px) and (max-width: 898px) { #left-side-card[data-shell-left-nav] #left-side-menu-nav { position: relative !important; top: 0 !important; width: 100% !important; height: 100% !important; z-index: auto !important; overflow-y: auto; overflow-x: hidden; } } /* ── Mobile (< 576px): hidden until the toggle shows the rail ────────────── */ @media (max-width: 575.98px) { [data-shell-left-nav] { position: fixed !important; top: var(--site-left-nav-top) !important; bottom: 0; left: 0; height: calc(100dvh - var(--site-left-nav-top)) !important; min-height: 0 !important; max-height: none !important; width: var(--site-left-nav-rail-width) !important; min-width: var(--site-left-nav-rail-width) !important; max-width: 86vw; margin: 0 !important; overflow-x: hidden; overflow-y: auto; z-index: var(--site-left-nav-layer) !important; /* Hidden by default (also before JavaScript runs). visibility keeps keyboard focus out of the hidden nav. !important beats the older #left-side-card transform rule in site.css. */ transform: translateX(-100%) !important; visibility: hidden; transition: transform var(--site-left-nav-transition), width var(--site-left-nav-transition), min-width var(--site-left-nav-transition), visibility 0s linear 200ms; } body[data-left-nav-state="collapsed"] [data-shell-left-nav] { transform: translateX(0) !important; visibility: visible; box-shadow: var(--site-left-nav-shadow); transition: transform var(--site-left-nav-transition), width var(--site-left-nav-transition), min-width var(--site-left-nav-transition), visibility 0s; } [data-shell-left-nav].site-left-nav--peek { width: var(--site-left-nav-full-width) !important; min-width: min(var(--site-left-nav-full-width), 86vw) !important; } #left-side-card[data-shell-left-nav] #left-side-menu-nav { position: relative !important; top: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; z-index: auto !important; overflow-y: auto; overflow-x: hidden; } }