shkim4
126a35d60d
Components (new public exports, existing APIs unchanged) - SWPopupPropertyRow: the property window row (layer / color / line style pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers. - SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px), used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI Select there and the story-only .sw-viewer-story-select CSS). - SWSlider: appearance "panel" (default, the gauge the popup used) or "property" (the property window gauge), same value / events. Shares the property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens. Footer - --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected border token now references it): Model selected / hover, Layout hover and Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg). - Model / Layout text stays the Default text (#161410, 12px, 400, no outline) on hover and on the orange surface: only the surface changes. - bg_vacant covers the slot row only: the open pocket of a category tab no longer splits where it crosses the last command (e.g. 수정 with one command). Viewer - Panel title art keeps 308px (max-width: none against host img resets), so panels under 312px (250 x auto, 300px) paint the title from the left edge. Storybook - SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states) removed; full-footer keeps the live composition only, responsive keeps the widths (reference / Figma image sections removed, image files kept); the aux Figma comparison moved to the verification Story figma-variants. - SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
37 lines
3.2 KiB
CSS
37 lines
3.2 KiB
CSS
/* Story-owned layout for SW/Footer. Like a consuming program it arranges public components; it never styles
|
|
hm-sw-* classes. Surfaces behind standalone parts read the public --hm-sw-footer-* tokens. */
|
|
.sw-footer-story-screen { position: relative; display: flex; flex-direction: column; background: #060606; }
|
|
.sw-footer-story-canvas { position: relative; background: var(--sw-story-canvas); }
|
|
.sw-footer-story-workspace { display: flex; flex-direction: column; height: 720px; background: #060606; }
|
|
.sw-footer-story-canvas--fill { flex: 1 1 auto; min-height: 0; }
|
|
.sw-footer-story-nodes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
|
|
.sw-footer-story-node { margin: 0; padding: 12px; border: 1px solid #dedbd2; border-radius: 6px; background: #fff; }
|
|
.sw-footer-story-node figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
|
|
.sw-footer-story-node figcaption code { font-size: 11px; color: #6e6759; }
|
|
.sw-footer-story-node figcaption small { color: #6e6759; }
|
|
.sw-footer-story-node__pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
|
|
.sw-footer-story-node__pair > div { min-width: 0; }
|
|
.sw-footer-story-node__pair img { display: block; max-width: 100%; }
|
|
.sw-footer-story-node__label { margin: 0 0 4px; font-size: 11px; color: #6e6759; }
|
|
.sw-footer-story-node__live { display: inline-block; padding: 20px; border-radius: 4px; background: #fff; }
|
|
.sw-footer-story-node__wide { width: min(1920px, calc(100vw - 160px)); overflow-x: auto; padding-top: 24px; background: #060606; }
|
|
.sw-footer-story-node[data-node-id="26:10097"] .sw-footer-story-node__pair { flex-direction: column; }
|
|
.sw-footer-story-node[data-node-id="26:10097"] img { width: min(1920px, calc(100vw - 160px)); }
|
|
.sw-footer-story-column { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
|
|
.sw-footer-story-pin { display: contents; }
|
|
.sw-footer-story-group-surface { padding: 6px; border-radius: 4px; background: var(--hm-sw-footer-group-background); }
|
|
.sw-footer-story-guide-room { gap: 160px; padding: 170px 80px 6px; }
|
|
.sw-footer-story-guide-frame { display: block; width: 194px; height: 111px; background-repeat: no-repeat; background-size: 250px 1179px; }
|
|
.sw-footer-story-guide-text { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 12px; color: #d4cbbd; text-align: center; }
|
|
.sw-footer-story-lucide { display: grid; place-items: center; }
|
|
.sw-footer-story-status { padding: 0 12px; font-size: 12px; color: #d4cbbd; font-family: ui-monospace, monospace; }
|
|
.sw-footer-story-row { display: flex; align-items: flex-start; gap: 16px; }
|
|
.sw-footer-story-row--tight { gap: 0; }
|
|
.sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
|
|
.sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
|
|
.sw-footer-story-aux-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
|
|
.sw-footer-story-aux-row { display: flex; align-items: center; gap: 12px; margin: 0; }
|
|
.sw-footer-story-aux-row figcaption { flex: 0 0 120px; font-size: 12px; color: #3d4a45; }
|
|
.sw-footer-story-aux-row img { display: block; flex: none; }
|
|
.sw-footer-story-aux-states { display: flex; flex-direction: column; gap: 9px; padding: 8px; }
|