diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index ffba3b082..b76e2a724 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -152,6 +152,34 @@ The cursor: default; property value restores the browser's default cursor style cursor: default; } +.AccordionContent { + overflow: hidden; +} +.AccordionContent[data-state='open'] { + animation: slideDown 300ms ease-out; +} +.AccordionContent[data-state='closed'] { + animation: slideUp 300ms ease-out; +} + +@keyframes slideDown { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +} + +@keyframes slideUp { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +} + @layer components { .round-buttons-position { diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js index 429b9b26a..b1ac8f14d 100644 --- a/src/frontend/tailwind.config.js +++ b/src/frontend/tailwind.config.js @@ -28,20 +28,6 @@ module.exports = { }, }, extend: { - keyframes: { - "accordion-down": { - from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, colors: { connection: "var(--connection)", "almost-dark-gray": "var(--almost-dark-gray)", @@ -128,21 +114,7 @@ module.exports = { }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], - }, - keyframes: { - slideDown: { - from: { height: 0 }, - to: { height: 100 }, - }, - slideUp: { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, - }, - animation: { - "accordion-down": "slideDown 300ms ease-out", - "accordion-up": "slideUp 300ms ease-in", - }, + } }, },