github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 08:36:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: optimizing style issues (#4289)

Browse Source
This commit is contained in:
Vben
2024-08-31 14:11:01 +08:00
committed by GitHub
parent 071cc0dcec
commit 2b0aedbaba
19 changed files with 77 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -60,9 +60,9 @@ const tabsView = computed((): TabConfig[] => {
ref="contentRef"
:class="contentClass"
:style="style"
class="tabs-chrome !flex h-full w-max pr-6"
class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
>
<TransitionGroup name="slide-right">
<TransitionGroup name="slide-down">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"
@@ -84,7 +84,7 @@ const tabsView = computed((): TabConfig[] => {
<!-- divider -->
<div
v-if="i !== 0 && tab.key !== active"
class="tabs-chrome__divider bg-foreground/50 absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
class="tabs-chrome__divider bg-border absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] transition-all"
></div>
<!-- background -->
<div

9
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -30,14 +30,15 @@ const active = defineModel<string>('active');
const typeWithClass = computed(() => {
const typeClasses: Record<string, { content: string }> = {
brisk: {
content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 border-l border-border`,
content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 [&:not(:first-child)]:border-l last:border-r last:border-r border-border`,
},
card: {
content:
'h-[calc(100%-6px)] rounded-md ml-2 border border-border transition-all',
},
plain: {
content: 'h-full border-l border-border',
content:
'h-full [&:not(:first-child)]:border-l last:border-r border-border',
},
};
@@ -63,9 +64,9 @@ const tabsView = computed((): TabConfig[] => {
<template>
<div
:class="contentClass"
class="relative !flex h-full w-max items-center pr-6"
class="relative !flex h-full w-max items-center overflow-y-hidden pr-6"
>
<TransitionGroup name="slide-right">
<TransitionGroup name="slide-down">
<div
v-for="(tab, i) in tabsView"
:key="tab.key"