WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

refactor(ui): compact mega menu layouts
Quality / quality (windows-latest) (push) Waiting to run
Details
Quality / quality (ubuntu-latest) (push) Failing after 9m53s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-24 23:06:01 +05:30
parent 8f3a13c854
commit 45309b3f72
6 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/MegaMenu.wrn
+24 -6
View File
@@ -358,6 +358,7 @@ component MegaMenu {
}
.wrn-mega__panel {
box-sizing: border-box;
position: absolute;
z-index: 1200;
top: calc(100% + 0.4rem);
@@ -386,6 +387,20 @@ component MegaMenu {
.wrn-mega[data-panel-align="center"] .wrn-mega__panel { left: 50%; transform: translateX(-50%); }
.wrn-mega[data-panel-align="end"] .wrn-mega__panel { right: 0; left: auto; }
.wrn-mega[data-variant="default"] .wrn-mega__panel {
width: max-content;
min-width: 15rem;
max-width: min(24rem, calc(100dvw - 2rem));
height: auto;
}
.wrn-mega[data-variant="default"] .wrn-mega__layout,
.wrn-mega[data-variant="default"] .wrn-mega__columns,
.wrn-mega[data-variant="default"][data-column-count] .wrn-mega__columns {
grid-template-columns: minmax(0, 1fr);
}
.wrn-mega[data-variant="default"] .wrn-mega__columns { overflow: visible; }
.wrn-mega[data-variant="default"] .wrn-mega__featured { width: auto; padding: 1rem 0 0; border-top: 1px solid var(--wrn-color-border); border-left: 0; }
.wrn-mega__layout { display: grid; min-height: 0; max-height: calc(100dvh - 8rem); flex: 1; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; overflow: hidden; }
.wrn-mega__columns {
@@ -461,14 +476,15 @@ component MegaMenu {
.wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: min(36rem, calc(100dvh - 6.5rem)); }
.wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 0; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail { min-width: 0; padding: 0.5rem; gap: 0.15rem; border-radius: calc(var(--wrn-radius-lg) - 0.25rem); }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-link { padding: 0.48rem 0.55rem; align-items: center; gap: 0.55rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-link strong { font-size: 0.76rem; line-height: 1.25; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; font-size: 0.9rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail { min-width: 0; padding: 0.55rem; gap: 0.3rem; border-radius: calc(var(--wrn-radius-lg) - 0.25rem); }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-link { min-height: 2.5rem; padding: 0.45rem 0.55rem; align-items: center; gap: 0.7rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-link strong { font-size: 0.76rem; font-weight: 400; line-height: 1.25; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-link[data-active="true"] strong { font-weight: 600; }
.wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem; color: var(--wrn-color-text); border-radius: 0.45rem; background: color-mix(in srgb, var(--wrn-color-text) 10%, transparent); font-size: 0.88rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 0.35rem 0.5rem 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
.wrn-mega[data-variant="catalog"] .wrn-mega__column { display: flex; min-height: 100%; flex-direction: column; }
.wrn-mega[data-variant="catalog"] .wrn-mega__column-header { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-md); background: var(--wrn-color-surface-soft); }
.wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0; color: var(--wrn-color-text); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.wrn-mega[data-variant="catalog"] .wrn-mega__column-header { width: fit-content; min-width: min(18rem, 100%); margin: 0 0 0.85rem; padding: 0.6rem 0.75rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-sm); background: var(--wrn-color-surface-soft); }
.wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.wrn-mega[data-variant="catalog"] .wrn-mega__column-description { margin: 0.3rem 0 0; }
.wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; }
.wrn-mega[data-variant="catalog"] .wrn-mega__link { min-height: 3.25rem; padding: 0.7rem 0.8rem; align-items: center; border: 1px solid var(--wrn-color-border); background: color-mix(in srgb, var(--wrn-color-surface-soft) 55%, transparent); }
@@ -499,6 +515,8 @@ component MegaMenu {
min-width: 0;
}
.wrn-mega[data-variant="catalog"] .wrn-mega__link-icon { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; }
.wrn-mega__link-label {
font-size: 0.88rem;
font-weight: 600;