Andreas Reinhold / reiniandClaude Sonnet 5
f5c90c3874
Plan step 36 (navigation group, third batch): <x-account-menu>'s class lists move into resources/css/components/account-menu.css, keyed on data-md-account-menu (the avatar trigger), data-md-account-menu-avatar and data-md-account-menu-header. The trigger already carried the target-extension and state-layer fixes from an earlier pass (N-01, N-15); this rewrite only moves them onto the shared md-state-layer/ md-touch-target/md-focus-ring classes and their z-index-ordering comment into the stylesheet. The header's name and email keep their type and ink as the fixed text classes on the view (md-type-title-sm/md-ink, md-type-body-sm/md-ink-variant), since they are the caller's own prose. Hooks renamed: data-account-menu to data-md-account-menu, data-account-theme to data-md-account-menu-theme, updated in AppBarTest.php, which carries account-menu's render tests. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
54 lines
2.2 KiB
CSS
54 lines
2.2 KiB
CSS
/*
|
|
* <x-account-menu>: the avatar trigger of an `<x-menu>`, its name-and-email header and its theme
|
|
* item — an M3 "extra" the audit found already inside the foundations (docs/audits/m3-alignment/
|
|
* navigation.md): a 40px trigger reaching M3's 48px target through `md-touch-target` (N-01), with
|
|
* `md-state-layer` for the hover and pressed feedback every other trigger in the library already
|
|
* has (N-15) and `md-focus-ring` for its keyboard ring. The avatar image sits behind the state
|
|
* layer's `::before` (z-index -1, foundation/interaction.css) at z-index -2, so a hover or a press
|
|
* still washes over the picture instead of under it; nothing clips the pseudo-target the touch
|
|
* class draws past the 40px circle.
|
|
*
|
|
* `[data-md-account-menu-header]` is the name-and-email block above the separator; its own type and
|
|
* ink are the fixed text classes on the view (`md-type-title-sm md-ink`, `md-type-body-sm
|
|
* md-ink-variant`), since this is prose the caller supplies, not the component's own part.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './menu.css';
|
|
@import './menu-separator.css';
|
|
@import './menu-item.css';
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
[data-md-account-menu] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--md-sys-measurement-space500);
|
|
block-size: var(--md-sys-measurement-space500);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
cursor: pointer;
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-account-menu-avatar] {
|
|
position: relative;
|
|
z-index: -2;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
object-fit: cover;
|
|
}
|
|
|
|
[data-md-account-menu-header] {
|
|
padding-inline: 12px;
|
|
padding-block: var(--md-sys-measurement-space100) 12px;
|
|
}
|
|
}
|