macOS menupopup styles: RTL fixes

- Use padding-inline-start for gutter
- Refactor other rules that used left/right margins/paddings, to make
  future accidental breakage less likely

Fixes #4538
This commit is contained in:
Abe Jellinek 2024-08-09 13:15:26 -06:00
parent a7eb49162e
commit b3589e1d89

View file

@ -3,9 +3,8 @@ menupopup {
--panel-padding: 5px 0;
menu, menuitem {
appearance: none;
margin-left: 5px;
margin-right: 5px;
padding: 3px 10px 3px 10px;
margin-inline: 5px;
padding: 3px 10px;
border-radius: 4px;
&[_moz-menuactive] {
@ -38,19 +37,18 @@ menupopup {
menulist > &,
&[needsgutter] {
menu, menuitem {
padding-left: 20px;
padding-inline-start: 20px;
// Add padding here so that it won't look weird when the customElement.js is not yet loaded
&:is([checked="true"], [selected="true"]) {
padding-left: 6px;
padding-inline-start: 6px;
}
}
}
menuseparator {
appearance: none;
margin-left: 15px;
margin-right: 15px;
margin-inline: 15px;
border-bottom: 1px solid;
padding-bottom: 0px;
@include light-dark(border-color, rgba(170, 170, 170, 0.5), rgba(100, 100, 100, 0.5));
@ -60,7 +58,7 @@ menupopup {
appearance: none;
@include svgicon-menu("chevron-8", "universal", "8");
rotate: -90deg;
margin-inline-end: 0px;
margin-inline-end: 0;
}
}