bichangxiong/ruoyi-plus-vben5
1
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

2
packages/@core/uikit/layout-ui/src/components/layout-footer.vue
View File

@@ -35,7 +35,7 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--color-background))',
backgroundColor: 'hsl(var(--background))',
fixed: true,
height: 32,
show: true,

2
packages/@core/uikit/layout-ui/src/components/layout-header.vue
View File

@@ -60,7 +60,7 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--color-background))',
backgroundColor: 'hsl(var(--background))',
// fixed: true,
height: 60,
isMixedNav: false,

2
packages/@core/uikit/layout-ui/src/components/layout-tabbar.vue
View File

@@ -15,7 +15,7 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
backgroundColor: 'hsl(var(--color-background))',
backgroundColor: 'hsl(var(--background))',
fixed: true,
height: 30,
});

2
packages/@core/uikit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
View File

@@ -17,7 +17,7 @@ function handleCollapsed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--color-dark-accent))] data-[theme=dark]:text-[hsl(var(--color-dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--color-dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--color-dark-foreground))]"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
@click.stop="handleCollapsed"
>
<MdiMenuClose v-if="collapsed" />

2
packages/@core/uikit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
View File

@@ -17,7 +17,7 @@ function toggleFixed() {
<template>
<div
:data-theme="theme"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--color-dark-accent))] data-[theme=dark]:text-[hsl(var(--color-dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--color-dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--color-dark-foreground))]"
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
@click="toggleFixed"
>
<MdiPinOff v-if="!expandOnHover" />

16
packages/@core/uikit/layout-ui/src/vben-layout.vue
View File

@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
// footerBackgroundColor: '#fff',
footerFixed: true,
footerHeight: 32,
// headerBackgroundColor: 'hsl(var(--color-background))',
// headerBackgroundColor: 'hsl(var(--background))',
headerHeight: 50,
headerHeightOffset: 10,
headerHidden: false,
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
sidebarTheme: 'dark',
sidebarWidth: 180,
tabbarEnable: true,
// tabsBackgroundColor: 'hsl(var(--color-background))',
// tabsBackgroundColor: 'hsl(var(--background))',
tabsHeight: 36,
zIndex: 200,
});
@@ -213,17 +213,15 @@ const sidebarFace = computed(() => {
if (isDark) {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--color-menu-dark-darken))'
: 'hsl(var(--color-menu-dark))';
? 'hsl(var(--menu-dark-darken))'
: 'hsl(var(--menu-dark))';
} else {
backgroundColor = isSidebarMixedNav.value
? 'hsl(var(--color-menu-darken))'
: 'hsl(var(--color-menu))';
? 'hsl(var(--menu-darken))'
: 'hsl(var(--menu))';
}
extraBackgroundColor = isDark
? 'hsl(var(--color-menu-dark))'
: 'hsl(var(--color-menu))';
extraBackgroundColor = isDark ? 'hsl(var(--menu-dark))' : 'hsl(var(--menu))';
return {
backgroundColor,

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;
}
}

2
packages/@core/uikit/shadcn-ui/package.json
View File

@@ -48,7 +48,7 @@
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"class-variance-authority": "^0.7.0",
"radix-vue": "^1.8.4",
"radix-vue": "^1.8.5",
"vue": "^3.4.30",
"vue-sonner": "^1.1.3"
}

2
packages/@core/uikit/shadcn-ui/src/components/logo/logo.vue
View File

@@ -66,7 +66,7 @@ const logoClass = computed(() => {
/>
<span
v-if="!collapse"
class="text-primary truncate text-nowrap group-[.dark]:text-[hsl(var(--color-dark-foreground))]"
class="text-primary truncate text-nowrap group-[.dark]:text-[hsl(var(--dark-foreground))]"
>
{{ text }}
<!-- <span class="text-primary ml-1 align-super text-[smaller]">Pro</span> -->

4
packages/@core/uikit/shadcn-ui/src/components/segmented/segmented.vue
View File

@@ -22,6 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
tabs: () => [],
});
const activeTab = defineModel<string>();
const getDefaultValue = computed(() => {
return props.defaultValue || props.tabs[0]?.value;
});
@@ -40,7 +42,7 @@ const tabsIndicatorStyle = computed(() => {
</script>
<template>
<Tabs :default-value="getDefaultValue">
<Tabs v-model="activeTab" :default-value="getDefaultValue">
<TabsList :style="tabsStyle" class="bg-accent relative grid w-full">
<TabsIndicator :style="tabsIndicatorStyle" />
<template v-for="tab in tabs" :key="tab.value">

2
packages/@core/uikit/shadcn-ui/src/components/ui/sonner/Sonner.vue
View File

@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<ToasterProps>(), {
<!-- <style scoped>
:deep([data-sonner-toaster][data-theme='dark']),
:deep([data-sonner-toaster][data-theme='light']) {
--normal-bg: hsl(var(--color-background));
--normal-bg: hsl(var(--background));
--normal-border: theme('colors.border');
--normal-text: theme('colors.popover.foreground');
--border-radius: theme('borderRadius.md');

16
packages/@core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss
View File

@@ -1,12 +1,12 @@
@import '@vben-core/design/global';
@include b('chrome-tabs') {
--tabs-background: hsl(var(--color-background));
--tabs-background: hsl(var(--background));
--tabs-gap: 7px;
--tabs-divider: hsl(var(--color-border));
--tabs-hover: hsl(var(--color-heavy));
--tabs-active-background: hsl(var(--color-primary) / 100%);
--tabs-active: hsl(var(--color-primary-foreground));
--tabs-divider: hsl(var(--border));
--tabs-hover: hsl(var(--heavy));
--tabs-active-background: hsl(var(--primary) / 100%);
--tabs-active: hsl(var(--primary-foreground));
position: relative;
width: 100%;
@@ -26,7 +26,7 @@
display: flex;
align-items: center;
height: 100%;
color: hsl(var(--color-muted-foreground));
color: hsl(var(--muted-foreground));
cursor: pointer;
user-select: none;
@@ -81,7 +81,7 @@
transform: translateY(-50%);
// &:hover {
// background-color: hsl(var(--color-accent));
// background-color: hsl(var(--accent));
// }
}
@@ -94,7 +94,7 @@
transition: all 0.15s ease;
&:hover {
color: hsl(var(--color-foreground));
color: hsl(var(--foreground));
transform: scale(1.05);
}
}