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

3 files changed, 29 insertions, 18 deletions

diff --git a/less/dropdowns.less b/less/dropdowns.less
index 88a7462c4..fa46e288b 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -71,18 +71,7 @@
 
   // Dividers (basically an hr) within the dropdown
   .divider {
-    height: 1px;
-    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;
+    .nav-divider();
   }
 
   // Links within the dropdown menu
diff --git a/less/mixins.less b/less/mixins.less
index 0d9436e2f..e05667fff 100644
--- a/less/mixins.less
+++ b/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
diff --git a/less/navs.less b/less/navs.less
index 06219fa62..1325bb15a 100644
--- a/less/navs.less
+++ b/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();
+}