shkim4
c1549b2b4f
Deploy Storybook / deploy (push) Successful in 1m11s
- SW Viewer layer popup: search + 전체 레이어 fixed, only the list scrolls; the all-layers control is the SWLayerVisibilityIcon bulb (role="switch"), one light #d2c8b4 line under it. - Example H and the layer popup AI docs follow the bulb layout (VIEWER, DESIGN_RULES, COMPONENT_CATALOG, COMPOSITION_PATTERNS, AI_GUIDE sync). - Popup toggle switch (Figma toggle_btn_new 633:75188 / 633:75902): one sw.css face for the HM UI Switch in SWPopup and SWViewerSwitch in SWViewerPanel; SW Header switches unchanged. - SW Footer stories: no inner scrollers, fluid screens; workspace fits the viewport. - SW Footer category tabs keep their positions when selected (divider slots kept, pocket edges drawn over the neighbours' padding). - Storybook .sb-page-inner: 1440px max from 1920px (was 80vw). - SW Header equal-split change was cancelled; header CSS unchanged. Verified: check:ai-docs PASS, viewer test 49 PASS (1 FAIL hover face + timeout pre-existing), footer-design-review 21 PASS, browser checks of switch/footer/inner. Not verified: footer-popup-viewer-refinement (needs full Storybook build), text-weight/hover tests, Switch 37x16 AI docs (deferred).
60 lines
3.8 KiB
CSS
60 lines
3.8 KiB
CSS
/* Consumer layout for the composed examples (B, C, D, H). It belongs to the consuming project: it only
|
|
arranges public SW components and reads the public --hm-sw-header-* / --hm-sw-viewer-* tokens provided by <SWTheme>.
|
|
It never styles hm-sw-* classes and adds no new design values. */
|
|
.app-sw-bar {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 2px;
|
|
box-sizing: border-box;
|
|
height: var(--hm-sw-header-height);
|
|
padding-bottom: 1px; /* 48px surfaces in the 49px header, like SWHeader */
|
|
background: var(--hm-sw-header-background);
|
|
}
|
|
/* Object (editing) surface, the same tokens as the SWHeader object area. */
|
|
.app-sw-surface {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--hm-sw-header-gap);
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
padding: 4px;
|
|
border: 1px solid var(--hm-sw-header-object-border-color);
|
|
border-radius: var(--hm-sw-header-object-radius);
|
|
background: var(--hm-sw-header-object-background);
|
|
}
|
|
/* Window-area surface for print / K / window buttons. */
|
|
.app-sw-window {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
background: var(--hm-sw-header-document-background);
|
|
box-shadow: inset 0 0 0 1px var(--hm-sw-header-document-border-color); /* 1px edge without moving the parts */
|
|
}
|
|
/* File well placed first (no home overlap): its own left edge. */
|
|
.app-sw-file-edge {
|
|
display: flex;
|
|
border-left: 1px solid var(--hm-sw-header-document-border-color);
|
|
}
|
|
/* Viewer layer list (example H), the same look as Storybook SW/Viewer's layer popup. Panel tokens only.
|
|
Layer visibility is a 24 x 24 button around SWLayerVisibilityIcon (header bulb), never a switch or checkbox;
|
|
the all-layers control above the list is SWViewerSection title="전체 레이어" + the same bulb button on one row.
|
|
Search and that row stay fixed; only the list scrolls (the section fills the panel body). */
|
|
.app-viewer-layer-popup { flex: 1 1 auto; min-height: 0; }
|
|
.app-viewer-layer-popup > :not(.app-viewer-layers) { flex-shrink: 0; }
|
|
/* Search spans the popup (the panel input is 80px by default). */
|
|
.app-viewer-layer-popup > input.app-viewer-layer-search { width: 100%; }
|
|
.app-viewer-layer-popup > .app-viewer-layers { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
|
|
.app-viewer-layers { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
|
|
.app-viewer-layers > li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 3px; }
|
|
.app-viewer-layers > li:hover { background: rgba(154, 146, 132, 0.25); }
|
|
.app-viewer-layers > li[data-visible="false"] { opacity: 0.45; }
|
|
/* 전체 레이어: the plain SWViewerSection laid out as one row — title (.hm-sw-viewer-section__title) left, bulb right.
|
|
No line between search and this row; one light line (#d2c8b4, --hm-sw-property-table) under it. The bulb lines up
|
|
with the row bulbs: row padding (6px) + the list's scrollbar gutter (needs overflow, so the focus ring sits inside). */
|
|
section.app-viewer-all-layers { flex-direction: row; align-items: center; justify-content: space-between; min-height: 20px;
|
|
padding: 0 6px 8px 0; border-bottom: 1px solid var(--hm-sw-property-table); overflow-y: hidden; scrollbar-gutter: stable; }
|
|
.app-viewer-all-layers .app-viewer-layer-bulb:focus-visible { outline-offset: -2px; }
|
|
.app-viewer-layer-swatch { flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid var(--hm-sw-viewer-panel-inner-border); border-radius: 9999px; }
|
|
.app-viewer-layer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 500; }
|
|
.app-viewer-layer-bulb { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
|
|
.app-viewer-layer-bulb:hover { background: rgba(154, 146, 132, 0.3); }
|