131 lines
2.1 KiB
CSS
131 lines
2.1 KiB
CSS
@import "tailwindcss";
|
|
@import "tailwindcss/utilities";
|
|
|
|
.uw-menu-root {
|
|
@apply h-full w-full font-mono text-stone-200 text-[16px] flex flex-row bg-transparent;
|
|
|
|
pointer-events: none;
|
|
transition: opacity 120ms ease;
|
|
|
|
&:not(.uw-visible) {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
&.uw-hidden {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
&.uw-visible {
|
|
/* pointer-events: auto; */
|
|
opacity: 1;
|
|
}
|
|
|
|
&.uw-menu-left {
|
|
@apply justify-start;
|
|
}
|
|
&.uw-menu-right {
|
|
@apply justify-end;
|
|
}
|
|
|
|
&.uw-menu-left, &.uw-menu-right {
|
|
&.uw-menu-top {
|
|
@apply items-start;
|
|
}
|
|
&.uw-menu-ycenter {
|
|
@apply items-center;
|
|
}
|
|
&.uw-menu-bottom {
|
|
@apply items-end;
|
|
}
|
|
}
|
|
|
|
&.uw-menu-center {
|
|
@apply flex-col items-center;
|
|
|
|
&.uw-menu-top {
|
|
@apply justify-start;
|
|
}
|
|
&.uw-menu-bottom {
|
|
@apply justify-end;
|
|
}
|
|
}
|
|
|
|
* {
|
|
@apply font-mono text-stone-200 text-[1em];
|
|
}
|
|
}
|
|
|
|
.uw-trigger, .uw-menu-item, .uw-menu-trigger {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.uw-submenu {
|
|
@apply absolute flex-col gap-0;
|
|
|
|
opacity: 0;
|
|
display: none;
|
|
pointer-events: none;
|
|
|
|
/* we'll also animate a bit */
|
|
transition: opacity 120ms ease, width 120ms ease;
|
|
|
|
&.uw-menu-left {
|
|
@apply left-full;
|
|
}
|
|
&.uw-menu-right {
|
|
@apply right-full;
|
|
}
|
|
|
|
&.uw-menu-left, &.uw-menu-right {
|
|
&.uw-menu-top {
|
|
@apply top-0;
|
|
}
|
|
&.uw-menu-ycenter {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
&.uw-menu-bottom {
|
|
@apply bottom-0;
|
|
}
|
|
}
|
|
|
|
&.uw-menu-center {
|
|
@apply left-1/2 -translate-x-1/2 flex-row;
|
|
|
|
&.uw-menu-top {
|
|
@apply bottom-0;
|
|
}
|
|
&.uw-menu-bottom {
|
|
@apply top-0;
|
|
}
|
|
}
|
|
|
|
* {
|
|
@apply font-mono text-stone-200 text-[1em];
|
|
}
|
|
}
|
|
|
|
.uw-menu-item, .uw-menu-trigger {
|
|
|
|
&:hover > .uw-submenu,
|
|
&:focus-within > .uw-submenu {
|
|
display: flex;
|
|
z-index: 200;
|
|
|
|
opacity: 1 !important;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
|
|
.uw-trigger {
|
|
@apply p-4 relative block
|
|
bg-stone-950/75 backdrop-blur-[1em] backdrop-brightness-75 backdrop-saturate-50
|
|
text-nowrap
|
|
;
|
|
|
|
&:hover {
|
|
@apply text-primary-200 bg-stone-800/75;
|
|
}
|
|
}
|