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