enable the use of .nav-header in dropdowns per #1827

5 files changed, 36 insertions, 22 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 22be76caf..a41a61541 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b1a1d2611..5a97f23a6 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2130,27 +2130,31 @@ button.btn.small, input[type="submit"].btn.small {
   text-decoration: none;
   background-color: #eeeeee;
 }
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #999999;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 .nav-list {
   padding-left: 14px;
   padding-right: 14px;
   margin-bottom: 0;
 }
 .nav-list > li > a, .nav-list .nav-header {
-  display: block;
-  padding: 3px 15px;
   margin-left: -15px;
   margin-right: -15px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
-.nav-list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 18px;
-  color: #999999;
-  text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
-  margin-top: 9px;
+.nav-list > li > a {
+  padding: 3px 15px;
 }
 .nav-list .active > a, .nav-list .active > a:hover {
   color: #ffffff;
diff --git a/docs/components.html b/docs/components.html
index 2af9df756..37f1a6511 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -771,7 +771,9 @@
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
+                <li class="nav-header">Nav header</li>
                 <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
               </ul>
             </li>
           </ul>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 62a7083b6..c854ad0d0 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -695,7 +695,9 @@
                 <li><a href="#">{{_i}}Another action{{/i}}</a></li>
                 <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
                 <li class="divider"></li>
+                <li class="nav-header">Nav header</li>
                 <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
               </ul>
             </li>
           </ul>
diff --git a/less/navs.less b/less/navs.less
index 0d37ea388..06219fa62 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -21,6 +21,21 @@
   background-color: @grayLighter;
 }
 
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: @baseLineHeight;
+  color: @grayLight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 
 
 // NAV LIST
@@ -33,21 +48,12 @@
 }
 .nav-list > li > a,
 .nav-list .nav-header {
-  display: block;
-  padding: 3px 15px;
   margin-left:  -15px;
   margin-right: -15px;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
-.nav-list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: @baseLineHeight;
-  color: @grayLight;
-  text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
-  margin-top: 9px;
+.nav-list > li > a {
+  padding: 3px 15px;
 }
 .nav-list .active > a,
 .nav-list .active > a:hover {