rewrite navbar bits some more

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index dd3a620f1eed59c19efefb4b550fab0ad48c892a..5cdf15803c56d3a216db930e7755414f6ace3e4b 100644 (file)
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -4,41 +4,37 @@ title: Navbar
 group: components
 ---
 
-The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.
+The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
 
 ## Contents
 
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-### Basics
+## Basics
 
 Here's what you need to know before getting started with the navbar:
 
-- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
+- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
 - When using multiple components in a navbar, some [alignment classes](#alignment) are required.
 - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
+- Use `.pull-left` and `.pull-right` to quickly align sub-components.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 
-### Branding
+## Supported content
 
-Name your company, product, or project with `.navbar-brand`.
+Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
 
-{% example html %}
-<nav class="navbar navbar-default">
-  <h3 class="navbar-brand">
-    <a href="#">Navbar</a>
-  </h3>
-</nav>
-{% endexample %}
+- `.navbar-brand` for your company, product, or project name
+- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
+- `.navbar-form` for vertically centering default-sized inputs and buttons.
 
-### Navigation
-
-Use `.nav-pills` within a navbar for basic navigation.
+Here's an example of all the sub-components included in a default, light navbar:
 
 {% example html %}
 <nav class="navbar navbar-default">
-  <ul class="nav nav-pills">
+  <a class="navbar-brand" href="#">Navbar</a>
+  <ul class="nav navbar-nav">
     <li class="nav-item active">
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     </li>
@@ -52,90 +48,21 @@ Use `.nav-pills` within a navbar for basic navigation.
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-</nav>
-{% endexample %}
-
-### Inline forms
-
-Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <form class="form-inline">
+  <form class="form-inline navbar-form pull-right">
     <input class="form-control" type="text" placeholder="Search">
-    <button class="btn btn-primary" type="submit">Search</button>
+    <button class="btn btn-success-outline" type="submit">Search</button>
   </form>
 </nav>
 {% endexample %}
 
-### Containers
-
-Although it's not required, you can wrap a navbar in a `.container` to center it on a page, or add one within to only center the contents of the navbar.
-
-{% example html %}
-<div class="container">
-  <nav class="navbar navbar-default">
-    <h3 class="navbar-brand">
-      <a href="#">Navbar</a>
-    </h3>
-  </nav>
-</div>
-{% endexample %}
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <div class="container">
-    <h3 class="navbar-brand">
-      <a href="#">Navbar</a>
-    </h3>
-  </div>
-</nav>
-{% endexample %}
-
-### Alignment
-
-Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
-
-{% example html %}
-<nav class="navbar navbar-default">
-  <h3 class="navbar-brand pull-left">
-    <a href="#">Navbar</a>
-  </h3>
-  <ul class="nav nav-pills 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>
-  <ul class="nav nav-pills pull-right">
-    <li class="nav-item">
-      <a class="nav-link" href="#">Help</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#">Sign out</a>
-    </li>
-  </ul>
-</nav>
-{% endexample %}
-
-### Inverse color scheme
+## Inverse theme
 
-Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
+When you want a darker navbar with light text colors, replace the `.navbar-default` with `.navbar-inverse`.
 
 {% example html %}
 <nav class="navbar navbar-inverse">
-  <h3 class="navbar-brand pull-left">
-    <a href="#">Navbar</a>
-  </h3>
-  <ul class="nav nav-pills pull-left">
+  <a class="navbar-brand" href="#">Navbar</a>
+  <ul class="nav navbar-nav">
     <li class="nav-item active">
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
     </li>
@@ -149,80 +76,34 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
       <a class="nav-link" href="#">About</a>
     </li>
   </ul>
-  <form class="form-inline pull-right">
+  <form class="form-inline navbar-form pull-right">
     <input class="form-control" type="text" placeholder="Search">
-    <button class="btn btn-primary" type="submit">Search</button>
+    <button class="btn btn-success-outline" type="submit">Search</button>
   </form>
 </nav>
 {% endexample %}
 
-### Small navbar
+## Containers
 
-Small 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.
+Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
 
-When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
-
-<div class="bd-example">
-  <nav class="navbar navbar-default navbar-sm">
-    <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-sm">
-    <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>
+{% example html %}
+<div class="container">
+  <nav class="navbar navbar-default">
+    <a class="navbar-brand" href="#">Navbar</a>
   </nav>
 </div>
+{% endexample %}
 
-{% highlight html %}
-<nav class="navbar navbar-default navbar-sm">
-  <!-- Navbar contents -->
-</nav>
-
-<nav class="navbar navbar-inverse navbar-sm">
-  <!-- Navbar contents -->
+{% example html %}
+<nav class="navbar navbar-default">
+  <div class="container">
+    <a class="navbar-brand" href="#">Navbar</a>
+  </div>
 </nav>
-{% endhighlight %}
+{% endexample %}
 
-### Collapsible content
+## Collapsible content
 
 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
 
@@ -230,7 +111,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 <div class="collapse" id="exCollapsingNavbar">
   <div class="inverse p-a">
     <h4>Collapsed content</h4>
-    <p>Toggleable via the navbar brand.</p>
+    <span class="text-muted">Toggleable via the navbar brand.</span>
   </div>
 </div>
 <nav class="navbar navbar-default">
@@ -248,8 +129,21 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
     &#9776;
   </button>
   <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
-    <h4>Collapsed on xs devices</h4>
-    <p>Toggleable via the navbar brand.</p>
+    <a class="navbar-brand" href="#">Responsive navbar</a>
+    <ul class="nav navbar-nav">
+      <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>
   </div>
 </nav>
 {% endexample %}

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 965454f7f44079ec774376976c888ec6fc17656b..b1cdb0ea5dba40fa1b2d24291b49b3ebddfa8279 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -5,8 +5,6 @@
 
 .navbar {
   position: relative;
-  padding: $spacer;
-  margin-bottom: $navbar-margin-bottom;
   @include clearfix;
 
   @include media-breakpoint-up(sm) {
@@ -15,7 +13,6 @@
 }
 
 
-//
 // Navbar alignment options
 //
 // Display the navbar across the entirety of the page or fixed it to the top or
@@ -66,20 +63,20 @@
 }
 
 
+//
 // Brand/project name
+//
 
 .navbar-brand {
   float: left;
-  padding: .625rem .75rem;
-  margin-right: $spacer;
-  margin-bottom: 0; // For headings
+  padding: .95rem 1rem;
   font-size: $font-size-lg;
   line-height: 1;
+  color: $navbar-default-brand-color;
 
-  > a {
-    @include hover-focus {
-      text-decoration: none;
-    }
+  @include hover-focus {
+    color: $navbar-default-brand-hover-color;
+    text-decoration: none;
   }
 
   > img {
@@ -94,13 +91,15 @@
 // Bootstrap JavaScript plugin.
 
 .navbar-toggler {
-  padding: .55rem .75rem;
-  margin-right: $spacer;
-  margin-bottom: 0; // For headings
+  padding: .5rem .75rem;
+  margin-top: .375rem;
+  margin-bottom: .375rem;
   font-size: $font-size-lg;
   line-height: 1;
+  color: $navbar-default-link-color;
   background: none;
-  border: 0;
+  border: $border-width solid transparent;
+  @include border-radius($btn-border-radius);
 
   @include hover-focus {
     text-decoration: none;
@@ -122,37 +121,9 @@
 }
 
 
-// Dropdown menus
-
-// Menu position and menu carets
-.navbar-nav > li > .dropdown-menu {
-  margin-top: 0;
-  @include border-top-radius(0);
-}
-// Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
-  @include border-top-radius($navbar-border-radius);
-  @include border-bottom-radius(0);
-}
-
-
-// Small navbar
+// Navigation
 //
-// Condensed dimensions for an aesthetic closer to v3's navbar.
-
-.navbar-sm {
-  padding-top: 0;
-  padding-bottom: 0;
-
-  .navbar-brand {
-    padding-top: .95rem;
-    padding-bottom: .95rem;
-  }
-
-  .form-inline {
-    margin-top: .6rem;
-  }
-}
+// Custom navbar navigation built on the base `.nav` styles.
 
 .navbar-nav {
   .nav-item {
@@ -161,9 +132,14 @@
 
   .nav-link {
     display: block;
-    padding-top: .95rem;
-    padding-bottom: .95rem;
+    padding: .95rem .75rem;
     line-height: 1.25; // Match the `.navbar-brand`
+    color: $navbar-default-link-color;
+
+    @include hover-focus {
+      color: $navbar-default-link-hover-color;
+      background-color: $navbar-default-link-hover-bg;
+    }
   }
 
   .open > .nav-link,
@@ -179,8 +155,20 @@
 }
 
 
+// Forms
+//
+// Additional modifier class to add to `.form-inline` to vertically center forms.
+
+.navbar-form {
+  margin-top: .375rem;
+  margin-bottom: .375rem;
+  margin-right: 1rem;
+}
+
+
+//
 // Alternate navbars
-// --------------------------------------------------
+//
 
 // todo: audit these styles
 
@@ -205,29 +193,9 @@
   background-color: $navbar-inverse-bg;
   border-color: $navbar-inverse-border;
 
-  .navbar-toggler,
-  .navbar-brand > a,
-  .nav-pills > .nav-item > .nav-link {
-    color: $navbar-inverse-link-color;
-
-    @include hover-focus {
-      color: $navbar-inverse-link-hover-color;
-    }
-  }
-  .nav-pills > .nav-item > .nav-link {
-    @include hover-focus {
-      color: $navbar-inverse-link-active-color;
-      background-color: $navbar-inverse-link-active-bg;
-    }
-  }
-  .nav-pills > .active > .nav-link,
-  .nav-pills > .nav-link.active {
-    color: $navbar-inverse-link-active-color;
-    background-color: $navbar-inverse-link-active-bg;
-  }
-
   .navbar-brand {
     color: $navbar-inverse-brand-color;
+
     @include hover-focus {
       color: $navbar-inverse-brand-hover-color;
       background-color: $navbar-inverse-brand-hover-bg;
@@ -235,64 +203,27 @@
   }
 
   .navbar-nav {
-    .navbar-link {
+    .nav-link {
       color: $navbar-inverse-link-color;
 
       @include hover-focus {
         color: $navbar-inverse-link-hover-color;
         background-color: $navbar-inverse-link-hover-bg;
       }
+    }
 
-      &.active > a {
-        @include plain-hover-focus {
-          color: $navbar-inverse-link-active-color;
-          background-color: $navbar-inverse-link-active-bg;
-        }
-      }
-
-      &.disabled > a {
-        @include plain-hover-focus {
-          color: $navbar-inverse-link-disabled-color;
-          background-color: $navbar-inverse-link-disabled-bg;
-        }
+    .open > .nav-link,
+    .active > .nav-link,
+    .nav-link.open,
+    .nav-link.active {
+      @include plain-hover-focus {
+        color: $navbar-inverse-link-active-color;
+        background-color: $navbar-inverse-link-active-bg;
       }
     }
   }
 
-  // .navbar-collapse,
-  // .navbar-form {
-  //   border-color: darken($navbar-inverse-bg, 7%);
-  // }
-  //
-  // // Dropdowns
-  // .navbar-nav {
-  //   > .open > a {
-  //     @include plain-hover-focus {
-  //       color: $navbar-inverse-link-active-color;
-  //       background-color: $navbar-inverse-link-active-bg;
-  //     }
-  //   }
-  // }
-
-  // .navbar-link {
-  //   color: $navbar-inverse-link-color;
-  //   @include hover {
-  //     color: $navbar-inverse-link-hover-color;
-  //   }
-  // }
-  //
-  // .btn-link {
-  //   color: $navbar-inverse-link-color;
-  //
-  //   @include hover-focus {
-  //     color: $navbar-inverse-link-hover-color;
-  //   }
-  //
-  //   &:disabled,
-  //   fieldset[disabled] & {
-  //     @include hover-focus {
-  //       color: $navbar-inverse-link-disabled-color;
-  //     }
-  //   }
-  // }
+  .navbar-toggler {
+    color: $navbar-inverse-link-color;
+  }
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 1fabda4890c6c314fc14abc48cecbb00797c31e4..7c8b3372185378dbb323236613ffad1dcec771b2 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -350,15 +350,15 @@ $navbar-default-bg:                #f8f8f8 !default;
 $navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
 
 $navbar-default-link-color:                #777 !default;
-$navbar-default-link-hover-color:          #333 !default;
+$navbar-default-link-hover-color:          #555 !default;
 $navbar-default-link-hover-bg:             transparent !default;
-$navbar-default-link-active-color:         #555 !default;
-$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-active-color:         #333 !default;
+$navbar-default-link-active-bg:            darken($navbar-default-bg, 5%) !default;
 $navbar-default-link-disabled-color:       #ccc !default;
 $navbar-default-link-disabled-bg:          transparent !default;
 
 $navbar-default-brand-color:               $navbar-default-link-color !default;
-$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-color:         $navbar-default-link-hover-color !default;
 $navbar-default-brand-hover-bg:            transparent !default;
 
 $navbar-default-toggle-hover-bg:           #ddd !default;
@@ -390,7 +390,7 @@ $navbar-inverse-toggle-border-color:        #333 !default;
 
 // Navs
 
-$nav-link-padding:                          .75em 1em !default;
+$nav-link-padding:                          .5em 1em !default;
 $nav-link-hover-bg:                         $gray-lighter !default;
 
 $nav-disabled-link-color:                   $gray-light !default;