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 393797 9ee6a53be3072dc4fe0745a063414ace4703594b
parent 393796 0086d45ece41e1e700f519a8fc1ceacb97856b3d
child 393798 50ea7f713c35b8e8f594dbd8732fbb2639af9115
push id32982
push userebalazs@mozilla.com
push dateMon, 27 Nov 2017 21:55:57 +0000
treeherdermozilla-central@5441160857a6 [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;
 }