Bug 1400203 - Middle align the image and text of help button since there might be a multiple lines string in the button - Fix mozilla-central. draft
authorEvan Tseng <evan@tseng.io>
Tue, 19 Sep 2017 17:31:40 +0800
changeset 666860 182a91ce30897b35c4af34ef3c720f252a5847de
parent 666598 30a386ff1192cba08a2f899343f81f6946bc6148
child 732212 d95c275e76f6af3d588a04a387b634ca78ac47b7
push id80525
push userbmo:evan@tseng.io
push dateTue, 19 Sep 2017 09:34:34 +0000
bugs1400203
milestone57.0a1
Bug 1400203 - Middle align the image and text of help button since there might be a multiple lines string in the button - Fix mozilla-central. MozReview-Commit-ID: ECM1LCXVCrS
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -587,30 +587,32 @@ separator.thin:not([orient="vertical"]) 
 
 @media (min-resolution: 1.1dppx) {
   .update-throbber {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
 .help-button {
+  display: flex;
+  align-items: center;
   position: fixed;
   left: 0;
   bottom: 36px;
   background-image: url("chrome://global/skin/icons/help.svg");
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  line-height: 36px;
-  height: 36px;
+  line-height: 22px;
+  height: unset;
+  min-height: 36px;
   width: 168px;
-  background-position: left 10px top 10px;
+  background-position: left 10px center;
   background-size: 16px;
   padding-inline-start: 38px;
   margin-inline-start: 34px;
-  white-space: nowrap;
 }
 
 .help-button:-moz-locale-dir(rtl) {
   background-position: right 10px top 10px;
   left: auto;
   right: 0;
 }