Bug 1412789 - fix tracking protection slider position in rtl r?johannh draft
authorLuke Crouch <lcrouch@mozilla.com>
Fri, 17 Nov 2017 11:43:52 -0600
changeset 703712 02bdea84dbce62ff361b0db716753c96c88d59f6
parent 698261 45715ece25fcb064eee4f977ebd842d44a87f22b
child 741881 165c93fe77a3405530361fccc260852f1e996695
push id90936
push userbmo:lcrouch@mozilla.com
push dateMon, 27 Nov 2017 15:17:14 +0000
reviewersjohannh
bugs1412789
milestone59.0a1
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;
 }