shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

chore(sw): improve interactive header story preview

Browse Source
This commit is contained in:
shkim4 committed 2026-10-19 11:12:07 +09:00
1 parent 50bf5bda8e
commit bf16578226
58 files changed
+6028 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/sw/sw-stories.css
+23
View File
@@ -51,3 +51,26 @@
/* Property fields (2026-10-19): Figma node table under the specimens. */
.sw-story-node-table { margin-top: 16px; border-collapse: collapse; font-size: 12px; color: #3d4a45; }
.sw-story-node-table :is(th, td) { padding: 4px 10px; border-bottom: 1px solid #d5ddd9; text-align: left; }
/* Overview host layout only. Native controls below are Storybook data controls, outside the product. */
.sw-story-overview.sb-page { height: 100dvh; min-height: 0; padding-block: 16px; }
.sw-story-overview > .sb-page-inner { height: 100%; display: flex; flex-direction: column; gap: 12px; }
.sw-story-overview .sb-page-header { flex: 0 0 auto; padding-bottom: 8px; }
.sw-story-overview .sb-page-header .sb-page-kicker { margin-bottom: 4px; }
.sw-story-overview .sb-page-header .sb-page-title { margin-block: 0 4px; }
.sw-overview-toolbar { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.sw-overview-toolbar select, .sw-overview-data button { font: inherit; padding: 3px 8px; color: inherit; background: var(--hm-sem-bg-surface); border: 1px solid var(--hm-sem-stroke-input-default); border-radius: 4px; }
.sw-overview-toolbar details { flex-basis: 100%; }
.sw-overview-toolbar summary { width: max-content; cursor: pointer; }
.sw-overview-data { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 8px; }
.sw-overview-data label { display: inline-flex; align-items: center; gap: 4px; }
.sw-overview-slot { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sw-overview-stage { flex: 0 0 auto; overflow: auto; overscroll-behavior: contain; background: var(--hm-sem-bg-surface); outline: 1px solid var(--hm-sem-stroke-input-default); }
.sw-overview-world { min-width: 390px; min-height: 100%; position: relative; }
/* Placement-only Storybook exception: keep the original panel size/content in the Stage scroll area.
Header's public API deliberately excludes panel style; package CSS and other Stories stay untouched. */
.sw-overview-stage .hm-sw-property { position: absolute !important; left: var(--sw-preview-panel-left) !important; top: var(--sw-preview-panel-top) !important; max-height: none !important; }
/* The document wrapper otherwise stacks below the independently positioned property Bar. */
.sw-overview-stage .hm-sw-header__document:has(.hm-sw-header__document-menu) { z-index: 3; }
.sw-overview-status { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; min-width: 0; }
.sw-overview-status output { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }