59 lines
1.1 KiB
CSS
59 lines
1.1 KiB
CSS
|
.menu {
|
||
|
|
@apply relative inline-block text-left;
|
||
|
|
|
||
|
|
& .button {
|
||
|
|
@apply inline-flex justify-center items-center w-full py-2 text-neutral-100 rounded-md;
|
||
|
|
@apply transition-all duration-100;
|
||
|
|
|
||
|
|
&:hover, &[aria-expanded="true"] {
|
||
|
|
@apply bg-neutral-600 text-white;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus, &:focus-within, &:active {
|
||
|
|
@apply ring-2 ring-opacity-50 ring-neutral-300 text-white;
|
||
|
|
}
|
||
|
|
|
||
|
|
& svg {
|
||
|
|
@apply w-5 h-5 transition-transform duration-75;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[aria-expanded="true"] svg[data-animated="true"] {
|
||
|
|
@apply rotate-180;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .items_container {
|
||
|
|
@apply absolute right-0 mt-2 origin-top-right bg-neutral-900 rounded z-10;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu_item {
|
||
|
|
@apply flex items-center rounded w-full px-2 py-2;
|
||
|
|
|
||
|
|
& svg {
|
||
|
|
@apply w-4 h-4 mr-4 text-neutral-300;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover, &:focus {
|
||
|
|
@apply bg-blue-500 text-blue-50;
|
||
|
|
|
||
|
|
& svg {
|
||
|
|
@apply text-blue-50;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.danger {
|
||
|
|
&:hover, &:focus {
|
||
|
|
@apply bg-red-500 text-red-50;
|
||
|
|
|
||
|
|
& svg {
|
||
|
|
@apply text-red-50;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.disabled {
|
||
|
|
@apply cursor-not-allowed hover:bg-neutral-800 opacity-30 focus:bg-transparent focus:hover:bg-neutral-800;
|
||
|
|
}
|
||
|
|
}
|