Source code
Revision control
Copy as Markdown
Other Tools
.menubar > .menuitem {
display: inline-flex;
}
.menulist .menuitem {
display: flex;
}
.menubar {
display: inline-flex;
flex-direction: row;
gap: 0.5em;
width: max-content;
background-color: transparent;
border: 1px solid currentColor;
border-radius: 0.25em;
padding: 0.25em;
}
.menulist {
display: flex;
flex-direction: column;
position: absolute;
width: max-content;
min-width: 150px;
color: CanvasText;
background-color: Canvas;
border: 1px solid currentColor;
/* TODO(domfarolino): Enable this. See the related documentation in the
* Chromium UA style sheet for this. */
/* border-radius: 0.25em; */
padding: 0.25em;
/* Unset native popover margin */
margin: 0;
}
/* Menulists whose implicit anchor is a menuitem in a menubar. */
.menulist-with-menubar-anchor {
position: absolute;
/* Below and span-right, by default. */
position-area: block-end span-inline-end;
}
/* Menulists whose implicit anchor is a menuitem in a menulist. */
.menulist-with-menulist-anchor {
position: absolute;
/* To the right, with its top aligned to the implicit anchor's top. */
position-area: inline-end span-block-end;
}
.menubar, .menulist {
.menuitem {
align-items: center;
padding: 1em;
min-inline-size: 24px;
min-block-size: max(24px, 1lh);
}
}