feat(sw): viewer layer bulb, popup toggle switch, footer layout and 1440px story inner
Deploy Storybook / deploy (push) Successful in 1m11s
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).
This commit is contained in:
1 parent
258e0a4b68
commit
c1549b2b4f
22 files changed
+121
-63
No files matched your search
@@ -88,6 +88,13 @@
|
||||
--hm-sw-property-label: #000;
|
||||
--hm-sw-property-table: #d2c8b4;
|
||||
--hm-sw-property-inner-border: #948871;
|
||||
/* Popup toggle switch (Figma 이지빔-SW toggle_btn_new: off 633:75188, on 633:75902, 2026-10-22). */
|
||||
--hm-sw-switch-off-background: #c7bda9;
|
||||
--hm-sw-switch-off-border: #8a7b5e;
|
||||
--hm-sw-switch-on-background: #f7efdf;
|
||||
--hm-sw-switch-on-border: #d2570b;
|
||||
--hm-sw-switch-thumb-off: linear-gradient(180deg, #fbedd4 0%, #eee3da 100%);
|
||||
--hm-sw-switch-thumb-on: linear-gradient(180deg, #e8741e 0%, #c0520d 100%);
|
||||
/* Popup scrollbar (every SW popup body: SWPopup, SWViewerPanel, property window). Same as the DWG/DXF viewer
|
||||
panels (thin, HM warm-neutral-mid thumb on warm-neutral-light track). */
|
||||
--hm-sw-popup-scrollbar-thumb: #9a9284;
|
||||
@@ -1590,6 +1597,31 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
.hm-sw-property__body { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 7px 7px 7px; box-shadow: inset 0 2px 2px rgba(255,255,255,.6); }
|
||||
/* Popup scrollbar: the body and any scrolling area inside it (zero-specificity so content can still override). */
|
||||
.hm-sw-property__body, .hm-sw-property__body :where(*) { scrollbar-width: thin; scrollbar-color: var(--hm-sw-popup-scrollbar-thumb) var(--hm-sw-popup-scrollbar-track); }
|
||||
/* Popup toggle switch (Figma toggle_btn_new 633:75188 / 633:75902): one face for every switch inside an SW popup —
|
||||
the HM UI Switch in SWPopup and SWViewerSwitch in SWViewerPanel (both carry .hm-sw-property). SW Header switches
|
||||
are outside this scope and keep their own face. 37 x 16 track, 12 x 12 thumb 2px from the edge; the border is an
|
||||
inset ring so off (1px) and on (0.8px) keep the same geometry. Disabled / focus: not in Figma, the owners' rules
|
||||
(opacity, cursor) stay; the focus outline uses the on border color because the ring shadow is replaced. */
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch) {
|
||||
box-sizing: border-box; display: inline-flex; align-items: center; flex-shrink: 0;
|
||||
width: 37px; height: 16px; padding: 0; border: 0; border-radius: 100px;
|
||||
background: var(--hm-sw-switch-off-background);
|
||||
box-shadow: inset 1px 0 2px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--hm-sw-switch-off-border), 1px 1px 1px #fcf0d8;
|
||||
}
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch)[data-state="checked"] {
|
||||
background: var(--hm-sw-switch-on-background);
|
||||
box-shadow: inset 1px 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 .8px var(--hm-sw-switch-on-border), 1px 1px 1px #fcf0d8;
|
||||
}
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch):hover:not(:disabled) { background-image: none; }
|
||||
.hm-sw-property [role="switch"]:is([data-slot="switch"], .hm-sw-viewer-switch):focus-visible { outline: 2px solid var(--hm-sw-switch-on-border); outline-offset: 1px; }
|
||||
.hm-sw-property [role="switch"] > :is([data-slot="switch-thumb"], .hm-sw-viewer-switch__thumb) {
|
||||
width: 12px; height: 12px; border-radius: 6.5px;
|
||||
background: var(--hm-sw-switch-thumb-off); box-shadow: 0 .5px 1px rgba(0, 0, 0, .6);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.hm-sw-property [role="switch"][data-state="checked"] > :is([data-slot="switch-thumb"], .hm-sw-viewer-switch__thumb) {
|
||||
background: var(--hm-sw-switch-thumb-on); transform: translateX(23px);
|
||||
}
|
||||
.hm-sw-property[data-selection-kind="all"] .hm-sw-property__body { padding-bottom: 0; }
|
||||
.hm-sw-property[data-selection-kind="all"] .hm-sw-property__counts { margin-top: -8px; }
|
||||
.hm-sw-property__group { flex: 0 0 auto; }
|
||||
|
||||
Reference in new issue
Block a user