clean up docs for subnav

5 files changed, 76 insertions, 8 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e98f9357b..aae62efc6 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4301,6 +4301,48 @@ input[type="submit"].btn.btn-mini {
   color: #005580;
 }
 
+.navbar-subnav .btn-navbar {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #ededed;
+  *background-color: #e4e4e4;
+  background-image: -moz-linear-gradient(top, #f2f2f2, #e4e4e4);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e4e4e4));
+  background-image: -webkit-linear-gradient(top, #f2f2f2, #e4e4e4);
+  background-image: -o-linear-gradient(top, #f2f2f2, #e4e4e4);
+  background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
+  background-repeat: repeat-x;
+  border-color: #e4e4e4 #e4e4e4 #bebebe;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe4e4e4', GradientType=0);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.navbar-subnav .btn-navbar:hover,
+.navbar-subnav .btn-navbar:active,
+.navbar-subnav .btn-navbar.active,
+.navbar-subnav .btn-navbar.disabled,
+.navbar-subnav .btn-navbar[disabled] {
+  color: #ffffff;
+  background-color: #e4e4e4;
+  *background-color: #d7d7d7;
+}
+
+.navbar-subnav .btn-navbar:active,
+.navbar-subnav .btn-navbar.active {
+  background-color: #cbcbcb \9;
+}
+
+.navbar .btn-navbar .icon-bar {
+  background-color: #999;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+     -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
 .navbar-subnav-fixed {
   position: fixed;
   top: 40px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a0aca5282..148dc3f0c 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -570,6 +570,11 @@ h2 + .row {
   padding: 0;
   height: 90px;
 }
+.bs-navbar-top-example .navbar-fixed-top,
+.bs-navbar-bottom-example .navbar-fixed-bottom {
+  margin-left: 0;
+  margin-right: 0;
+}
 .bs-navbar-top-example {
   -webkit-border-radius: 0 0 4px 4px;
      -moz-border-radius: 0 0 4px 4px;
diff --git a/docs/components.html b/docs/components.html
index c144c130a..40cd2e19e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1228,19 +1228,19 @@
       <hr class="bs-docs-separator">
 
 
-      <h2>Responsive navbar</h2>
-      <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
+      <h2>Subnav variation</h2>
+      <p>Modify the look of the navbar by adding <code>.navbar-subnav</code>. Perfect for a secondary nav, or just a replacement to the default dark navbar.</p>
       <div class="bs-docs-example">
         <div class="navbar navbar-subnav" style="position: static;">
           <div class="navbar-inner">
             <div class="container">
-              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+              <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
               </a>
               <a class="brand" href="#">Title</a>
-              <div class="nav-collapse">
+              <div class="nav-collapse subnav-collapse">
                 <ul class="nav">
                   <li class="active"><a href="#">Home</a></li>
                   <li><a href="#">Link</a></li>
@@ -1280,6 +1280,11 @@
           </div><!-- /navbar-inner -->
         </div><!-- /navbar -->
       </div>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-subnav"&gt;
+  ...
+&lt;/div&gt;
+</pre>
 
     </section>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index b89257b1d..450433d3b 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1158,19 +1158,19 @@
       <hr class="bs-docs-separator">
 
 
-      <h2>{{_i}}Responsive navbar{{/i}}</h2>
-      <p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+      <h2>{{_i}}Subnav variation{{/i}}</h2>
+      <p>{{_i}}Modify the look of the navbar by adding <code>.navbar-subnav</code>. Perfect for a secondary nav, or just a replacement to the default dark navbar.{{/i}}</p>
       <div class="bs-docs-example">
         <div class="navbar navbar-subnav" style="position: static;">
           <div class="navbar-inner">
             <div class="container">
-              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+              <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
               </a>
               <a class="brand" href="#">{{_i}}Title{{/i}}</a>
-              <div class="nav-collapse">
+              <div class="nav-collapse subnav-collapse">
                 <ul class="nav">
                   <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
                   <li><a href="#">{{_i}}Link{{/i}}</a></li>
@@ -1210,6 +1210,11 @@
           </div><!-- /navbar-inner -->
         </div><!-- /navbar -->
       </div>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-subnav"&gt;
+  ...
+&lt;/div&gt;
+</pre>
 
     </section>
 
diff --git a/less/navbar.less b/less/navbar.less
index c58fd83d0..54c5079bd 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -439,6 +439,17 @@
   color: @linkColorHover;
 }
 
+// Collapse button
+.navbar-subnav .btn-navbar {
+  .buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%));
+  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)");
+}
+.navbar .btn-navbar .icon-bar {
+  background-color: #999;
+  .box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+
+
 // Fixed subnav on scroll, but only for 980px and up (sorry IE!)
 .navbar-subnav-fixed {
   position: fixed;