mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-09 23:03:15 +08:00
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:
@@ -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,16 +871,14 @@ $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;
|
background: var(--menu-submenu-hover-background-color) !important;
|
||||||
background: var(--menu-submenu-hover-background-color) !important;
|
|
||||||
|
|
||||||
// svg {
|
// svg {
|
||||||
// fill: var(--menu-submenu-hover-color);
|
// fill: var(--menu-submenu-hover-color);
|
||||||
// }
|
// }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user