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

chore(templates): revert specific accordion and collapsible animations

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-08 17:24:47 +02:00
parent d545a927a1
commit d43c29b4df
3 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/templates.ts
View File

@@ -17,11 +17,20 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
color-scheme: light dark;
}
@keyframes slide-up {
@keyframes accordion-up {
from { height: var(--radix-accordion-content-height); }
to { height: 0; }
}
@keyframes accordion-down {
from { height: 0; }
to { height: var(--radix-accordion-content-height); }
}
@keyframes collapsible-up {
from { height: var(--radix-collapsible-content-height); }
to { height: 0; }
}
@keyframes slide-down {
@keyframes collapsible-down {
from { height: 0; }
to { height: var(--radix-collapsible-content-height); }
}

2
src/theme/accordion.ts
View File

@@ -4,7 +4,7 @@ export default {
item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0',
header: 'flex',
trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
content: 'text-sm pb-3.5 data-[state=open]:animate-[slide-down_200ms_ease-out] data-[state=closed]:animate-[slide-up_200ms_ease-out] overflow-hidden focus:outline-none',
content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
leadingIcon: 'shrink-0 size-5',
trailingIcon: 'ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
label: 'truncate'

2
src/theme/collapsible.ts
View File

@@ -1,6 +1,6 @@
export default {
slots: {
root: '',
content: 'data-[state=open]:animate-[slide-down_200ms_ease-out] data-[state=closed]:animate-[slide-up_200ms_ease-out] overflow-hidden'
content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
}
}