Bug 1412789 - fix tracking protection slider position in rtl r=johannh
authorLuke Crouch <lcrouch@mozilla.com>
Fri, 17 Nov 2017 11:43:52 -0600
changeset 393810 9ee6a53be3072dc4fe0745a063414ace4703594b
parent 393809 0086d45ece41e1e700f519a8fc1ceacb97856b3d
child 393811 50ea7f713c35b8e8f594dbd8732fbb2639af9115
push id56056
push userjhofmann@mozilla.com
push dateMon, 27 Nov 2017 16:25:03 +0000
treeherderautoland@9ee6a53be307 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1412789
milestone59.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 1412789 - fix tracking protection slider position in rtl r=johannh Use logical properties for offset and float to avoid rtl-specific rules. Note: background-position and transition property don't support logical properties, so those rtl-specific rules must be kept for now. MozReview-Commit-ID: BEiAcufOYAX
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -35,27 +35,23 @@ p {
   line-height: 1.5em;
 }
 
 .list-row {
   overflow: auto;
 }
 
 .list-row > ul > li {
-  float: left;
+  float: inline-start;
   width: 16em;
   line-height: 2em;
   margin-inline-start: 1em;
   margin-bottom: 0;
 }
 
-.list-row > ul > li:dir(rtl) {
-  float: right;
-}
-
 .title {
   background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
   background-position: left center;
   background-size: 2em;
   line-height: 2em;
   margin-inline-start: calc(-2em - 10px);
   padding-inline-start: calc(2em + 10px);
 }
@@ -148,21 +144,16 @@ a.button {
 }
 
 .toggle:checked + .toggle-btn {
   background: #16da00;
   border-color: #0CA700;
 }
 
 .toggle:checked + .toggle-btn::after {
-  left: 21px;
-}
-
-.toggle:checked + .toggle-btn:dir(rtl)::after {
-  left: auto;
-  right: 16px;
+  offset-inline-start: 21px;
 }
 
 .toggle:-moz-focusring + .toggle-btn {
   outline: 2px solid rgba(0, 149, 221, 0.5);
   outline-offset: 1px;
   -moz-outline-radius: 2px;
 }