61 lines
1.2 KiB
CSS
61 lines
1.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
.dropdown {
|
|
@apply relative w-40;
|
|
}
|
|
|
|
.dropdown-btn {
|
|
@apply w-full flex items-center justify-between px-3 py-1.5 rounded-md cursor-pointer
|
|
bg-(--col2) hover:bg-(--col3)
|
|
border border-(--col4) hover:border-(--col5)
|
|
text-white;
|
|
}
|
|
|
|
.dropdown-arrow {
|
|
@apply w-4 h-4 transition-transform stroke-current stroke-2 fill-none;
|
|
}
|
|
|
|
.dropdown-arrow.open {
|
|
@apply rotate-180;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
@apply absolute z-50 mt-1 w-full rounded-md shadow-lg overflow-hidden
|
|
bg-(--col2) border border-(--col4)
|
|
origin-top
|
|
opacity-0 scale-95 -translate-y-1 pointer-events-none
|
|
transition-[opacity,transform] duration-150 ease-out;
|
|
}
|
|
|
|
.dropdown-menu.open {
|
|
@apply opacity-100 scale-100 translate-y-0 pointer-events-auto;
|
|
}
|
|
|
|
.dropdown-item {
|
|
@apply px-3 py-1.5 cursor-pointer text-white transition-colors;
|
|
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.dropdown-item:hover,
|
|
.dropdown-item.active {
|
|
@apply bg-(--col3);
|
|
}
|
|
|
|
.dropdown-menu.open .dropdown-item {
|
|
animation: dropIn 220ms ease-out forwards;
|
|
animation-delay: calc(var(--i) * 40ms);
|
|
}
|
|
|
|
@keyframes dropIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|