🎨 style(index.css): add animation for accordion content to slide down and slide up for better user experience

🔧 chore(tailwind.config.js): remove unused keyframes and animations related to accordion
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-17 15:27:15 -03:00
commit 8317fecc24
2 changed files with 29 additions and 29 deletions

View file

@ -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 {

View file

@ -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",
},
}
},
},