Fix: Menu - RTL support #387

This commit is contained in:
alstjr7375 2022-09-05 09:52:44 +09:00
parent b435705098
commit 734ed6913e
6 changed files with 41 additions and 25 deletions

View file

@ -1,16 +1,15 @@
@import "./menu_common";
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
}
.context-menu-list .context-menu-item button span {
@include _layout_icon_menus;
padding-inline-start: 24px; /* 16p + (4px * 2) */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Layout */
background-size: 16px;
background-repeat: no-repeat;
background-image: var(--menuitem-image);
background-position: left 4px center;
background-position: var(--uc-menu-background-position, left) 4px center;
&:dir(rtl) {
--uc-menu-background-position: right;
}
}

View file

@ -66,7 +66,7 @@ $_bookmarkToolbarMenus: selector.nest(
}
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
@include _layoutBookmarkPopup() {
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
@ -82,7 +82,7 @@ $_bookmarkToolbarMenus: selector.nest(
@include _layoutBookmarkMenu() {
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
}
}

View file

@ -56,12 +56,12 @@ $_layoutCommonMenus: (
/* Menubar */
@include Option("userChrome.icon.global_menubar") {
#{$_globalMenus} {
background-position: left var(--context-menu-background-padding-default) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding-default) center !important;
padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
padding-inline-end: 3px;
&:first-child {
background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
background-position: var(--uc-menu-background-position) calc(3px + var(--context-menu-background-padding-default)) center !important;
padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
}
> menupopup {

View file

@ -62,12 +62,16 @@ $_initialMenus: selector.append(
// Padding
@mixin _layout_root_padding() {
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
&:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
}
}
@mixin _layout_init_padding() {
background-position: left var(--context-menu-background-padding) center !important;
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}