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

chore: move animations in tailwind.css

Browse Source 
Resolves #25
This commit is contained in:
Benjamin Canac
2024-04-03 17:08:16 +02:00
parent 17c7256864
commit 5f2a9ddc2e
13 changed files with 212 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/dropdown-menu.ts
View File

@@ -1,6 +1,6 @@
export default {
slots: {
content: 'min-w-48 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 will-change-[transform,opacity] data-[state=open]:animate-[dropdown-menu-open_100ms_ease-out] data-[state=closed]:animate-[dropdown-menu-closed_100ms_ease-in]',
content: 'min-w-48 bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 will-change-[transform,opacity] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
arrow: 'fill-gray-200 dark:fill-gray-800',
group: 'p-1',
label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-medium select-none',

4
src/theme/modal.ts
View File

@@ -12,8 +12,8 @@ export default {
variants: {
transition: {
true: {
overlay: 'data-[state=open]:animate-[modal-overlay-open_200ms_ease-out] data-[state=closed]:animate-[modal-overlay-closed_200ms_ease-in]',
content: 'data-[state=open]:animate-[modal-content-open_200ms_ease-out] data-[state=closed]:animate-[modal-content-closed_200ms_ease-in]'
overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
content: 'data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]'
}
},
fullscreen: {

18
src/theme/popover.ts
View File

@@ -1,6 +1,22 @@
export default {
slots: {
content: 'bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-[popover-down-open_200ms_ease-out] data-[state=closed]:data-[side=top]:animate-[popover-down-closed_200ms_ease-in] data-[state=open]:data-[side=right]:animate-[popover-left-open_200ms_ease-out] data-[state=closed]:data-[side=right]:animate-[popover-left-closed_200ms_ease-in] data-[state=open]:data-[side=left]:animate-[popover-right-open_200ms_ease-out] data-[state=closed]:data-[side=left]:animate-[popover-right-closed_200ms_ease-in] data-[state=open]:data-[side=bottom]:animate-[popover-up-open_200ms_ease-out] data-[state=closed]:data-[side=bottom]:animate-[popover-up-closed_200ms_ease-in]',
content: 'bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 will-change-[transform,opacity]',
arrow: 'fill-gray-200 dark:fill-gray-800'
},
variants: {
side: {
top: {
content: 'data-[state=open]:animate-[slide-in-from-top-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-top-and-fade_200ms_ease-in]'
},
right: {
content: 'data-[state=open]:animate-[slide-in-from-right-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-right-and-fade_200ms_ease-in]'
},
bottom: {
content: 'data-[state=open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-bottom-and-fade_200ms_ease-in]'
},
left: {
content: 'data-[state=open]:animate-[slide-in-from-left-and-fade_200ms_ease-out] data-[state=closed]:animate-[slide-out-to-left-and-fade_200ms_ease-in]'
}
}
}
}

40
src/theme/slideover.ts
View File

@@ -11,24 +11,48 @@ export default {
},
variants: {
side: {
left: {
content: 'left-0 inset-y-0 w-full max-w-md'
top: {
content: 'inset-x-0 top-0'
},
right: {
content: 'right-0 inset-y-0 w-full max-w-md'
},
top: {
content: 'inset-x-0 top-0'
},
bottom: {
content: 'inset-x-0 bottom-0'
},
left: {
content: 'left-0 inset-y-0 w-full max-w-md'
}
},
transition: {
true: {
overlay: 'data-[state=open]:animate-[slideover-overlay-open_200ms_ease-out] data-[state=closed]:animate-[slideover-overlay-closed_200ms_ease-in]',
content: 'data-[state=open]:data-[side=left]:animate-[slideover-content-left-open_200ms_ease-in-out] data-[state=closed]:data-[side=left]:animate-[slideover-content-left-closed_200ms_ease-in-out] data-[state=open]:data-[side=right]:animate-[slideover-content-right-open_200ms_ease-in-out] data-[state=closed]:data-[side=right]:animate-[slideover-content-right-closed_200ms_ease-in-out] data-[state=open]:data-[side=top]:animate-[slideover-content-top-open_200ms_ease-in-out] data-[state=closed]:data-[side=top]:animate-[slideover-content-top-closed_200ms_ease-in-out] data-[state=open]:data-[side=bottom]:animate-[slideover-content-bottom-open_200ms_ease-in-out] data-[state=closed]:data-[side=bottom]:animate-[slideover-content-bottom-closed_200ms_ease-in-out]'
overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
}
}
}
},
compoundVariants: [{
transition: true,
side: 'top',
class: {
content: 'data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]'
}
}, {
transition: true,
side: 'right',
class: {
content: 'data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]'
}
}, {
transition: true,
side: 'bottom',
class: {
content: 'data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]'
}
}, {
transition: true,
side: 'left',
class: {
content: 'data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]'
}
}]
}

18
src/theme/tooltip.ts
View File

@@ -1,9 +1,25 @@
export default {
slots: {
content: 'flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none will-change-[transform,opacity] data-[state=delayed-open]:data-[side=top]:animate-[tooltip-down_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltip-left_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltip-right_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltip-up_200ms_ease-out]',
content: 'flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none will-change-[transform,opacity]',
arrow: 'fill-gray-200 dark:fill-gray-800',
text: 'truncate',
// eslint-disable-next-line quotes
shortcuts: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`
},
variants: {
side: {
top: {
content: 'data-[state=delayed-open]:animate-[slide-in-from-top-and-fade_200ms_ease-out]'
},
right: {
content: 'data-[state=delayed-open]:animate-[slide-in-from-right-and-fade_200ms_ease-out]'
},
bottom: {
content: 'data-[state=delayed-open]:animate-[slide-in-from-bottom-and-fade_200ms_ease-out]'
},
left: {
content: 'data-[state=delayed-open]:animate-[slide-in-from-left-and-fade_200ms_ease-out]'
}
}
}
}