Bug 1378168 - Ensure overlay notification icon sizing. r=mossop
authorTimothy Guan-tin Chien <timdream@gmail.com>
Thu, 06 Jul 2017 13:39:19 +0800
changeset 368167 b6cb72de33af2bd79a307fe11145f035bcab2366
parent 368166 3dfb4c796b7b87cc6e90bf83ef7822c8ba9c4767
child 368168 33f8d1b03767e0f63c2420a9b510372ff98ffe8b
push id32158
push usercbook@mozilla.com
push dateTue, 11 Jul 2017 10:48:59 +0000
treeherdermozilla-central@5e2692f8a367 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmossop
bugs1378168
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1378168 - Ensure overlay notification icon sizing. r=mossop MozReview-Commit-ID: BNHxuSK2B5R
browser/extensions/onboarding/content/onboarding.css
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -369,28 +369,29 @@
 }
 
 #onboarding-notification-icon:dir(rtl) {
   background-position: right 34px center;
 }
 
 #onboarding-notification-icon::after {
   --height: 22px;
+  --vpadding: 3px;
   content: attr(data-tooltip);
   background: #5ce6e6;
   position: absolute;
   top: 0;
   offset-inline-start: 68px;
   color: #10404a;
   font-size: 12px;
-  min-height: var(--height);
-  line-height: var(--height);
+  line-height: calc(var(--height) - var(--vpadding) * 2);
+  max-width: 90px;
   border-radius: calc(var(--height) / 2);
   border: 1px solid #fff;
-  padding: 0 10px;
+  padding: var(--vpadding) 10px;
   text-align: center;
 }
 
 #onboarding-notification-close-btn {
   background-color: rgba(255, 255, 255, 0.97);
   border: none;
   position: absolute;
   offset-block-start: 50%;
@@ -423,17 +424,17 @@
   font-size: 13px
 }
 
 #onboarding-notification-tour-title {
   margin: 0;
 }
 
 #onboarding-notification-tour-icon {
-  width: 64px;
+  min-width: 64px;
   height: 64px;
   background-size: 64px;
   background-repeat: no-repeat;
 }
 
 #onboarding-notification-action-btn {
   background: #0d96ff;
   border: none;