Bug 1378168 - Ensure overlay notification icon sizing. r=mossop draft
authorTimothy Guan-tin Chien <timdream@gmail.com>
Thu, 06 Jul 2017 13:39:19 +0800
changeset 604666 b3596656cd76e20397099621ee761a599653e658
parent 604481 af0466865a212c84fbbab343c9cbb984c6132920
child 636265 cae19468d6dc533dc796f352dd6abd7f51aaed22
push id67158
push usertimdream@gmail.com
push dateThu, 06 Jul 2017 08:36:15 +0000
reviewersmossop
bugs1378168
milestone56.0a1
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
@@ -367,28 +367,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%;
@@ -421,17 +422,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;