fix(menu): update hover color variable to use the correct reference (#7544)

* fix(menu): update hover color variable to use the correct reference

Medium Severity

In the horizontal .is-light menu section, --menu-item-hover-color is set to hsl(var(--menu-item-color)), but --menu-item-color is already defined as hsl(var(--accent-foreground)). This results in hsl(hsl(...)) at computed-value time, which is invalid CSS. The non-horizontal .is-light block correctly uses var(--menu-item-color) without the extra hsl() wrapper.

* fix(menu): simplify hover styles by removing redundant nested hover rules

Low Severity

The SCSS &:not(.is-active):hover { &:hover { ... } } compiles to a :hover:hover pseudo-class chain, which is functionally identical to a single :hover. The inner &:hover nesting is redundant and adds unnecessary complexity compared to placing styles directly inside the &:not(.is-active):hover block.
This commit is contained in:
AxiosLeo
2026-02-12 22:22:53 +08:00
committed by GitHub
parent 8e7a5d1ec3
commit 03ebbea46a

View File

@@ -536,7 +536,7 @@ $namespace: vben;
--menu-background-color: hsl(var(--menu)); --menu-background-color: hsl(var(--menu));
--menu-item-color: hsl(var(--accent-foreground)); --menu-item-color: hsl(var(--accent-foreground));
--menu-item-background-color: var(--menu-background-color); --menu-item-background-color: var(--menu-background-color);
--menu-item-hover-color: hsl(var(--menu-item-color)); --menu-item-hover-color: var(--menu-item-color);
--menu-item-hover-background-color: hsl(var(--accent)); --menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--primary)); --menu-item-active-color: hsl(var(--primary));
--menu-item-active-background-color: hsl(var(--primary) / 15%); --menu-item-active-background-color: hsl(var(--primary) / 15%);
@@ -871,7 +871,6 @@ $namespace: vben;
} }
&:not(.is-active):hover { &:not(.is-active):hover {
&:hover {
//color: var(--menu-submenu-hover-color); //color: var(--menu-submenu-hover-color);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@@ -881,6 +880,5 @@ $namespace: vben;
// fill: var(--menu-submenu-hover-color); // fill: var(--menu-submenu-hover-color);
// } // }
} }
}
} }
</style> </style>