rewrite some navbar stuff, clean out some commented out code

2 files changed, 101 insertions, 173 deletions

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index f45ee5876..a1f8bae74 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -161,56 +161,65 @@ Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the p
 
 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.
 
-{% example html %}
+<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>
+  </nav>
+</div>
+
+{% highlight html %}
 <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>
+  <!-- Navbar contents -->
 </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>
+  <!-- Navbar contents -->
 </nav>
-{% endexample %}
-
+{% endhighlight %}
 
 ### Collapsible content
 
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 7a01e3c2c..32735c8e5 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -202,84 +202,6 @@
       background-color: $navbar-default-brand-hover-bg;
     }
   }
-
-  // .navbar-text {
-  //   color: $navbar-default-color;
-  // }
-
-  // .navbar-nav {
-  //   > li > a {
-  //     color: $navbar-default-link-color;
-
-  //     @include hover-focus {
-  //       color: $navbar-default-link-hover-color;
-  //       background-color: $navbar-default-link-hover-bg;
-  //     }
-  //   }
-  //   > .active > a {
-  //     @include plain-hover-focus {
-  //       color: $navbar-default-link-active-color;
-  //       background-color: $navbar-default-link-active-bg;
-  //     }
-  //   }
-  //   > .disabled > a {
-  //     @include plain-hover-focus {
-  //       color: $navbar-default-link-disabled-color;
-  //       background-color: $navbar-default-link-disabled-bg;
-  //     }
-  //   }
-  // }
-
-  // .navbar-toggle {
-  //   border-color: $navbar-default-toggle-border-color;
-  //   @include hover-focus {
-  //     background-color: $navbar-default-toggle-hover-bg;
-  //   }
-  //   .icon-bar {
-  //     background-color: $navbar-default-toggle-icon-bar-bg;
-  //   }
-  // }
-
-  // .navbar-collapse,
-  // .navbar-form {
-  //   border-color: $navbar-default-border;
-  // }
-
-  // // Dropdown menu items
-  // .navbar-nav {
-  //   // Remove background color from open dropdown
-  //   > .open > a {
-  //     @include plain-hover-focus {
-  //       color: $navbar-default-link-active-color;
-  //       background-color: $navbar-default-link-active-bg;
-  //     }
-  //   }
-  // }
-
-
-  // // Links in navbars
-  // //
-  // // Add a class to ensure links outside the navbar nav are colored correctly.
-
-  // .navbar-link {
-  //   color: $navbar-default-link-color;
-  //   @include hover {
-  //     color: $navbar-default-link-hover-color;
-  //   }
-  // }
-
-  // .btn-link {
-  //   color: $navbar-default-link-color;
-  //   @include hover-focus {
-  //     color: $navbar-default-link-hover-color;
-  //   }
-  //   &:disabled,
-  //   fieldset[disabled] & {
-  //     @include hover-focus {
-  //       color: $navbar-default-link-disabled-color;
-  //     }
-  //   }
-  // }
 }
 
 // Inverse navbar
@@ -309,7 +231,6 @@
     background-color: $navbar-inverse-link-active-bg;
   }
 
-
   .navbar-brand {
     color: $navbar-inverse-brand-color;
     @include hover-focus {
@@ -318,67 +239,65 @@
     }
   }
 
-  .navbar-text {
-    color: $navbar-inverse-color;
-  }
-
   .navbar-nav {
-    > li > a {
+    .navbar-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;
-      }
-    }
-  }
 
-  .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;
+      &.active > 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;
+      &.disabled > a {
+        @include plain-hover-focus {
+          color: $navbar-inverse-link-disabled-color;
+          background-color: $navbar-inverse-link-disabled-bg;
+        }
+      }
     }
   }
 
-  .btn-link {
-    color: $navbar-inverse-link-color;
-
-    @include hover-focus {
-      color: $navbar-inverse-link-hover-color;
-    }
+  // .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;
+  //     }
+  //   }
+  // }
 
-    &:disabled,
-    fieldset[disabled] & {
-      @include hover-focus {
-        color: $navbar-inverse-link-disabled-color;
-      }
-    }
-  }
+  // .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;
+  //     }
+  //   }
+  // }
 }