From 94e256c0162748dcddd6401d57a186576254f884 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 1 Feb 2013 22:56:09 -0800
Subject: Refactor navbar dividers

* Instead of .divider-vertical, use .divider
* Makes use of .nav-divider mixin
* Dividers are horizontal to start, matching the default state of navbar nav links
* Dividers become vertical above 768px via media queries
---
 less/mixins.less |  2 +-
 less/navbar.less | 29 ++++++++++++++++++++---------
 2 files changed, 21 insertions(+), 10 deletions(-)

(limited to 'less')

diff --git a/less/mixins.less b/less/mixins.less
index 3282bd10e..71ca3dfef 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -377,7 +377,7 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@top: #e5e5e5, @bottom: #fff) {
   height: 1px;
-  margin: ((@line-height-base / 2) - 1) 1px; // 8px 1px
+  margin: ((@line-height-base / 2) - 1) 0;
   overflow: hidden;
   background-color: @top;
   border-bottom: 1px solid @bottom;
diff --git a/less/navbar.less b/less/navbar.less
index 2a6824e06..1af0c499a 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -104,11 +104,8 @@
 }
 
 // Dividers in navbar
-.navbar .divider-vertical {
-  height: @navbar-height * .6;
-  margin: (@navbar-height * .2) 9px;
-  border-left: 1px solid darken(@navbar-bg, 5%);
-  border-right: 1px solid lighten(@navbar-bg, 5%);
+.navbar .nav > .divider {
+  .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
 }
 
 // Navbar form
@@ -204,10 +201,10 @@
     background-color: #444;
   }
 
-  // Darken divider borders
-  .divider-vertical {
-    border-left-color: darken(@navbar-inverse-bg, 5%);
-    border-right-color: lighten(@navbar-inverse-bg, 5%);
+  // Darken dividers
+  .nav > .divider {
+    background-color: darken(@navbar-inverse-bg, 5%);
+    border-bottom-color: lighten(@navbar-inverse-bg, 5%);
   }
 
   // Dropdowns
@@ -262,6 +259,20 @@
     float: left;
   }
 
+  // Dividers go vertical
+  // Change the height and height, disable bottom border, then add right border
+  .navbar .nav > .divider {
+    width: 1px;
+    height: @navbar-height * .6;
+    margin: (@navbar-height * .2) 9px;
+    border-bottom: 0;
+    border-right: 1px solid lighten(@navbar-bg, 5%);
+  }
+  // Since we override the border, we need to specify it again for inverted navbars
+  .navbar-inverse .nav > .divider {
+    border-right-color: lighten(@navbar-inverse-bg, 5%);
+  }
+
   // Required to make the collapsing navbar work on regular desktops
   .navbar .btn-navbar {
     display: none;
-- 
cgit v1.2.3