New form control sizing, new navbar condensed variation, update nav and navbar spacing

docs/_data/nav.yml

@@ -10,6 +10,7 @@
     - title: Contents
     - title: JavaScript
     - title: Compiling
+    - title: Customize
     - title: Support
     # - title: Third party support
     - title: Accessibility

docs/assets/scss/_component-examples.scss

@@ -51,6 +51,7 @@
 
   > .nav + .nav,
   > .alert + .alert,
+  > .navbar + .navbar,
   > .progress + .progress {
     margin-top: 1rem;
   }

docs/components/navbar.md

@@ -150,6 +150,61 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
 </nav>
 {% endexample %}
 
+### Condensed
+
+Condensed navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
+
+{% example html %}
+<nav class="navbar navbar-default navbar-condensed">
+  <h3 class="navbar-brand pull-left">
+    <a href="#">Navbar</a>
+  </h3>
+  <ul class="nav navbar-nav pull-left">
+    <li class="nav-item active">
+      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Features</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Pricing</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">About</a>
+    </li>
+  </ul>
+  <form class="form-inline pull-right">
+    <input class="form-control form-control-sm" type="text" placeholder="Search">
+    <button class="btn btn-sm btn-primary" type="submit">Search</button>
+  </form>
+</nav>
+
+<nav class="navbar navbar-inverse navbar-condensed">
+  <h3 class="navbar-brand pull-left">
+    <a href="#">Navbar</a>
+  </h3>
+  <ul class="nav navbar-nav pull-left">
+    <li class="nav-item active">
+      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Features</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Pricing</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">About</a>
+    </li>
+  </ul>
+  <form class="form-inline pull-right">
+    <input class="form-control form-control-sm" type="text" placeholder="Search">
+    <button class="btn btn-sm btn-primary" type="submit">Search</button>
+  </form>
+</nav>
+{% endexample %}
+
+
 ### Collapsible content
 
 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.

docs/dist/css/bootstrap.css

@@ -1802,7 +1802,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
   padding-left: 0;
 }
 
-.input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
+.form-control-sm {
   height: 2rem;
   padding: .3rem .75rem;
   font-size: .85rem;
@@ -1810,38 +1810,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
   border-radius: .2rem;
 }
 
-select.input-sm, .input-group-sm > select.form-control, .input-group-sm > select.input-group-addon, .input-group-sm > .input-group-btn > select.btn {
-  height: 2rem;
-  line-height: 2rem;
-}
-
-textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > textarea.input-group-addon, .input-group-sm > .input-group-btn > textarea.btn, select[multiple].input-sm, .input-group-sm > select[multiple].form-control, .input-group-sm > select[multiple].input-group-addon, .input-group-sm > .input-group-btn > select[multiple].btn {
-  height: auto;
-}
-
-.form-group-sm .form-control {
-  height: 2rem;
-  padding: .3rem .75rem;
-  font-size: .85rem;
-  line-height: 1.5;
-  border-radius: .2rem;
-}
-.form-group-sm select.form-control {
-  height: 2rem;
-  line-height: 2rem;
-}
-.form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control {
-  height: auto;
-}
-.form-group-sm .form-control-static {
-  height: 2rem;
-  min-height: 1.85rem;
-  padding: .3rem .75rem;
-  font-size: .85rem;
-  line-height: 1.5;
-}
-
-.input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
+.form-control-lg {
   height: 3.291667rem;
   padding: .75rem 1.5rem;
   font-size: 1.25rem;
@@ -1849,37 +1818,6 @@ textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > te
   border-radius: .3rem;
 }
 
