Update react, add some V2 components for V1 usage
This commit is contained in:
parent
921da09a63
commit
1a5465dc34
21 changed files with 564 additions and 43 deletions
|
@ -0,0 +1,58 @@
|
|||
.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;
|
||||
}
|
||||
}
|
Reference in a new issue