More navbar derping

5 files changed, 105 insertions, 47 deletions

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;