feat(sw): integrate responsive home menu into header
- Merge SW / Home Menu Stories into SW / Header (sidebar: Home Menu; others verification-tagged) - Home On: logo hover ring and header top/bottom #5F4B0F lines while the menu is open - Measured More in SWHeader; home menu narrow widths use a More (...) section with a grouped text menu instead of horizontal scroll, placed right after the last visible section - Action tiles no longer stay on after a click; 최근파일 stays Active only while its list is open - More dropdown and recent files list never open together; list top joins the accent line - Recent files preview falls back left / over the list at narrow widths (390px) - Update Storybook, browser tests, docs, AI guides and QA evidence
This commit is contained in:
1 parent
c542bdc282
commit
170a5c23ae
71 files changed
+12535
-150
No files matched your search
@@ -29,6 +29,9 @@
|
||||
/* Figma header/btn_home (26:10655) "hover" stroke: 1px, top -> bottom. */
|
||||
--hm-sw-header-hover-border-gradient: linear-gradient(180deg, #a67d03 0%, #f2cc0f 16.41%, #fadd4f 37.19%, #f2cc0f 62.03%, #926e03 87.88%);
|
||||
--hm-sw-header-hover-border-width: 1px;
|
||||
/* Figma 662:67267 "home on" (logo menu open): header border-top / border-bottom, 2px, full width. */
|
||||
--hm-sw-header-home-on-line-color: #5f4b0f;
|
||||
--hm-sw-header-home-on-line-width: 2px;
|
||||
|
||||
/* Figma header/document_tit (26:10662) document dropdown */
|
||||
--hm-sw-header-document-menu-width: 310px;
|
||||
@@ -1883,7 +1886,44 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
|
||||
/* ...and the file name gives way only down to the default design's smallest width (96px, see the clamps above). */
|
||||
.hm-sw-header[data-leading="open"] .hm-sw-header__fields[data-configured] > .hm-sw-header__control[data-control="document"] { min-width: 96px; }
|
||||
|
||||
/* Measured More (SWHeader, 2026-10-19): on top of the breakpoints, parts move into More while the object area has no
|
||||
room for them and return when it has. data-measuring is set for one synchronous layout read and removed before
|
||||
paint: nothing in the object area shrinks, grows or takes free space through an auto margin, so the in-flow content
|
||||
shows the room it really needs. A configured file name counts with the smallest default file-name width (96px).
|
||||
!important: measurement only, it must win over every tier and representative-slot rule above. */
|
||||
.hm-sw-header[data-measuring] :is(.hm-sw-header__object-area, .hm-sw-header__fields, .hm-sw-header__control) > * { flex-grow: 0 !important; flex-shrink: 0 !important; }
|
||||
.hm-sw-header[data-measuring] .hm-sw-header__properties,
|
||||
.hm-sw-header[data-measuring] .hm-sw-header__object-area[data-squeezed~="properties"] > .hm-sw-header__more { margin-left: 0 !important; }
|
||||
@container hm-sw-header (max-width: 1079.98px) {
|
||||
.hm-sw-header[data-measuring] .hm-sw-header__more { margin-left: 0 !important; }
|
||||
}
|
||||
.hm-sw-header[data-measuring] .hm-sw-header__control[data-control="document"] { flex: 0 0 96px !important; min-width: 0 !important; }
|
||||
/* Measured parts take the place the breakpoints give them: without 그리기모드 the fields start 4px in (as < 1180),
|
||||
without the property block More sits at the end of the object area (as < 1080). */
|
||||
.hm-sw-header__object-area[data-squeezed~="drawingMode"]:not([data-configured]) > .hm-sw-header__fields { padding-left: 4px; }
|
||||
.hm-sw-header__object-area[data-squeezed~="properties"] > .hm-sw-header__more { margin-left: auto; margin-right: 4px; }
|
||||
|
||||
/* Logo (home) menu layer (SWHeader homeMenu, 2026-10-19). Top of the header, left / max-width measured from the
|
||||
object area (−2px) to the window area. Above the property bar anchor (2), under the dropdowns (30) and the
|
||||
property window (40). The logo, the file name and the window area stay visible beside it. */
|
||||
.hm-sw-header__home-menu { position: absolute; top: 0; z-index: 20; }
|
||||
|
||||
/* Home On (Figma 662:67267 btn_home + border-top / border-bottom, 2026-10-19): only while the logo menu is open.
|
||||
The logo keeps the yellow hover border (the Home On asset draws the same 1px inner gradient border) and the header
|
||||
gets the 2px #5F4B0F lines across its full width. Figma layer order: border-bottom under the menu (20) over the
|
||||
file name / window area, border-top over the menu, the logo over both. Lines are overlays: no size or position
|
||||
changes, and closing the menu removes them. SW normal mode only (SWViewerHeader has no logo menu). */
|
||||
.hm-sw-header[data-home-menu-open] .hm-sw-header__home-bg-hover { opacity: 1; }
|
||||
.hm-sw-header[data-home-menu-open] > .hm-sw-header__bar > .hm-sw-header__home { z-index: 22; }
|
||||
.hm-sw-header[data-home-menu-open]::before,
|
||||
.hm-sw-header[data-home-menu-open]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--hm-sw-header-home-on-line-width);
|
||||
background: var(--hm-sw-header-home-on-line-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hm-sw-header[data-home-menu-open]::before { top: 0; z-index: 21; }
|
||||
.hm-sw-header[data-home-menu-open]::after { top: calc(var(--hm-sw-header-bar-height) - var(--hm-sw-header-home-on-line-width)); z-index: 1; }
|
||||
Reference in new issue
Block a user