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

fix(sw): home menu tiles keep the icon and label in place on hover

Browse Source 
Remove the 1px up-left offset of the Figma hover variant (user decision
2026-10-20): hover, pressed and Active change only color, art and the ring.
This commit is contained in:
shkim4 committed 2026-10-20 17:47:57 +09:00
1 parent 83c8815445
commit 3f7cff5473
1 file changed
+3 -3
Download Patch File Download Diff File Expand all files Collapse all files
packages/sw/src/theme/sw-home-menu.css
+3 -3
View File
@@ -353,14 +353,14 @@
}
/* Variant2 (hover) = Variant3 (pressed while held; stays only as Active of a panel tile / More): orange stroke,
#FF5C00 icon and label, art 1px up-left. Action tiles keep nothing after the click (2026-10-19). */
#FF5C00 icon and label. Action tiles keep nothing after the click (2026-10-19). Only color, hover art and the ring
change: icon and label keep their Default place (2026-10-20 user decision, replaces the Figma 1px up-left art
offset that made every tile's icon and label jump on hover). Hover art has the Default art's frame and shapes. */
.hm-sw-home-menu__item:is(:hover:not(:disabled), :active:not(:disabled), [data-active="true"])::after { opacity: 1; }
.hm-sw-home-menu__item:is(:hover:not(:disabled), :active:not(:disabled), [data-active="true"]) {
--hm-sw-home-menu-icon-color: var(--hm-sw-home-menu-item-accent-color);
color: var(--hm-sw-home-menu-item-accent-color);
}
.hm-sw-home-menu__item:is(:hover:not(:disabled), :active:not(:disabled), [data-active="true"]) .hm-sw-home-menu__icon { transform: translate(-1px, -1px); }
.hm-sw-home-menu__item:is(:hover:not(:disabled), :active:not(:disabled), [data-active="true"]) .hm-sw-home-menu__label { top: 24px; }
.hm-sw-home-menu__item[data-has-hover-icon]:is(:hover:not(:disabled), :active:not(:disabled), [data-active="true"]) .hm-sw-home-menu__icon:not(.hm-sw-home-menu__icon--hover) { visibility: hidden; }
.hm-sw-home-menu__item[data-has-hover-icon]:is(:hover:not(:disabled), :active:not(:disabled), [data-active="true"]) .hm-sw-home-menu__icon--hover { visibility: visible; }