2025-04-09 11:16:18 +08:00

62 lines
1.4 KiB
CSS

/* RS Collapse Component */
.accordion {
@apply w-full mb-4 visible;
background-color: rgb(var(--bg-2));
}
.accordion.accordion-border {
@apply border-t border-x rounded-lg;
border-color: rgb(var(--border));
}
.accordion .accordion-group {
@apply overflow-hidden duration-300 dark:border-slate-700;
background-color: rgb(var(--bg-2));
}
.accordion .accordion-group.accordion-default {
@apply border-b;
border-color: rgb(var(--border));
}
.accordion .accordion-group.accordion-border {
@apply border-b last:rounded-b-lg;
border-color: rgb(var(--border));
}
.accordion .accordion-group.accordion-card {
@apply my-4;
box-shadow: var(--box-shadow);
}
.accordion .accordion-group .accordion-header {
@apply text-lg font-medium px-5 pr-10 py-4 cursor-pointer;
}
.accordion .accordion-group .accordion-body {
@apply px-5 pb-4 pt-2;
}
.accordion-group .accordion-header {
position: relative;
}
.accordion-group .accordion-header::after {
content: "";
position: absolute;
width: 19px;
height: 19px;
top: 50%;
right: 0%;
transform: translate(-100%, -50%) rotate(0deg);
background: url("/assets/img/icon/chevron-right.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transition: 0.25s ease-in-out;
}
.accordion-group--open .accordion-header::after {
transform: translate(-100%, -50%) rotate(90deg);
}