remove box-sizing

Fixes #17 Tested in IE 8, IE 9, Chrome, Firefox, and Safari
todc · Feb 4, 2013 · beaabe3 · beaabe3
1 parent dbd0b4d
commit beaabe3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 46 deletions.
diff --git a/docs/assets/css/todc-bootstrap.css b/docs/assets/css/todc-bootstrap.css
@@ -1612,10 +1612,10 @@ select:focus:required:invalid:focus {
   background-color: #000000 \9;
 }
 .navbar-googlebar .brand {
-  padding: 13px 20px 13px;
+  padding: 12px 20px 12px;
 }
 .navbar-googlebar .navbar-text {
-  line-height: 46px;
+  line-height: 44px;
 }
 .navbar-googlebar .divider-vertical {
   height: 34px;
@@ -1631,15 +1631,15 @@ select:focus:required:invalid:focus {
 .navbar-googlebar .navbar-form select,
 .navbar-googlebar .navbar-form .radio,
 .navbar-googlebar .navbar-form .checkbox {
-  margin-top: 8px;
+  margin-top: 7px;
   padding: 4px 8px;
 }
 .navbar-googlebar .navbar-form .btn,
 .navbar-googlebar .navbar-form .btn-group {
-  margin-top: 8px;
+  margin-top: 7px;
 }
 .navbar-googlebar .navbar-search {
-  margin-top: 8px;
+  margin-top: 7px;
 }
 .navbar-googlebar .navbar-search .search-query {
   padding: 4px 14px;
@@ -1651,10 +1651,7 @@ select:focus:required:invalid:focus {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  min-height: 46px;
+  min-height: 44px;
   margin: 0px;
   color: #999999;
   background-color: #f1f1f1;
@@ -1672,7 +1669,7 @@ select:focus:required:invalid:focus {
   z-index: 1029;
 }
 .navbar-googlebar .nav {
-  margin-top: 6px;
+  margin-top: 5px;
 }
 .navbar-googlebar .nav > li > a {
   float: none;
@@ -1710,7 +1707,7 @@ select:focus:required:invalid:focus {
 }
 .navbar-googlebar .btn-navbar {
   padding: 4px 10px 7px;
-  margin-top: 10px;
+  margin-top: 9px;
   background-color: #f3f3f3;
   background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f1f1f1));
@@ -1861,11 +1858,11 @@ select:focus:required:invalid:focus {
   text-shadow: none;
 }
 .navbar-googlenav .navbar-text {
-  margin-top: -1px;
-  line-height: 38px;
+  margin-top: 0px;
+  line-height: 36px;
 }
 .navbar-googlenav .divider-vertical {
-  height: 36px;
+  height: 34px;
   margin: 0 9px;
   border-right: 1px solid #ffffff;
   border-left: 1px solid #f2f2f2;
@@ -1880,10 +1877,6 @@ select:focus:required:invalid:focus {
 .navbar-googlenav .btn {
   padding: 4px 12px;
 }
-.navbar-googlenav .btn [class^="icon-"],
-.navbar-googlenav .btn [class*=" icon-"] {
-  margin-top: -1px;
-}
 .navbar-googlenav .btn,
 .navbar-googlenav .btn-small,
 .navbar-googlenav .btn-group > .btn,
@@ -1922,10 +1915,7 @@ select:focus:required:invalid:focus {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  min-height: 38px;
+  min-height: 36px;
   margin: 0px;
   color: #999999;
   background-color: #ffffff;
@@ -1942,21 +1932,16 @@ select:focus:required:invalid:focus {
 .navbar-googlenav.navbar-fixed-bottom {
   z-index: 1028;
 }
-.navbar-googlenav.navbar-fixed-top .nav > li > a,
-.navbar-googlenav.navbar-fixed-bottom .nav > li > a,
-.navbar-googlenav.navbar-static-top .nav > li > a {
-  padding: 9px 15px 8px;
-}
 .navbar-googlenav.navbar-fixed-top .divider-vertical,
 .navbar-googlenav.navbar-fixed-bottom .divider-vertical,
 .navbar-googlenav.navbar-static-top .divider-vertical {
-  height: 37px;
+  height: 35px;
 }
 .navbar-googlenav .nav > li {
   position: relative;
 }
 .navbar-googlenav .nav > li > a {
-  padding: 9px 15px 7px;
+  padding: 8px 15px 8px;
   color: #777777;
   text-shadow: none;
 }
@@ -2009,7 +1994,7 @@ select:focus:required:invalid:focus {
 }
 .navbar-googlenav .btn-navbar {
   padding: 4px 10px 7px;
-  margin-top: 6px;
+  margin-top: 5px;
   background-color: #f3f3f3;
   background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f1f1f1));

diff --git a/less/navbar.less b/less/navbar.less
@@ -195,7 +195,6 @@
   .navbar-inner {
     .border-radius(@baseBorderRadius);
     .box-shadow(none);
-    .box-sizing(border-box);
     min-height: @navbarGoogleBarHeight;
     margin: 0px;
     color: @navbarText;
@@ -372,7 +371,7 @@
   .brand,
   .brand .btn {
     // Vertically center the text given @navbarHeight
-    padding: (((@navbarGoogleNavHeight - @baseLineHeight) / 2) - 1) 20px (((@navbarGoogleNavHeight - @baseLineHeight) / 2) - 1);
+    padding: ((@navbarGoogleNavHeight - @baseLineHeight) / 2) 20px ((@navbarGoogleNavHeight - @baseLineHeight) / 2);
     font-size: 16px;
     font-weight: bold;
     color: @navbarGoogleNavBrandColor;
@@ -382,7 +381,7 @@
   // Plain text in topbar
   // -------------------------
   .navbar-text {
-    .navbarVerticalAlign(@navbarGoogleNavHeight + 2, @navbarGoogleNavHeight); // Vertically center in navbar
+    .navbarVerticalAlign(@navbarGoogleNavHeight, @navbarGoogleNavHeight); // Vertically center in navbar
     line-height: @navbarGoogleNavHeight;
   }
 
@@ -404,15 +403,11 @@
   // -------------------------
   .btn,
   .btn-group {
-    .navbarVerticalAlign(32px, @navbarGoogleNavHeight); // Vertically center in navbar
+    .navbarVerticalAlign(30px, @navbarGoogleNavHeight); // Vertically center in navbar
   }
   .btn {
     padding: 4px 12px; // FIXME: This is probably not necessary for the btn-group;
   }
-  .btn [class^="icon-"],
-  .btn [class*=" icon-"] {
-    margin-top: -1px;
-  }
 
   .btn,
   .btn-small,
@@ -438,19 +433,19 @@
     select,
     .radio,
     .checkbox {
-      .navbarVerticalAlign(32px, @navbarGoogleNavHeight); // Vertically center in navbar
+      .navbarVerticalAlign(30px, @navbarGoogleNavHeight); // Vertically center in navbar
       padding: 4px 8px;
     }
     .btn,
     .btn-group {
-      .navbarVerticalAlign(32px, @navbarGoogleNavHeight); // Vertically center in navbar
+      .navbarVerticalAlign(30px, @navbarGoogleNavHeight); // Vertically center in navbar
     }
   }
 
   // Navbar search
   // -------------------------
   .navbar-search {
-    .navbarVerticalAlign(32px, @navbarGoogleNavHeight); // Vertically center in navbar
+    .navbarVerticalAlign(30px, @navbarGoogleNavHeight); // Vertically center in navbar
     .search-query {
       padding: 4px 14px;
     }
@@ -461,7 +456,6 @@
   .navbar-inner {
     .border-radius(@baseBorderRadius);
     .box-shadow(none);
-    .box-sizing(border-box);
     min-height: @navbarGoogleNavHeight;
     margin: 0px;
     color: @navbarText;
@@ -483,7 +477,7 @@
   &.navbar-fixed-bottom,
   &.navbar-static-top {
     .nav > li > a {
-      padding: ((@navbarGoogleNavHeight - @baseLineHeight) / 2) 15px (((@navbarGoogleNavHeight - @baseLineHeight) / 2) - 1);
+      // padding: ((@navbarGoogleNavHeight - @baseLineHeight) / 2) 15px (((@navbarGoogleNavHeight - @baseLineHeight) / 2) - 1);
     }
 
     // Dividers in navbar
@@ -503,7 +497,7 @@
   // Links
   .nav > li > a {
     // padding: 9px 15px 8px;
-    padding: (floor((@navbarGoogleNavHeight - @baseLineHeight) / 2)) 15px (((@navbarGoogleNavHeight - @baseLineHeight) / 2) - 2);
+    padding: (floor((@navbarGoogleNavHeight - @baseLineHeight) / 2)) 15px (((@navbarGoogleNavHeight - @baseLineHeight) / 2));
     color: @navbarGoogleNavLinkColor;
     text-shadow: none;
   }

diff --git a/less/variables.less b/less/variables.less
@@ -222,7 +222,7 @@
 @navbarGoogleBarCollapseWidth:             979px;
 @navbarGoogleBarCollapseDesktopWidth:      @navbarGoogleBarCollapseWidth + 1;
 
-@navbarGoogleBarHeight:                    46px; // 77px for Google Developer. 46px for Google news. 50px for youtube
+@navbarGoogleBarHeight:                    44px; // 75px for Google Developer. 44px for Google news. 48px for youtube
 @navbarGoogleBarBackground:                #f1f1f1;
 // @navbarGoogleBarBackgroundHighlight:       darken(@navbarGoogleBarBackground, 4.7%);
 @navbarGoogleBarBackgroundHighlight:       lighten(@navbarGoogleBarBackground, 1.5%);
@@ -261,7 +261,7 @@
 @navbarGoogleNavCollapseWidth:             979px;
 @navbarGoogleNavCollapseDesktopWidth:      @navbarGoogleNavCollapseWidth + 1;
 
-@navbarGoogleNavHeight:                    38px; // 39px for Google developer. 41px for Google.com. 44px for Google news
+@navbarGoogleNavHeight:                    36px; // 37px for Google developer. 39px for Google.com. 42px for Google news
 @navbarGoogleNavBackground:                #fff;
 // @navbarGoogleNavBackground:                @navbarGoogleBarBackground;
 // @navbarGoogleNavBackgroundHighlight:       #fafafa;