arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-17 05:28:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(NavigationMenu): improve theme with line variant and border

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-28 11:28:01 +02:00
parent 1af449d6e0
commit ec6ebbacbe
3 changed files with 83 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,9 +22,9 @@ export default (config: { colors: string[] }) => ({
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 mt-2.5 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 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]',
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] top-full z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
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'
},
variants: {
@@ -41,6 +41,7 @@ export default (config: { colors: string[] }) => ({
horizontal: {
root: 'w-full items-center justify-between',
list: 'flex items-center',
item: 'py-2',
link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0'
},
vertical: {
@@ -73,13 +74,14 @@ export default (config: { colors: string[] }) => ({
variant: 'line',
orientation: 'horizontal',
class: {
link: 'after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-0.5 after:rounded-full'
link: 'after:absolute after:-bottom-[calc(var(--spacing-2)+1px)] after:inset-x-2.5 after:block after:h-0.5 after:rounded-full'
}
}, {
variant: 'line',
orientation: 'vertical',
class: {
link: 'after:absolute after:-left-2 after:inset-y-0.5 after:block after:w-0.5 after:rounded-full'
item: 'px-2',
link: 'after:absolute after:-left-[calc(var(--spacing-2)+1px)] after:inset-y-0.5 after:block after:w-0.5 after:rounded-full'
}
}, {
disabled: false,