You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
4.4 KiB
122 lines
4.4 KiB
/*
|
|
* Menubar recipe — desktop File / Edit / View bar.
|
|
*
|
|
* Scope: provider bar surface + per-menu trigger states. Per-menu
|
|
* Content / Item / Sub-tree / Checkbox / Radio chrome is reused from
|
|
* dropdown-menu.css since soma's Menubar literally re-exports the
|
|
* DropdownMenu parts for those slots (parts emit the same
|
|
* `data-dropdown-menu-*` attrs and the shared menu-indicator partial
|
|
* picks them up automatically).
|
|
*
|
|
* What's menubar-specific:
|
|
*
|
|
* [data-menubar] → bar surface
|
|
* [data-menubar-trigger] → in-bar trigger ("File", "Edit", …)
|
|
* [data-menubar-content] → per-menu panel (same chrome as
|
|
* [data-dropdown-menu-content] via
|
|
* the dropdown-menu recipe; we only
|
|
* add size variants here)
|
|
*
|
|
* Sizes — sm | md | lg (xs and xl out of band for a desktop chrome bar).
|
|
*/
|
|
|
|
/* ── Provider — the bar itself ──────────────────────────────────────── */
|
|
|
|
[data-menubar] {
|
|
--_menubar-height: var(--control-height-md);
|
|
--_menubar-padding: var(--space-1);
|
|
--_menubar-gap: var(--space-1);
|
|
--_menubar-radius: var(--radius-md);
|
|
--_menubar-trigger-px: var(--space-3);
|
|
--_menubar-font-size: var(--font-size-sm);
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--_menubar-gap);
|
|
padding: var(--_menubar-padding);
|
|
border: var(--border-width) solid var(--color-border-default);
|
|
border-radius: var(--_menubar-radius);
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
[data-menubar][data-size='sm'] {
|
|
--_menubar-height: var(--control-height-sm);
|
|
--_menubar-padding: calc(var(--space-1) * 0.5);
|
|
--_menubar-gap: calc(var(--space-1) * 0.5);
|
|
--_menubar-radius: var(--radius-sm);
|
|
--_menubar-trigger-px: var(--space-2);
|
|
--_menubar-font-size: var(--font-size-xs);
|
|
}
|
|
|
|
[data-menubar][data-size='lg'] {
|
|
--_menubar-height: var(--control-height-lg);
|
|
--_menubar-padding: var(--space-2);
|
|
--_menubar-gap: var(--space-2);
|
|
--_menubar-radius: var(--radius-lg);
|
|
--_menubar-trigger-px: var(--space-4);
|
|
--_menubar-font-size: var(--font-size-md);
|
|
}
|
|
|
|
/* ── Trigger — in-bar menu opener ───────────────────────────────────── */
|
|
|
|
[data-menubar-trigger] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-block-size: calc(var(--_menubar-height) - var(--_menubar-padding) * 2 - 2px);
|
|
padding-inline: var(--_menubar-trigger-px);
|
|
border: none;
|
|
border-radius: calc(var(--_menubar-radius) - var(--_menubar-padding));
|
|
background: transparent;
|
|
color: var(--color-content-primary);
|
|
font-family: var(--font-ui);
|
|
font-size: var(--_menubar-font-size);
|
|
font-weight: 500;
|
|
line-height: var(--leading-ui);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition:
|
|
background var(--duration-fast) var(--ease-default),
|
|
color var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-menubar-trigger]:hover:not([data-disabled]),
|
|
[data-menubar-trigger][data-highlighted]:not([data-disabled]) {
|
|
background: var(--color-surface-overlay);
|
|
}
|
|
|
|
[data-menubar-trigger][data-state='open'],
|
|
[data-menubar-trigger][data-state='open']:hover,
|
|
[data-menubar-trigger][data-state='open'][data-highlighted] {
|
|
background: var(--color-primary-element);
|
|
color: var(--color-content-primary);
|
|
}
|
|
|
|
[data-menubar-trigger]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 1px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
[data-menubar-trigger][data-disabled] {
|
|
color: var(--color-content-muted);
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
|
|
/* ── Content — per-menu panel ───────────────────────────────────────────
|
|
* Chrome (border, bg, shadow, padding, item rows, separator, sub-trigger
|
|
* chevron, group heading) comes from `dropdown-menu.css` via the
|
|
* `[data-dropdown-menu-*]` selectors that the Menu/Item/Sub parts emit
|
|
* (soma re-exports the DropdownMenu parts for the per-menu inner slots).
|
|
*
|
|
* We add only the menubar-specific marker selector here. The
|
|
* `[data-menubar-content]` selector matches the panel that wraps the
|
|
* Item rows — it's the same element that ALSO carries
|
|
* `[data-dropdown-menu-content]` because soma's MenubarContent
|
|
* specializes DropdownMenuContent. So the dropdown-menu panel rules
|
|
* already paint it; we don't repeat them.
|
|
*/
|