MediaWiki:Gadget-wix-nav.css: Difference between revisions
Content deleted Content added
Created page with "/* ================================================================ WIX-NAV.CSS — Wiki Interactive Experience: Training Navigation ================================================================ Loaded via ResourceLoader alongside wix-nav.js. Depends on design tokens defined in wix-core.css. Provides a horizontal navigation bar for multi-page training programs. Auto-highlights the current page. ====================================================..." |
No edit summary |
||
Line 88:
padding: 0.4rem 0.75rem;
}
}
/* ================================================================
DROPDOWN VARIANT — data-wix-module="nav-dropdown"
Full-width toggle button that opens a panel of page links.
================================================================ */
/* ── 5. Dropdown Wrapper ─────────────────────────────────────────
Positioning context for the panel.
──────────────────────────────────────────────────────────────── */
.wix-dropdown {
position: relative;
width: 100%;
margin-bottom: 1rem;
}
/* ── 6. Toggle Button ────────────────────────────────────────────
Full-width button showing the current page label + chevron.
──────────────────────────────────────────────────────────────── */
.wix-dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.6rem 1rem;
border: 1px solid var(--wix-border);
border-radius: var(--wix-radius);
background: var(--wix-bg);
color: var(--wix-text);
font: inherit;
font-size: 0.85em;
font-weight: 600;
color: inherit;
cursor: pointer;
transition:
border-color var(--wix-transition),
background var(--wix-transition);
-webkit-tap-highlight-color: transparent;
}
.wix-dropdown-toggle:hover {
border-color: var(--wix-accent);
background: var(--wix-accent-light);
}
.wix-dropdown-chevron {
margin-left: 0.5rem;
transition: transform var(--wix-transition);
flex-shrink: 0;
font-size: 0.85em;
color: var(--wix-text-muted);
}
.wix-dropdown-toggle--open .wix-dropdown-chevron {
transform: rotate(180deg);
}
/* ── 7. Dropdown Panel ───────────────────────────────────────────
List of page links, absolutely positioned below the toggle.
──────────────────────────────────────────────────────────────── */
.wix-dropdown-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 2px;
border: 1px solid var(--wix-border);
border-radius: var(--wix-radius);
background: var(--wix-bg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 100;
overflow: hidden;
}
.wix-dropdown-panel--open {
display: block;
animation: wixFadeIn 0.15s ease;
}
/* ── 8. Dropdown Items ───────────────────────────────────────────
Each page in the list.
──────────────────────────────────────────────────────────────── */
.wix-dropdown-item {
display: block;
width: 100%;
padding: 0.55rem 1rem;
color: var(--wix-text);
font-size: 0.85em;
font-weight: 600;
text-decoration: none;
transition:
background var(--wix-transition);
cursor: pointer;
}
.wix-dropdown-item:hover {
background: var(--wix-accent-light);
text-decoration: none;
color: var(--wix-text);
}
.wix-dropdown-item + .wix-dropdown-item {
border-top: 1px solid var(--wix-border-subtle);
}
.wix-dropdown-item--current {
background: var(--wix-accent);
color: #fff;
cursor: default;
}
.wix-dropdown-item--current:hover {
background: var(--wix-accent);
color: #fff;
}
| |||