bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor Tabs components for improved styling

Browse Source 
- Update TabsList.vue to adjust height and border radius for a more modern look
- Modify TabsTrigger.vue to enhance padding, font size, and line height for better readability and user experience
This commit is contained in:
Bastian Masanek
2025-10-31 12:27:40 +01:00
parent f54b1f56d5
commit 9682461eea
2 changed files with 9 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/ui/tabs/TabsTrigger.vue
View File

@@ -19,15 +19,10 @@ const forwarded = useForwardProps(delegatedProps)
</script>
<template>
<TabsTrigger
v-bind="forwarded"
:class="
cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-base font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
props.class
)
"
>
<TabsTrigger v-bind="forwarded" :class="cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-[25px] px-4 py-[10px] text-lg font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md leading-[1.7em]',
props.class
)">
<slot />
</TabsTrigger>
</template>