Bug 857987 - (Part 2) Use flex to size segmented buttons in reader mode menu. r=mfinkle
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Sun, 12 May 2013 19:24:40 -0700
changeset 131694 d0344d91c8bfab05eeeb441d80e67a230876ba99
parent 131693 d8f738b7da5cb7270db4af7182e8b46b2b42a56a
child 131695 83f2d910f1652ec50540b006e8a497ce23bc1c5e
push id27940
push usermleibovic@mozilla.com
push dateMon, 13 May 2013 02:25:09 +0000
treeherdermozilla-inbound@83f2d910f165 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs857987
milestone23.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 857987 - (Part 2) Use flex to size segmented buttons in reader mode menu. r=mfinkle
mobile/android/themes/core/aboutReader.css
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -435,37 +435,40 @@ body {
   bottom: -18px;
   background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
   background-size: 40px 18px;
   background-position: center;
   display: block;
 }
 
 .segmented-button {
+  display: flex;
+  flex-direction: row;
   list-style: none;
   margin: 0;
   padding: 5px;
   white-space: nowrap;
 }
 
 .segmented-button > li {
-  display: inline-block;
+  flex: 1 1 auto;
+  text-align: center;
   padding: 1px 5px;
   border-left: 1px solid #ccc;
 }
 
 .segmented-button > li:first-child {
   border-left: 0px;
 }
 
 .segmented-button > li > a,
 .segmented-button > li > a:hover
 .segmented-button > li > a:visited {
   display: block;
-  padding: 10px 34px;
+  padding: 10px 16px;
   text-decoration: none;
   color: black;
   border-radius: 4px;
 }
 
 .segmented-button > li > a:active,
 .segmented-button > li.selected > a {
   background: #ccc;