/* ============================================================================ Slide Inspector — layout Promotes three raw My-Inventory concepts into one detail-viewing interaction: · 31 Slide-over — the detail pane slides in over the table from the right · 33 Inspector — once open, browse records with ↑/↓, ▲▼ stepper + nav list · 35 Peek→Expand — a narrow "peek" of key facts widens to the full record States live as classes on : peek | expand | (none = closed); a single `cur` index drives selection. Layout only — every color/space/type is a --sds-* token. Shared vocabulary (.st, .num, .muted, review-bar) lives in ../../_shared/base.css. ========================================================================== */ /* ---- App grid: rail | main --------------------------------------------- */ .app { display: grid; grid-template-columns: 224px 1fr; height: calc(100vh - 34px); } /* ---- Rail: brand over sidenav ------------------------------------------ */ .rail { border-right: 1px solid var(--sds-color-border); background: var(--sds-color-surface); display: flex; flex-direction: column; padding: var(--sds-space-400) var(--sds-space-300); gap: var(--sds-space-200); overflow: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: var(--sds-space-200) var(--sds-space-200) var(--sds-space-300); } .brand sds-logo { --sds-logo-height: 22px; height: 22px; display: inline-flex; } .brand .product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; } .brand .product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); } .rail sds-sidenav { width: 100%; } /* ---- Main column: header · toolbar · list (fills) · status ------------- */ .main { min-width: 0; display: flex; flex-direction: column; min-height: 0; padding: var(--sds-space-500) var(--sds-space-600) var(--sds-space-400); } .pagehead { display: flex; align-items: flex-end; gap: var(--sds-space-400); margin-bottom: var(--sds-space-400); } .pagehead .title { font-family: var(--sds-font-family-headline); font-size: var(--sds-type-headline-4-size); line-height: var(--sds-type-headline-4-line); font-weight: var(--sds-type-headline-4-weight); margin: 0; } .pagehead .sub { color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); margin-top: var(--sds-space-100); } .pagehead .sub b { color: var(--sds-color-text); font-variant-numeric: tabular-nums; font-weight: var(--sds-font-weight-bold); } .pagehead .actions { margin-left: auto; display: flex; gap: var(--sds-space-200); } .toolbar { display: flex; align-items: center; gap: var(--sds-space-300); margin-bottom: var(--sds-space-400); } .toolbar .groupby { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); background: var(--sds-color-surface); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-m); padding: var(--sds-space-200) var(--sds-space-300); } .toolbar .groupby b { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); } .toolbar sds-search { margin-left: auto; width: 240px; } /* ---- List: the positioned container the inspector slides over ---------- */ .list { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-l); background: var(--sds-color-surface); } .tablewrap { flex: 1; overflow: auto; } /* ---- Table ------------------------------------------------------------- */ .dtable { width: 100%; border-collapse: collapse; font-size: var(--sds-type-body-small-size); } .dtable thead th { position: sticky; top: 0; z-index: 2; background: var(--sds-color-surface-strong); text-align: left; color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-bold); font-size: var(--sds-type-footnote-size); letter-spacing: .04em; text-transform: uppercase; padding: var(--sds-space-300) var(--sds-space-400); border-bottom: 2px solid var(--sds-color-border-strong); white-space: nowrap; } .dtable thead th.num { text-align: right; } .dtable thead th.c-cbx { width: 38px; } .dtable tbody td { height: 40px; padding: 0 var(--sds-space-400); border-bottom: 1px solid var(--sds-color-border); white-space: nowrap; } .dtable tbody tr { cursor: pointer; } .dtable tbody tr:hover td { background: var(--sds-color-surface-hover); } .dtable tbody tr.sel td { background: var(--sds-color-surface-strong); box-shadow: inset 3px 0 0 var(--sds-color-primary); } .dtable .id { font-family: var(--sds-font-family-text); color: var(--sds-color-text); font-variant-numeric: tabular-nums; } .dtable .nm-cell { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); } .dtable td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--sds-color-text-muted); } .dtable td.c-cbx { width: 38px; } .cbx { width: 15px; height: 15px; border: 1.5px solid var(--sds-color-border-strong); border-radius: var(--sds-radius-s); display: inline-block; vertical-align: middle; } .cbx.on { background: var(--sds-color-primary); border-color: var(--sds-color-primary); position: relative; } .cbx.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ---- Scrim: dims the table in EXPAND only; pointer-events follow opacity- */ .scrim { position: absolute; inset: 0; z-index: 2; background: rgba(16,17,22,.18); opacity: 0; pointer-events: none; transition: opacity .22s ease; } body.expand .scrim { opacity: 1; pointer-events: auto; } /* ---- The slide-over inspector (03 · Workbench detail look) -------------- */ .detail { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; min-width: 380px; background: var(--sds-color-surface); border-left: 1px solid var(--sds-color-border); box-shadow: -20px 0 48px -26px rgba(16,16,16,.45); display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.1,1), width .26s cubic-bezier(.4,0,.1,1), min-width .26s cubic-bezier(.4,0,.1,1); z-index: 3; } body.peek .detail, body.expand .detail { transform: translateX(0); } /* slide in for either open state */ body.expand .detail { width: 56%; min-width: 540px; } /* widen on expand */ .d-close { position: absolute; top: var(--sds-space-300); right: var(--sds-space-300); width: 28px; height: 28px; border: 0; background: none; cursor: pointer; border-radius: var(--sds-radius-m); color: var(--sds-color-text-muted); font-size: 20px; line-height: 1; display: grid; place-items: center; z-index: 2; } .d-close:hover { background: var(--sds-color-surface-strong); color: var(--sds-color-text); } /* header — visible in peek AND expand (mirrors workbench .dhead) */ .dhead { padding: var(--sds-space-400) var(--sds-space-500); border-bottom: 1px solid var(--sds-color-border); } .stepper { display: flex; align-items: center; gap: var(--sds-space-200); margin-bottom: var(--sds-space-300); } .st-btn { width: 26px; height: 26px; border: 1px solid var(--sds-color-border-strong); background: var(--sds-color-surface); border-radius: var(--sds-radius-m); cursor: pointer; color: var(--sds-color-text-muted); font-size: 10px; display: grid; place-items: center; } .st-btn:hover { border-color: var(--sds-color-primary); color: var(--sds-color-primary); } .st-pos { font-variant-numeric: tabular-nums; font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); margin-left: var(--sds-space-100); } .st-pos b { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); } .st-hint { margin-left: auto; font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); } .dhead .eyebrow { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); } .dhead .did { font-family: var(--sds-font-family-headline); font-size: var(--sds-type-headline-6-size); line-height: var(--sds-type-headline-6-line); font-weight: var(--sds-type-headline-6-weight); margin-top: var(--sds-space-100); } .dhead .dcode { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); margin-top: 2px; } .pk-status { margin-top: var(--sds-space-300); } .dactions { display: flex; align-items: center; gap: var(--sds-space-200); margin-top: var(--sds-space-300); } .clp { display: none; } body.expand .exp { display: none; } body.expand .clp { display: inline-flex; } .open-ext { margin-left: auto; cursor: pointer; font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); color: var(--sds-color-primary); } .open-ext:hover { text-decoration: underline; } /* quick key facts — peek only */ .pk-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sds-space-300) var(--sds-space-400); padding: var(--sds-space-400) var(--sds-space-500); } .kf { display: flex; flex-direction: column; gap: 2px; } .kf-t { font-size: var(--sds-type-footnote-size); text-transform: uppercase; letter-spacing: .04em; color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-bold); } .kf-v { font-size: var(--sds-type-body-large-size); font-weight: var(--sds-font-weight-bold); color: var(--sds-color-text); } body.expand .pk-facts { display: none; } /* full detail replaces the peek facts when expanded */ /* full detail body — revealed on expand */ .full-body { flex: 1; overflow: auto; display: none; } body.expand .full-body { display: block; } /* preview viewport (mirrors workbench .dview / .dpreview) */ .dview { padding: var(--sds-space-400) var(--sds-space-500) var(--sds-space-300); } .dview .vtabs { margin-bottom: var(--sds-space-300); } .dpreview { height: 200px; border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-m); background: var(--sds-color-bg); display: grid; place-items: center; } .dpreview .tn-big { width: 60%; height: 64px; border-radius: var(--sds-radius-m); border: 1px solid var(--sds-color-border); background: linear-gradient(var(--sds-color-surface-strong), var(--sds-color-surface-strong)) padding-box, repeating-linear-gradient(135deg, var(--sds-color-border) 0 1px, transparent 1px 7px); } /* parameters key/value list (mirrors workbench .dsection / .params) */ .dsection { padding: var(--sds-space-300) var(--sds-space-500) var(--sds-space-500); } .dtitle { font-family: var(--sds-font-family-text); font-size: var(--sds-type-body-large-size); font-weight: var(--sds-font-weight-bold); margin: 0 0 var(--sds-space-200); } .params { margin: 0; max-width: 640px; } .params .pr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sds-space-300); padding: var(--sds-space-200) 0; border-bottom: 1px solid var(--sds-color-border); font-size: var(--sds-type-body-small-size); } .params dt { display: flex; align-items: baseline; gap: var(--sds-space-200); min-width: 0; margin: 0; } .params .ty { flex: none; width: 48px; color: var(--sds-color-text-muted); font-size: var(--sds-type-footnote-size); } .params .nm { color: var(--sds-color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .params dd { margin: 0; text-align: right; color: var(--sds-color-text); white-space: nowrap; font-weight: var(--sds-font-weight-bold); } /* ---- Status bar -------------------------------------------------------- */ .status { display: flex; align-items: center; gap: var(--sds-space-400); margin-top: var(--sds-space-300); padding: var(--sds-space-200) var(--sds-space-100); font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); font-variant-numeric: tabular-nums; } .status .s-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--sds-color-text-muted); } .status .s-ok .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--sds-color-success); } .status .md-status { text-transform: uppercase; letter-spacing: .06em; font-weight: var(--sds-font-weight-bold); color: var(--sds-color-text); } .status .right { margin-left: auto; } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 1080px) { body.expand .detail { width: 84%; } }