🎨 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:
parent
5d3a7f06a8
commit
8317fecc24
2 changed files with 29 additions and 29 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue