Bug 1386726 - Fix alignment of banner item labels in the hamburger menu. r?Gijs
* The start padding should match the 12px defined for nearby toolbarbuttons:
.subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1
* Add override for OSX which uses 18px for this padding
* Adjust margin for the right/end icon in banner items
MozReview-Commit-ID: 81u97Wf8qXr
--- a/browser/themes/osx/customizableui/panelUI.css
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -15,16 +15,20 @@
.subviewbutton {
padding-inline-start: 18px;
}
photonpanelmultiview .toolbaritem-combined-buttons > label {
padding-inline-start: 42px; /* 18px toolbarbutton padding + 16px icon + 8px label padding start */
}
+#appMenu-mainView > .panel-subview-body > .panel-banner-item {
+ padding-inline-start: 18px;
+}
+
#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
/* 18px space before the avatar, then 16px for the avatar */
padding-inline-start: 34px;
margin-inline-start: -34px;
}
#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
margin-inline-start: 18px;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -772,17 +772,17 @@ toolbaritem[cui-areatype="menu-panel"][s
margin-bottom: -1px;
}
/* in Photon, we have a bottom border as well. Reconcile with the above rule
* after photon launch. */
#appMenu-mainView > .panel-subview-body > .panel-banner-item {
border-bottom: 1px solid var(--panel-separator-color);
margin-bottom: 3px;
- padding-inline-start: 10px;
+ padding-inline-start: 12px;
}
.panel-banner-item > .toolbarbutton-text {
width: 0; /* Fancy cropping solution for flexbox. */
}
/* FxAccount indicator bits. */
@@ -1373,17 +1373,17 @@ photonpanelmultiview .PanelUI-subView .t
}
photonpanelmultiview .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
font-size: 1em;
padding-inline-start: 0;
}
photonpanelmultiview .panel-banner-item::after {
- margin-inline-end: 14px;
+ margin-inline-end: 12px;
margin-inline-start: 10px;
}
photonpanelmultiview .subview-subheader {
color: GrayText;
}
photonpanelmultiview .subview-subheader,