Fix menu alignment, fix issue where overlay div sometimes incorrectly inherited bg color, allow custom HTML to be passed as string
This commit is contained in:
parent
73eec1f7ba
commit
56321e52fc
@ -146,6 +146,7 @@ export class ClientMenu {
|
|||||||
height: '100%',
|
height: '100%',
|
||||||
zIndex: this.config.isGlobal ? '2147483647' : '2147483640',
|
zIndex: this.config.isGlobal ? '2147483647' : '2147483640',
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
|
background: 'transparent',
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('UI host created:', this.host);
|
console.log('UI host created:', this.host);
|
||||||
@ -238,7 +239,11 @@ export class ClientMenu {
|
|||||||
el.className = `uw-menu-item uw-trigger`;
|
el.className = `uw-menu-item uw-trigger`;
|
||||||
|
|
||||||
if (item.customHTML) {
|
if (item.customHTML) {
|
||||||
|
if (item.customHTML instanceof HTMLElement) {
|
||||||
el.appendChild(item.customHTML);
|
el.appendChild(item.customHTML);
|
||||||
|
} else {
|
||||||
|
el.innerHTML = item.customHTML;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
el.textContent = item.label;
|
el.textContent = item.label;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
@import "tailwindcss/utilities";
|
@import "tailwindcss/utilities";
|
||||||
|
|
||||||
.uw-menu-root {
|
.uw-menu-root {
|
||||||
@apply h-full w-full font-mono text-stone-200 text-[16px] flex flex-row;
|
@apply h-full w-full font-mono text-stone-200 text-[16px] flex flex-row bg-transparent;
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity 120ms ease;
|
transition: opacity 120ms ease;
|
||||||
@ -67,8 +67,7 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
/* we'll also animate a bit */
|
/* we'll also animate a bit */
|
||||||
transform: translateX(-4px);
|
transition: opacity 120ms ease, width 120ms ease;
|
||||||
transition: opacity 120ms ease, transform 120ms ease, width 120ms ease;
|
|
||||||
|
|
||||||
&.uw-menu-left {
|
&.uw-menu-left {
|
||||||
@apply left-full;
|
@apply left-full;
|
||||||
@ -79,10 +78,11 @@
|
|||||||
|
|
||||||
&.uw-menu-left, &.uw-menu-right {
|
&.uw-menu-left, &.uw-menu-right {
|
||||||
&.uw-menu-top {
|
&.uw-menu-top {
|
||||||
@apply top-1/2 -translate-y-1/2;
|
@apply top-0;
|
||||||
}
|
}
|
||||||
&.uw-menu-ycenter {
|
&.uw-menu-ycenter {
|
||||||
@apply top-0;
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
&.uw-menu-bottom {
|
&.uw-menu-bottom {
|
||||||
@apply bottom-0;
|
@apply bottom-0;
|
||||||
@ -114,8 +114,6 @@
|
|||||||
|
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user