More navbar derping

8 files changed, 188 insertions, 120 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e73506ac1..70eaace26 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -949,10 +949,9 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  display: block;
+  display: inline-block;
   min-height: 34px;
   padding: 6px 9px;
-  margin-bottom: 10px;
   font-size: 14px;
   line-height: 20px;
   color: #555555;
@@ -2868,6 +2867,7 @@ button.close {
 .navbar {
   padding: 15px;
   background-color: #eeeeee;
+  border-radius: 4px;
 }
 
 .navbar:before,
@@ -2882,16 +2882,17 @@ button.close {
 
 .navbar .brand {
   display: inline-block;
-  padding: 7px 15px;
+  padding: 15px 15px;
   font-size: 18px;
   font-weight: bold;
-  line-height: 1;
+  line-height: 20px;
   color: #777777;
 }
 
 .navbar .brand:hover {
+  color: #5e5e5e;
   text-decoration: none;
-  background-color: #ddd;
+  background-color: transparent;
 }
 
 .btn-navbar {
@@ -2918,7 +2919,13 @@ button.close {
   margin-top: 15px;
 }
 
+.navbar .nav > li {
+  float: left;
+}
+
 .navbar .nav > li > a {
+  padding-top: 15px;
+  padding-bottom: 15px;
   line-height: 20px;
   color: #777777;
 }
@@ -2933,7 +2940,37 @@ button.close {
 .navbar .nav > .active > a:hover,
 .navbar .nav > .active > a:focus {
   color: #555555;
-  background-color: #e1e1e1;
+  background-color: #d5d5d5;
+}
+
+@media screen and (min-width: 992px) {
+  .navbar {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .navbar .brand {
+    float: left;
+    margin-left: -15px;
+  }
+  .navbar .nav {
+    margin-top: 0;
+  }
+  .navbar .nav:before,
+  .navbar .nav:after {
+    display: table;
+    content: " ";
+  }
+  .navbar .nav:after {
+    clear: both;
+  }
+  .navbar .btn-navbar {
+    display: none;
+  }
+  .nav-collapse.collapse {
+    float: left;
+    height: auto !important;
+    overflow: visible !important;
+  }
 }
 
 .navbar-inverse {
@@ -2969,6 +3006,40 @@ button.close {
   background-color: #444;
 }
 
+.navbar-static-top {
+  position: static;
+  border-radius: 0;
+}
+
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  border-radius: 0;
+}
+
+.navbar-fixed-top {
+  top: 0;
+}
+
+.navbar-fixed-bottom {
+  bottom: 0;
+}
+
+.navbar .divider-vertical {
+  height: 26px;
+  margin: 7px 9px;
+  border-right: 1px solid #fbfbfb;
+  border-left: 1px solid #e1e1e1;
+}
+
+.navbar-form {
+  margin-top: 9px;
+  margin-bottom: 9px;
+}
+
 /*
 
 // COMMON STYLES
@@ -4737,41 +4808,10 @@ a.badge:hover {
       }
     */
   
-    /* Required to make the collapsing navbar work on regular desktops */
-  
   }
   .container {
     max-width: 940px;
   }
-  .navbar {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .navbar .brand {
-    float: left;
-    padding-top: 11px;
-    padding-bottom: 11px;
-    margin-left: -15px;
-  }
-  .navbar .nav {
-    margin-top: 0;
-    overflow: hidden;
-  }
-  .navbar .nav > li {
-    float: left;
-  }
-  .navbar .nav > li > a {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-  .navbar .btn-navbar {
-    display: none;
-  }
-  .nav-collapse.collapse {
-    float: left;
-    height: auto !important;
-    overflow: visible !important;
-  }
 }
 
 @media screen and (min-width: 1200px) {
diff --git a/docs/components.html b/docs/components.html
index 17ea3a0d4..c1049747c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -859,33 +859,18 @@
           <div class="bs-docs-example">
             <div class="navbar">
               <form class="navbar-form pull-left">
-                <input type="text" class="span2">
+                <input type="text" style="width: 200px;">
                 <button type="submit" class="btn">Submit</button>
               </form>
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;form class="navbar-form pull-left"&gt;
-  &lt;input type="text" class="span2"&gt;
+&lt;form class="pull-left"&gt;
+  &lt;input type="text" style="width: 200px;"&gt;
   &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 </pre>
 
-          <h3>Search form</h3>
-          <p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <form class="navbar-search pull-left">
-                <input type="text" class="search-query" placeholder="Search">
-              </form>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;form class="navbar-search pull-left"&gt;
-  &lt;input type="text" class="search-query" placeholder="Search"&gt;
-&lt;/form&gt;
-</pre>
-
           <h3>Component alignment</h3>
           <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 10a7ab067..8ec40dcad 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -791,33 +791,18 @@
           <div class="bs-docs-example">
             <div class="navbar">
               <form class="navbar-form pull-left">
-                <input type="text" class="span2">
+                <input type="text" style="width: 200px;">
                 <button type="submit" class="btn">Submit</button>
               </form>
             </div>
           </div>{{! /example }}
 <pre class="prettyprint linenums">
-&lt;form class="navbar-form pull-left"&gt;
-  &lt;input type="text" class="span2"&gt;
+&lt;form class="pull-left"&gt;
+  &lt;input type="text" style="width: 200px;"&gt;
   &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 </pre>
 
-          <h3>Search form</h3>
-          <p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
-          <div class="bs-docs-example">
-            <div class="navbar">
-              <form class="navbar-search pull-left">
-                <input type="text" class="search-query" placeholder="Search">
-              </form>
-            </div>
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;form class="navbar-search pull-left"&gt;
-  &lt;input type="text" class="search-query" placeholder="Search"&gt;
-&lt;/form&gt;
-</pre>
-
           <h3>Component alignment</h3>
           <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 2fd0b8438..3150af677 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -91,38 +91,6 @@
     max-width: 940px;
   }
 
-  .navbar {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .navbar .brand {
-    float: left;
-    padding-top: 11px;
-    padding-bottom: 11px;
-    margin-left: -15px;
-  }
-  .navbar .nav {
-    overflow: hidden; /* clearfix */
-    margin-top: 0; /* undo top margin to make nav extend full height of navbar */
-  }
-  .navbar .nav > li {
-    float: left;
-  }
-  .navbar .nav > li > a {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  /* Required to make the collapsing navbar work on regular desktops */
-  .navbar .btn-navbar {
-    display: none;
-  }
-  .nav-collapse.collapse {
-    float: left;
-    height: auto !important;
-    overflow: visible !important;
-  }
-
 }
 
 // Responsive: Large desktops and up
diff --git a/less/forms.less b/less/forms.less
index 781218b44..0415f217e 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -55,11 +55,11 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  display: block;
+  display: inline-block;
   .box-sizing(border-box); // Makes inputs behave like true block-level elements
   min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: 6px 9px;
-  margin-bottom: @line-height-base / 2;
+  // margin-bottom: @line-height-base / 2;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @gray;
diff --git a/less/mixins.less b/less/mixins.less
index b53049554..f00ad6b8e 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -412,8 +412,9 @@
 // -------------------------
 // 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(@element-height) {
+.navbar-vertical-align(@element-height) {
   margin-top: (@navbar-height - @element-height) / 2;
+  margin-bottom: (@navbar-height - @element-height) / 2;
 }
 
 
diff --git a/less/navbar.less b/less/navbar.less
index 30d7050e8..4353e2a94 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -6,24 +6,31 @@
 .navbar {
   padding: 15px;
   background-color: @navbar-bg;
+  border-radius: @border-radius-base;
+  // Prevent floats from breaking the navbar
   .clear_float();
 }
 
 // Brand/project name
+// -------------------------
+
 .navbar .brand {
   display: inline-block;
-  padding: 7px 15px;
+  padding: ((@navbar-height - @line-height-base) / 2) 15px;
   font-size: 18px;
   font-weight: bold;
-  line-height: 1;
+  line-height: @line-height-base;
   color: @navbar-brand-color;
   &:hover {
+    color: @navbar-brand-color-hover;
     text-decoration: none;
-    background-color: #ddd;
+    background-color: @navbar-brand-bg-hover;
   }
 }
 
 // Responsive navbar button
+// -------------------------
+
 .btn-navbar {
   float: right;
   padding: 10px 12px;
@@ -44,12 +51,19 @@
   }
 }
 
-// Nav links
+// Navbar nav links
+// -------------------------
+
 .navbar {
   .nav {
     margin-top: 15px; // space out from .navbar .brand and .btn-navbar
   }
+  .nav > li {
+    float: left;
+  }
   .nav > li > a {
+    padding-top: (@navbar-height - @line-height-base) / 2;
+    padding-bottom: (@navbar-height - @line-height-base) / 2;
     color: @navbar-link-color;
     line-height: 20px;
   }
@@ -65,8 +79,36 @@
     background-color: @navbar-link-bg-active;
   }
 }
+@media screen and (min-width: 992px) {
+
+  .navbar {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .navbar .brand {
+    float: left;
+    margin-left: -15px;
+  }
+  .navbar .nav {
+    .clear_float();
+    margin-top: 0; // undo top margin to make nav extend full height of navbar
+  }
+
+  // Required to make the collapsing navbar work on regular desktops
+  .navbar .btn-navbar {
+    display: none;
+  }
+  .nav-collapse.collapse {
+    float: left;
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+}
 
 // Inverse navbar
+// -------------------------
+
 .navbar-inverse {
     background-color: @navbar-inverse-bg;
 
@@ -97,6 +139,45 @@
 
 
 
+//
+// Navbar alignment options
+// --------------------------------------------------
+
+// Static navbar
+.navbar-static-top {
+  position: static;
+  border-radius: 0;
+}
+
+// Fixed navbar
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: @zindex-navbar-fixed;
+  border-radius: 0;
+}
+.navbar-fixed-top    { top: 0; }
+.navbar-fixed-bottom { bottom: 0; }
+
+
+//
+// Navbar optional components
+// --------------------------------------------------
+
+// Dividers in navbar
+.navbar .divider-vertical {
+  height: 26px;
+  margin: 7px 9px;
+  border-left: 1px solid darken(@navbar-bg, 5%);
+  border-right: 1px solid lighten(@navbar-bg, 5%);
+}
+
+// Navbar form
+.navbar-form {
+  .navbar-vertical-align(32px); // Vertically center in navbar
+}
 
 /*
 
diff --git a/less/variables.less b/less/variables.less
index e5327f336..a7069ddb4 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -150,20 +150,28 @@
 // Navbar
 // -------------------------
 
-@navbar-collapse-width:            979px;
-@navbar-collapse-width-desktop:    @navbar-collapse-width + 1;
+// Responsive collapsing
+// @navbar-collapse-width:            979px;
+// @navbar-collapse-width-desktop:    @navbar-collapse-width + 1;
 
-@navbar-height:                    44px;
+// Basics of a navbar
+@navbar-height:                    50px;
+@navbar-text:                      #777;
 @navbar-bg:                        #eee;
 
-@navbar-text:                      #777;
+// Navbar brand label
+@navbar-brand-color:               @navbar-link-color;
+@navbar-brand-color-hover:         darken(@navbar-link-color, 10%);
+@navbar-brand-bg-hover:            transparent;
+
+// Navbar links
 @navbar-link-color:                #777;
-@navbar-link-color-hover:          @grayDark;
-@navbar-link-color-active:         @gray;
+@navbar-link-color-hover:          #333;
+@navbar-link-color-active:         #555;
 @navbar-link-bg-hover:             transparent;
-@navbar-link-bg-active:            darken(@navbar-bg, 5%);
+@navbar-link-bg-active:            darken(@navbar-bg, 10%);
+
 
-@navbar-brand-color:               @navbar-link-color;
 
 // Inverted navbar
 @navbar-inverse-bg:                         #222;