diff --git a/tailwind.config.ts b/tailwind.config.ts index 77fb95a1..d90e2737 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -22,22 +22,22 @@ export default { sidebar: '16rem', }, keyframes: { - overlayShow: { from: { opacity: '0' }, to: { opacity: '1' } }, - overlayHide: { from: { opacity: '1' }, to: { opacity: '0' } }, - contentShow: { + 'overlay-show': { from: { opacity: '0' }, to: { opacity: '1' } }, + 'overlay-hide': { from: { opacity: '1' }, to: { opacity: '0' } }, + 'content-show': { from: { opacity: '0', transform: 'scale(0.95) translateY(0.25rem)' }, to: { opacity: '1', transform: 'scale(1) translateY(0rem)' }, }, - contentHide: { + 'content-hide': { from: { opacity: '1', transform: 'scale(1) translateY(0rem)' }, to: { opacity: '0', transform: 'scale(0.95) translateY(0.25rem)' }, }, }, animation: { - overlayShow: 'overlayShow 150ms ease-in-out', - overlayHide: 'overlayHide 150ms ease-in-out', - contentShow: 'contentShow 150ms ease-in-out', - contentHide: 'contentHide 150ms ease-in-out', + 'overlay-show': 'overlay-show 150ms ease-in-out', + 'overlay-hide': 'overlay-hide 150ms ease-in-out', + 'content-show': 'content-show 150ms ease-in-out', + 'content-hide': 'content-hide 150ms ease-in-out', }, }, }, diff --git a/ui/src/components/menus/menu.tsx b/ui/src/components/menus/menu.tsx index cb7745c6..0ebeafbd 100644 --- a/ui/src/components/menus/menu.tsx +++ b/ui/src/components/menus/menu.tsx @@ -99,7 +99,7 @@ const MenuContent: ParentComponent = props => ( 'z-50 min-w-36 overflow-hidden rounded-md border shadow-sm', 'border-gray-200 bg-white text-gray-600', 'dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200', - 'origin-[--kb-menu-content-transform-origin] animate-contentHide ui-expanded:animate-contentShow', + 'animate-content-hide ui-expanded:animate-content-show origin-[--kb-menu-content-transform-origin]', )} >
{props.children}
diff --git a/ui/src/components/modals/create-feed.tsx b/ui/src/components/modals/create-feed.tsx index e54f6999..fd003dc0 100644 --- a/ui/src/components/modals/create-feed.tsx +++ b/ui/src/components/modals/create-feed.tsx @@ -68,11 +68,11 @@ export const CreateFeed: Component = props => { /> - +
diff --git a/ui/src/components/ui/tooltip.tsx b/ui/src/components/ui/tooltip.tsx index db791019..636ff9cf 100644 --- a/ui/src/components/ui/tooltip.tsx +++ b/ui/src/components/ui/tooltip.tsx @@ -21,7 +21,7 @@ const TooltipContent = (props: PolymorphicProp {...rest} class={cx( 'z-50 rounded-lg bg-gray-800 px-4 py-2 text-xs text-white', - 'origin-[--kb-menu-content-transform-origin] animate-contentHide ui-expanded:animate-contentShow', + 'animate-content-hide ui-expanded:animate-content-show origin-[--kb-menu-content-transform-origin]', local.class, )} >