introduce new mixin to do navbar vertical centering

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index f4a9241da889be7fac77637ef2d5d5a123462979..acc5f3201e9c2b0533c965bed0547fc4fa915175 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1d12c816fd1c4799a3b33aae7777467cb1b33f02..86914d83d393acde8812b91aa7d0616a017b65ce 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2559,14 +2559,16 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
 .navbar-form:after {
   clear: both;
 }
+.navbar-form input,
+.navbar-form select,
+.navbar-form .radio,
+.navbar-form .checkbox {
+  margin-top: 5px;
+}
 .navbar-form input, .navbar-form select {
   display: inline-block;
-  margin-top: 5px;
   margin-bottom: 0;
 }
-.navbar-form .radio, .navbar-form .checkbox {
-  margin-top: 5px;
-}
 .navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
   margin-top: 3px;
 }

diff --git a/less/mixins.less b/less/mixins.less
index e05667fff25a1905c3653644488aaa30ced40c3c..d74ce73dfa1b95708322fdf8a42ea10087f3b291 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -531,7 +531,7 @@
 // COMPONENT MIXINS
 // --------------------------------------------------
 
-// NAV DIVIDER
+// Horizontal dividers
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider() {
@@ -549,7 +549,7 @@
   *margin: -5px 0 5px;
 }
 
-// BUTTON BACKGROUNDS
+// Button backgrounds
 // ------------------
 .buttonBackground(@startColor, @endColor) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
@@ -568,7 +568,15 @@
   }
 }
 
-// POPOVER ARROWS
+// Navbar vertical align
+// -------------------------
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+.navbarVerticalAlign(@elementHeight) {
+  margin-top: (@navbarHeight - @elementHeight) / 2;
+}
+
+// Popover arrows
 // -------------------------
 // For tipsies and popovers
 #popoverArrow {

diff --git a/less/navbar.less b/less/navbar.less
index 62cde1bd17ca0855d6a0d7c65a1d5cef9970afcf..87f260699e47492e4610266ad60720052be9eb2a 100644 (file)
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -74,7 +74,7 @@
   // Buttons in navbar
   .btn,
   .btn-group {
-    margin-top: 5px; // make buttons vertically centered in navbar
+    .navbarVerticalAlign(30px); // Vertically center in navbar
   }
   .btn-group .btn {
     margin-top: 0; // then undo the margin here so we don't accidentally double it
@@ -86,15 +86,16 @@
   margin-bottom: 0; // remove default bottom margin
   .clearfix();
   input,
+  select,
+  .radio,
+  .checkbox {
+    .navbarVerticalAlign(30px); // Vertically center in navbar
+  }
+  input,
   select {
     display: inline-block;
-    margin-top: 5px;
     margin-bottom: 0;
   }
-  .radio,
-  .checkbox {
-    margin-top: 5px;
-  }
   input[type="image"],
   input[type="checkbox"],
   input[type="radio"] {
@@ -114,7 +115,7 @@
 .navbar-search {
   position: relative;
   float: left;
-  margin-top: 6px;
+  .navbarVerticalAlign(28px); // Vertically center in navbar
   margin-bottom: 0;
   .search-query {
     padding: 4px 9px;