add horizontal divider support to nav list, including documentation for it, per #2106

docs/assets/css/bootstrap.css

@@ -1612,7 +1612,7 @@ table .span12 {
 }
 .dropdown-menu .divider {
   height: 1px;
-  margin: 5px 1px;
+  margin: 8px 1px;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
@@ -2217,6 +2217,15 @@ button.btn.small, input[type="submit"].btn.small {
 .nav-list [class^="icon-"] {
   margin-right: 2px;
 }
+.nav-list .divider {
+  height: 1px;
+  margin: 8px 1px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+  *width: 100%;
+  *margin: -5px 0 5px;
+}
 .nav-tabs, .nav-pills {
   *zoom: 1;
 }

docs/components.html

@@ -542,8 +542,18 @@
       <h3>Application-style navigation</h3>
       <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
       <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
+      <hr>
       <h4>With icons</h4>
       <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
+      <h4>Horizontal dividers</h4>
+      <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-list"&gt;
+  ...
+  &lt;li class="divider"&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
     </div>
     <div class="span4">
       <h3>Example nav list</h3>
@@ -557,6 +567,7 @@
           <li class="nav-header">Another list header</li>
           <li><a href="#">Profile</a></li>
           <li><a href="#">Settings</a></li>
+          <li class="divider"></li>
           <li><a href="#">Help</a></li>
         </ul>
       </div> <!-- /well -->
@@ -587,6 +598,7 @@
           <li class="nav-header">Another list header</li>
           <li><a href="#"><i class="icon-user"></i> Profile</a></li>
           <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
+          <li class="divider"></li>
           <li><a href="#"><i class="icon-flag"></i> Help</a></li>
         </ul>
       </div> <!-- /well -->

docs/templates/pages/components.mustache

@@ -466,8 +466,18 @@
       <h3>{{_i}}Application-style navigation{{/i}}</h3>
       <p>{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}</p>
       <p>{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}</p>
+      <hr>
       <h4>{{_i}}With icons{{/i}}</h4>
       <p>{{_i}}Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.{{/i}}</p>
+      <h4>{{_i}}Horizontal dividers{{/i}}</h4>
+      <p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-list"&gt;
+  ...
+  &lt;li class="divider"&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
     </div>
     <div class="span4">
       <h3>{{_i}}Example nav list{{/i}}</h3>
@@ -481,6 +491,7 @@
           <li class="nav-header">{{_i}}Another list header{{/i}}</li>
           <li><a href="#">{{_i}}Profile{{/i}}</a></li>
           <li><a href="#">{{_i}}Settings{{/i}}</a></li>
+          <li class="divider"></li>
           <li><a href="#">{{_i}}Help{{/i}}</a></li>
         </ul>
       </div> <!-- /well -->
@@ -511,6 +522,7 @@
           <li class="nav-header">{{_i}}Another list header{{/i}}</li>
           <li><a href="#"><i class="icon-user"></i> {{_i}}Profile{{/i}}</a></li>
           <li><a href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a></li>
+          <li class="divider"></li>
           <li><a href="#"><i class="icon-flag"></i> {{_i}}Help{{/i}}</a></li>
         </ul>
       </div> <!-- /well -->

less/dropdowns.less

@@ -71,18 +71,7 @@
 
   // Dividers (basically an hr) within the dropdown
   .divider {
-    height: 1px;
+    .nav-divider();
-    margin: 5px 1px;
-    overflow: hidden;
-    background-color: #e5e5e5;
-    border-bottom: 1px solid @white;
-
-    // IE7 needs a set width since we gave a height. Restricting just
-    // to IE7 to keep the 1px left/right space in other browsers.
-    // It is unclear where IE is getting the extra space that we need
-    // to negative-margin away, but so it goes.
-    *width: 100%;
-    *margin: -5px 0 5px;
   }
 
   // Links within the dropdown menu

less/mixins.less

@@ -527,8 +527,30 @@
 }
 
 
-// Mixin for generating button backgrounds
+
-// ---------------------------------------
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// NAV DIVIDER
+// -------------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+.nav-divider() {
+  height: 1px;
+  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid @white;
+
+  // IE7 needs a set width since we gave a height. Restricting just
+  // to IE7 to keep the 1px left/right space in other browsers.
+  // It is unclear where IE is getting the extra space that we need
+  // to negative-margin away, but so it goes.
+  *width: 100%;
+  *margin: -5px 0 5px;
+}
+
+// BUTTON BACKGROUNDS
+// ------------------
 .buttonBackground(@startColor, @endColor) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   .gradientBar(@startColor, @endColor);
@@ -546,10 +568,6 @@
   }
 }
 
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
 // POPOVER ARROWS
 // -------------------------
 // For tipsies and popovers

less/navs.less

@@ -64,6 +64,10 @@
 .nav-list [class^="icon-"] {
   margin-right: 2px;
 }
+// Dividers (basically an hr) within the dropdown
+.nav-list .divider {
+  .nav-divider();
+}