shkim4
1d206c86cf
Deploy Storybook / deploy (push) Successful in 1m14s
The file-name and object-editing surfaces of SWHeader and SWViewerHeader now draw the Figma gradient strokes (26:10374, 26:10375, read with the Plugin API) through a transparent 1px border, so size, radius and text position are unchanged. New tokens --hm-sw-header-document-border-gradient and --hm-sw-header-object-border-gradient; the solid border colors stay for compatibility and for the home, window area, print button and menus. Update the SW Header design spec, the SW AI design rules and the example layout CSS to the gradient borders.
61 lines
3.9 KiB
CSS
61 lines
3.9 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;
|
|
/* The gradient stroke shows through the transparent 1px border, as on the SWHeader object area. */
|
|
border: 1px solid transparent;
|
|
border-radius: var(--hm-sw-header-object-radius);
|
|
background: var(--hm-sw-header-object-background) padding-box, var(--hm-sw-header-object-border-gradient) border-box;
|
|
}
|
|
/* 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); }
|