@webority/theme 0.107.0 → 0.108.0

package/scss/wui/_menubar.scss

@@ -1,110 +0,0 @@
-// ── Menubar ──
-// AppMenubar / <app-menubar> (a <wui-menubar> element): an application menubar (File, Edit, View).
-// A top menu is a Bootstrap .dropdown-menu with .dropdown-item rows, so the look, the danger tone
-// and the icon treatment come from the shared dropdown styles; this partial adds the bar, the
-// triggers and the placement. The element shows a panel with [data-open] (never `.show`, which a
-// React re-render would reset). A top panel is placed by the element with position: fixed, so it
-// escapes any clipping ancestor; a submenu is absolute against its row and flips to the left at
-// the viewport edge through [data-side="start"]. Every colour is a theme token.
-//
-// Part of the wui-components layer, see _wui-components.scss for load order.
-
-wui-menubar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 2px;
-    min-width: 0;
-}
-
-.wui-menubar-trigger {
-    padding: 6px 10px;
-    border: 0;
-    border-radius: var(--wui-radius-sm);
-    background: transparent;
-    color: var(--color-text);
-    font: inherit;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1.2;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &:hover,
-    &[aria-expanded="true"] {
-        background: var(--color-bg-muted);
-    }
-    &:focus-visible {
-        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-        outline-offset: 1px;
-    }
-    &[aria-disabled="true"] {
-        background: transparent;
-        color: var(--color-text-subtle);
-        cursor: default;
-    }
-}
-
-.dropdown-menu.wui-menubar-panel {
-    position: fixed;
-    // Above a modal, like every other portalled menu (see --wui-z-* in _tokens.scss).
-    z-index: var(--wui-z-menu);
-    min-width: 14rem;
-    outline: none;
-    transform-origin: top left;
-
-    &[data-open] {
-        display: block;
-        animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
-    }
-    &.drop-up {
-        --wui-menu-drop: 6px;
-
-        transform-origin: bottom left;
-    }
-
-    .dropdown-item:focus-visible {
-        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-        outline-offset: var(--wui-focus-ring-inset);
-    }
-    // Listed but unchoosable: quiet, and no hover tint.
-    .dropdown-item[aria-disabled="true"] {
-        color: var(--color-text-subtle);
-        cursor: default;
-        background: transparent;
-    }
-    // The row whose submenu is open keeps its tint while focus is inside the submenu.
-    .dropdown-item[aria-expanded="true"] {
-        background: var(--color-bg-muted);
-    }
-}
-
-.wui-menubar-sub {
-    position: relative;
-}
-.dropdown-menu.wui-menubar-subpanel {
-    // The element sets --wui-menubar-sub-offset when the submenu would run past the bottom edge.
-    position: absolute;
-    top: calc(var(--wui-menubar-sub-offset, 0px) - 5px);
-    right: auto;
-    bottom: auto;
-    left: 100%;
-    transform-origin: top left;
-
-    &[data-side="start"] {
-        right: 100%;
-        left: auto;
-        transform-origin: top right;
-    }
-}
-// The submenu marker; a shortcut chip never sits on the same row.
-.wui-menubar-subtrigger > .wui-menubar-chevron {
-    flex: none;
-    margin-left: auto;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .dropdown-menu.wui-menubar-panel[data-open] {
-        animation: none;
-    }
-}