Bug 1385123 - [Onboarding] Fix word wrapping when focusing on tour items under some languages. r=Fischer,mossop
authorRex Lee <rexboy@mozilla.com>
Tue, 01 Aug 2017 12:22:03 +0800
changeset 421972 a304408c275f7f503a078b144351e548e9cbab01
parent 421971 df430a961c90fdff52297d24380971d4980eecf9
child 421973 3fc46b53b7ee04d6002d9bac5f19f72c899f1444
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersFischer, mossop
bugs1385123
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 1385123 - [Onboarding] Fix word wrapping when focusing on tour items under some languages. r=Fischer,mossop MozReview-Commit-ID: HgMnsOQefQR
browser/extensions/onboarding/content/onboarding.css
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -146,23 +146,20 @@
 
 /* Onboarding tour list */
 #onboarding-tour-list {
   margin: 40px 0 0 0;
   padding: 0;
 }
 
 #onboarding-tour-list > li {
-  --padding-inline-start: 49px;
-  --padding-top: 14px;
-  --padding-bottom: 14px;
   list-style: none;
-  padding-inline-start: var(--padding-inline-start);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+  padding-inline-start: 49px;
+  padding-top: 14px;
+  padding-bottom: 14px;
   margin-inline-start: 16px;
   margin-bottom: 9px;
   background-repeat: no-repeat;
   background-position: left 17px top 14px;
   background-size: 20px;
   font-size: 16px;
   cursor: pointer;
 }
@@ -175,28 +172,24 @@
   content: url("img/icons_tour-complete.svg");
   position: relative;
   offset-inline-start: 3px;
   top: -10px;
   float: inline-start;
 }
 
 #onboarding-tour-list > li.onboarding-complete {
-  --padding-inline-start: 29px;
+  padding-inline-start: 29px;
 }
 
 #onboarding-tour-list > li.onboarding-active,
 #onboarding-tour-list > li:hover {
   color: #0A84FF;
-  /* With 1px transparent border, could see a border in the high-constrast mode */
-  border: 1px solid transparent;
-  /* Substract 1px for the 1px transparent or a 1px shift would happen */
-  padding-inline-start: calc(var(--padding-inline-start) - 1px);
-  padding-top: calc(var(--padding-top) - 1px);
-  padding-bottom: calc(var(--padding-bottom) - 1px);
+  /* With 1px transparent outline, could see a border in the high-constrast mode */
+  outline: 1px solid transparent;
 }
 
 /* Default browser tour */
 #onboarding-tour-is-default-browser-msg {
   font-size: 16px;
   line-height: 21px;
   float: inline-end;
   margin-inline-end: 26px;