-select.input-lg, .input-group-lg > select.form-control, .input-group-lg > select.input-group-addon, .input-group-lg > .input-group-btn > select.btn {
-  height: 3.291667rem;
-  line-height: 3.291667rem;
-}
-
-textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > textarea.input-group-addon, .input-group-lg > .input-group-btn > textarea.btn, select[multiple].input-lg, .input-group-lg > select[multiple].form-control, .input-group-lg > select[multiple].input-group-addon, .input-group-lg > .input-group-btn > select[multiple].btn {
-  height: auto;
-}
-
-.form-group-lg .form-control {
-  height: 3.291667rem;
-  padding: .75rem 1.5rem;
-  font-size: 1.25rem;
-  line-height: 1.333333;
-  border-radius: .3rem;
-}
-.form-group-lg select.form-control {
-  height: 3.291667rem;
-  line-height: 3.291667rem;
-}
-.form-group-lg textarea.form-control, .form-group-lg select[multiple].form-control {
-  height: auto;
-}
-.form-group-lg .form-control-static {
-  height: 3.291667rem;
-  min-height: 2.25rem;
-  padding: .75rem 1.5rem;
-  font-size: 1.25rem;
-  line-height: 1.333333;
-}
-
 .has-feedback {
   position: relative;
 }
@@ -3015,7 +2953,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 .nav-link {
   display: inline-block;
   padding: .6em 1em;
-  line-height: 1.5;
+  line-height: 1;
 }
 .nav-link:focus, .nav-link:hover {
   text-decoration: none;
@@ -3160,7 +3098,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 
 .navbar-brand {
   float: left;
-  padding: .725rem .75rem;
+  padding: .95rem .75rem;
   margin-right: 1rem;
   margin-bottom: 0;
   font-size: 1.25rem;
@@ -3236,25 +3174,27 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
   border-bottom-left-radius: 0;
 }
 
-@media (min-width: 34em) {
-  .navbar-text {
-    float: left;
-    margin-right: 1rem;
-    margin-left: 1rem;
-  }
+.navbar-condensed {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.navbar-condensed .form-inline, .navbar-condensed .navbar-form {
+  margin-top: .6rem;
 }
 
-@media (min-width: 34em) {
-  .navbar-left {
-    float: left !important;
-  }
-  .navbar-right {
-    float: right !important;
-    margin-right: -1rem;
-  }
-  .navbar-right ~ .navbar-right {
-    margin-right: 0;
-  }
+.navbar-nav .nav-item {
+  float: left;
+}
+.navbar-nav .nav-link {
+  display: block;
+  padding-top: .95rem;
+  padding-bottom: .95rem;
+  line-height: 1.25;
+}
+.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:focus, .navbar-nav .open > .nav-link:hover, .navbar-nav .active > .nav-link, .navbar-nav .active > .nav-link:focus, .navbar-nav .active > .nav-link:hover, .navbar-nav .nav-link.open, .navbar-nav .nav-link.open:focus, .navbar-nav .nav-link.open:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.active:focus, .navbar-nav .nav-link.active:hover {
+  color: #555;
+  cursor: default;
+  background-color: #e7e7e7;
 }
 
 .navbar-default {
@@ -3268,55 +3208,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
   color: #5e5e5e;
   background-color: transparent;
 }
-.navbar-default .navbar-text {
-  color: #777;
-}
-.navbar-default .navbar-nav > li > a {
-  color: #777;
-}
-.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
-  color: #333;
-  background-color: transparent;
-}
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
-  color: #555;
-  background-color: #e7e7e7;
-}
-.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:focus, .navbar-default .navbar-nav > .disabled > a:hover {
-  color: #ccc;
-  background-color: transparent;
-}
-.navbar-default .navbar-toggle {
-  border-color: #ddd;
-}
-.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
-  background-color: #ddd;
-}
-.navbar-default .navbar-toggle .icon-bar {
-  background-color: #888;
-}
-.navbar-default .navbar-collapse, .navbar-default .navbar-form {
-  border-color: #e7e7e7;
-}
-.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
-  color: #555;
-  background-color: #e7e7e7;
-}
-.navbar-default .navbar-link {
-  color: #777;
-}
-.navbar-default .navbar-link:hover {
-  color: #333;
-}
-.navbar-default .btn-link {
-  color: #777;
-}
-.navbar-default .btn-link:focus, .navbar-default .btn-link:hover {
-  color: #333;
-}
-.navbar-default .btn-link:disabled:focus, .navbar-default .btn-link:disabled:hover, fieldset[disabled] .navbar-default .btn-link:focus, fieldset[disabled] .navbar-default .btn-link:hover {
-  color: #ccc;
-}
 
 .navbar-inverse {
   background-color: #373a3c;