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

feat(module): add option to disable transitions

Browse Source
This commit is contained in:
Benjamin Canac
2024-06-05 23:11:58 +02:00
parent 3f2b1b12cd
commit 5f4fd972ff
18 changed files with 182 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/theme/navigation-menu.ts
View File

@@ -10,7 +10,7 @@ export default (options: Required<ModuleOptions>) => ({
linkLeadingAvatar: 'shrink-0',
linkTrailing: 'ms-auto inline-flex',
linkTrailingBadge: 'shrink-0 rounded',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
linkLabel: 'truncate',
linkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',
childList: 'grid grid-cols-2 gap-2 p-2',
@@ -24,7 +24,7 @@ export default (options: Required<ModuleOptions>) => ({
separator: 'px-2 h-px bg-gray-200 dark:bg-gray-800',
viewportWrapper: 'absolute top-full inset-x-0 flex w-full',
// FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
viewport: 'relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 will-change-[transform,opacity] h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 h-[--radix-navigation-menu-viewport-height] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
content: 'absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]',
indicator: 'data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 z-[1] rounded-sm'
@@ -62,8 +62,8 @@ export default (options: Required<ModuleOptions>) => ({
false: {
link: 'text-gray-500 dark:text-gray-400',
linkLeadingIcon: 'text-gray-400 dark:text-gray-500',
childLink: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors',
childLinkIcon: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
childLink: ['hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white', options.transitions && 'transition-colors'],
childLinkIcon: ['text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200', options.transitions && 'transition-colors']
}
},
disabled: {
@@ -94,8 +94,8 @@ export default (options: Required<ModuleOptions>) => ({
active: false,
variant: 'pill',
class: {
link: 'hover:text-gray-900 dark:hover:text-white transition-colors hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors',
linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200', options.transitions && 'transition-colors']
}
}, ...options.colors.map((color: string) => ({
color,
@@ -125,15 +125,15 @@ export default (options: Required<ModuleOptions>) => ({
active: true,
highlight: true,
class: {
link: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 before:transition-colors'
link: ['hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.transitions && 'before:transition-colors']
}
}, {
disabled: false,
active: false,
variant: 'link',
class: {
link: 'hover:text-gray-900 dark:hover:text-white transition-colors',
linkLeadingIcon: 'group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors'
link: ['hover:text-gray-900 dark:hover:text-white', options.transitions && 'transition-colors'],
linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200', options.transitions && 'transition-colors']
}
}, ...options.colors.map((color: string) => ({
color,