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

Merge pull request 'fix(sw): refine middle step active background' (#7) from fix/sw-step-header-middle-background into main
Deploy Storybook / deploy (push) Successful in 1m16s

Browse Source 
Reviewed-on: #7
This commit was merged in pull request #7.
This commit is contained in:
shkim4 committed 2026-11-04 17:24:31 +09:00
2 parents 65ecfc42b7 5be47f9c6f
commit e5c317f40c
1 file changed
+23
Download Patch File Download Diff File Expand all files Collapse all files
packages/sw/src/theme/sw-process-header.css
+23
View File
@@ -493,6 +493,29 @@
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__window .hm-sw-process-header__tools { height: 41px; margin: 4px 2px 0 5px; }
.hm-sw-process-header[data-appearance="multi"] .hm-sw-process-header__tools .hm-sw-tool__pill-button { height: 37px; }
/* Lit middle group (neither the first nor the last; Figma 6797:16225): the two start_bg overlay layers (0.85 / 0.45, lit-group
tokens) over the bar's bright base, fading out to the right (Figma 107 / 22px from the end of the 381px frame = 91 / 6px
from the end of the group). Inside the group box only; the arrows and the first / last surfaces are untouched. */
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::before,
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::after {
content: "";
position: absolute;
/* Starts at the arrow cell on the left (16px) so the notch behind the arrow carries the same face as the group; below the
arrow cell's dim cover (z 0), so the dimmed tip in front of the arrow stays as it is. */
inset: 0 0 0 -16px;
z-index: -1;
-webkit-mask: linear-gradient(90deg, #000 calc(100% - 91px), transparent calc(100% - 6px));
mask: linear-gradient(90deg, #000 calc(100% - 91px), transparent calc(100% - 6px));
}
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::before {
background: var(--hm-sw-process-glow-face-base);
opacity: 0.85;
}
.hm-sw-process-bar[data-appearance="multi"] .hm-sw-process-bar__group[data-active]:not(.hm-sw-process-bar__rest + .hm-sw-process-bar__group):not(.hm-sw-process-bar__group + .hm-sw-process-bar__rest)::after {
background: var(--hm-sw-process-glow-face-sheen);
opacity: 0.45;
}
/* Process area: 49px, groups [10][title 14 / tabs 25][10] with the arrow between (content to content 36). */
.hm-sw-process-bar[data-appearance="multi"] {
--hm-sw-header-bar-height: 49px;