arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Tabs): align link variant left when vertical

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-08 16:14:23 +02:00
parent 2b6965211d
commit 9d5f9a7010
2 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/theme/tabs.ts
View File

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
root: 'flex items-center gap-2',
list: 'relative flex p-1 group',
indicator: 'absolute transition-[translate,width] duration-200',
trigger: ['relative inline-flex items-center justify-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'],
trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:outline-none', options.transitions && 'transition-colors'],
content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
@@ -33,10 +33,11 @@ export default (options: Required<ModuleOptions>) => ({
horizontal: {
root: 'flex-col',
list: 'w-full',
indicator: 'left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]'
indicator: 'left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]',
trigger: 'justify-center'
},
vertical: {
list: 'flex-col items-center',
list: 'flex-col',
indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]'
}
},
@@ -85,7 +86,8 @@ export default (options: Required<ModuleOptions>) => ({
orientation: 'vertical',
variant: 'pill',
class: {
indicator: 'inset-x-1'
indicator: 'inset-x-1',
list: 'items-center'
}
}, {
orientation: 'vertical',