diff --git a/src/theme/toaster.ts b/src/theme/toaster.ts index cbc8f5c8..2b43a4aa 100644 --- a/src/theme/toaster.ts +++ b/src/theme/toaster.ts @@ -1,7 +1,7 @@ export default { slots: { - viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none', - base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out' + viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none transition-all duration-400 ease-in-out', + base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-300 data-[state=closed]:animate-[toast-closed_300ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_300ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-400 ease-in-out' }, variants: { position: { @@ -35,13 +35,13 @@ export default { position: ['top-left', 'top-center', 'top-right'], class: { viewport: 'top-4', - base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]' + base: 'top-0 data-[state=open]:animate-[slide-in-from-top_350ms_cubic-bezier(0.25,0.46,0.45,0.94)]' } }, { position: ['bottom-left', 'bottom-center', 'bottom-right'], class: { viewport: 'bottom-4', - base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]' + base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_350ms_cubic-bezier(0.25,0.46,0.45,0.94)]' } }, { swipeDirection: ['left', 'right'],