by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update css

Browse Source
This commit is contained in:
vben
2024-06-23 14:21:27 +08:00
parent 6f0c05dd50
commit 26b8c6ef27
49 changed files with 401 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/@core/uikit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@@ -78,7 +78,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
@include is('dark') {
.#{$namespace}-normal-menu__item {
color: hsl(var(--color-dark-foreground) / 80%);
color: hsl(var(--dark-foreground) / 80%);
}
}
@@ -92,7 +92,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
// max-height: 64px;
padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
margin: var(--menu-item-margin-y) var(--menu-item-margin-x);
color: hsl(var(--color-foreground) / 90%);
color: hsl(var(--foreground) / 90%);
cursor: pointer;
border-radius: var(--menu-item-radius);
transition:
@@ -103,20 +103,20 @@ function handleMouseenter(menu: MenuRecordRaw) {
@include is('active') {
font-weight: 700;
color: hsl(var(--color-primary-foreground));
background-color: hsl(var(--color-primary));
color: hsl(var(--primary-foreground));
background-color: hsl(var(--primary));
.#{$namespace}-normal-menu__name {
color: hsl(var(--color-primary-foreground));
color: hsl(var(--primary-foreground));
}
.#{$namespace}-normal-menu__icon {
color: hsl(var(--color-primary-foreground));
color: hsl(var(--primary-foreground));
}
}
&:not(.is-active):hover {
color: hsl(var(--color-foreground));
color: hsl(var(--foreground));
background-color: hsl(var(--menu-dark-background));
}
@@ -130,7 +130,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
@include is('dark') {
.#{$namespace}-normal-menu__item {
&:not(.is-active):hover {
color: hsl(var(--color-primary-foreground));
color: hsl(var(--primary-foreground));
background-color: hsl(var(--menu-dark-background));
}
}

48
packages/@core/uikit/menu-ui/src/styles/index.scss
View File

@@ -22,33 +22,33 @@
--menu-light-background: 192deg 1% 93%;
&.is-dark {
--menu-background-color: hsl(var(--color-menu-dark));
// --menu-submenu-opened-background-color: hsl(var(--color-menu-opened-dark));
--menu-background-color: hsl(var(--menu-dark));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--color-dark-foreground) / 80%);
--menu-item-hover-color: hsl(var(--color-primary-foreground));
--menu-item-color: hsl(var(--dark-foreground) / 80%);
--menu-item-hover-color: hsl(var(--primary-foreground));
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-active-color: hsl(var(--color-primary-foreground));
--menu-item-active-background-color: hsl(var(--color-primary));
--menu-submenu-hover-color: hsl(var(--color-dark-foreground));
--menu-item-active-color: hsl(var(--primary-foreground));
--menu-item-active-background-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--dark-foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-color: hsl(var(--color-dark-foreground));
--menu-submenu-active-color: hsl(var(--dark-foreground));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
}
&.is-light {
--menu-background-color: hsl(var(--color-menu));
// --menu-submenu-opened-background-color: hsl(var(--color-menu-opened));
--menu-background-color: hsl(var(--menu));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--color-foreground));
--menu-item-color: hsl(var(--foreground));
--menu-item-hover-color: var(--menu-item-color);
--menu-item-hover-background-color: hsl(var(--menu-light-background));
--menu-item-active-color: hsl(var(--color-primary-foreground));
--menu-item-active-background-color: hsl(var(--color-primary));
--menu-submenu-hover-color: hsl(var(--color-primary));
--menu-item-active-color: hsl(var(--primary-foreground));
--menu-item-active-background-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--menu-light-background));
--menu-submenu-active-color: hsl(var(--color-primary));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
}
@@ -79,24 +79,24 @@
--menu-background-color: transparent;
&.is-dark {
--menu-item-hover-color: var(--color-foreground);
--menu-item-hover-color: var(--foreground);
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-active-color: hsl(var(--color-foreground));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-color: hsl(var(--color-foreground));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-hover-color: hsl(var(--color-foreground));
--menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
}
&.is-light {
--menu-item-active-color: hsl(var(--color-foreground));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-light-background));
--menu-item-hover-background-color: hsl(var(--menu-light-background));
--menu-item-hover-color: hsl(var(--color-primary));
--menu-submenu-hover-color: hsl(var(--color-primary));
--menu-item-hover-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--menu-light-background));
--menu-submenu-active-color: hsl(var(--color-foreground));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: hsl(var(--menu-light-background));
}
}
@@ -316,7 +316,7 @@
.#{$namespace}-sub-menu-content,
.#{$namespace}-menu-item {
&.is-active {
color: hsl(var(--color-primary-foreground)) !important;
color: hsl(var(--primary-foreground)) !important;
background: var(--menu-item-active-background-color) !important;
}
}