Bug 1274272 - followup: use float: left/right to ensure this keeps working when inline-start is not available, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Thu, 26 May 2016 14:27:45 +0100
changeset 299130 5a75edd0bfb2d36793c95735ad35e2c3153e53de
parent 299129 3a42cbfb7f70656842e85facfe18b72ccd33baf8
child 299131 9fd1d6aeed21def0fbbec7cba706b5752cb0ad08
push id77452
push usergijskruitbosch@gmail.com
push dateThu, 26 May 2016 13:54:11 +0000
treeherdermozilla-inbound@5a75edd0bfb2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1274272
milestone49.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 1274272 - followup: use float: left/right to ensure this keeps working when inline-start is not available, r=mikedeboer MozReview-Commit-ID: 7VTz8mwyUN7
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -61,23 +61,27 @@ p {
   line-height: 1.5em;
 }
 
 .list-row {
   overflow: auto;
 }
 
 .list-row > ul > li {
-  float: inline-start;
+  float: left;
   width: 220px;
   line-height: 1.5em;
   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-size: 64px;
   background-position: left, center;
   font-weight: lighter;
   line-height: 1.5em;
   min-height: 64px;
   margin-inline-start: 0;
@@ -156,32 +160,33 @@ a.button {
   box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
               0 1px 0 hsla(0, 0%, 0%, .2);
   border-radius: 50%;
   background: white;
   transition: left .2s ease;
 }
 
 .toggle + .toggle-btn::before {
-  float: inline-start;
+  float: left;
   left: 9px;
   visibility: hidden;
   background-size: 16px;
   background-repeat: no-repeat;
   background-color: transparent;
   background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
 }
 
 .toggle + .toggle-btn:dir(rtl)::after {
   left: auto;
   right: 0;
   transition-property: right;
 }
 
 .toggle + .toggle-btn:dir(rtl)::before {
+  float: right;
   left: auto;
   right: 9px;
 }
 
 .toggle:checked + .toggle-btn {
   background: #3fc455;
   border: 1px solid #269939;
 }