Draw the menu separator without Tailwind
The separator renders data-md-menu-separator and takes its 1px line, 8px block margin and 16px inset from menu-separator.css in material.components (plan step 36, actions). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
b573cfbcc2
commit
6df034f81a
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* <x-menu-separator>: a line between groups of items in a menu — 1px in `outline-variant`, with
|
||||
* M3's 8px above and below it, inset to the 16px the items keep either side (M3's menu page:
|
||||
* "dividers are more subtle and are the right choice for scrollable menus"; SegmentedMenuTokens'
|
||||
* divider spacing).
|
||||
*/
|
||||
|
||||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||||
|
||||
@layer material.components {
|
||||
[data-md-menu-separator] {
|
||||
block-size: 1px;
|
||||
margin-block: var(--md-sys-measurement-space100);
|
||||
margin-inline: var(--md-sys-measurement-space200);
|
||||
border-width: 0;
|
||||
background-color: var(--md-sys-color-outline-variant);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user