Update dropdown vars

* Update `.nav-divider` mixin to simplify to a 1px line (one value
instead of two in parametric mixin)
* Rename and consolidate dropdown caret vars
* Add vars to Customizer

4 files changed, 13 insertions, 16 deletions

diff --git a/customize.html b/customize.html
index afdef028b..4c401b2cd 100644
--- a/customize.html
+++ b/customize.html
@@ -817,6 +817,10 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
           <label>@dropdown-link-hover-bg</label>
           <input type="text" placeholder="@dropdown-link-active-bg">
           <p class="help-block">Hovered dropdown menu entry background color</p>
+          <h3>Dropdown caret</h3>
+          <label>@dropdown-caret-color</label>
+          <input type="text" placeholder="@dropdown-caret-color">
+          <p class="help-block">Indicator arrow for showing an element has a dropdown</p>
         </div>
         <div class="col-lg-6">
           <h3>Colors</h3>
@@ -834,12 +838,9 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
       <h3>Dividers</h3>
       <div class="row">
         <div class="col-lg-6">
-          <label>@dropdown-divider-top</label>
+          <label>@dropdown-divider-bg</label>
           <input type="text" placeholder="#e5e5e5">
           <p class="help-block">Dropdown divider top border color</p>
-          <label>@dropdown-divider-bottom</label>
-          <input type="text" placeholder="#fff">
-          <p class="help-block">Dropdown divider bottom border color</p>
         </div>
       </div>
 
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 1430435e4..00a84a6cb 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -11,7 +11,7 @@
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
-  border-top:   4px solid @caret-border-top-color;
+  border-top:   4px solid @dropdown-caret-color;
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
   content: "";
@@ -45,7 +45,7 @@
 
   // Dividers (basically an hr) within the dropdown
   .divider {
-    .nav-divider(@dropdown-divider-top, @dropdown-divider-bottom);
+    .nav-divider(@dropdown-divider-bg);
   }
 
   // Links within the dropdown menu
@@ -159,7 +159,7 @@
   // Reverse the caret
   .caret {
     border-top: 0;
-    border-bottom: 4px solid @dropup-caret-border-color;
+    border-bottom: 4px solid @dropdown-caret-color;
     content: "";
   }
   // Different positioning for bottom up menu
diff --git a/less/mixins.less b/less/mixins.less
index 4dbfa83ef..a280ca9fd 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -332,12 +332,11 @@
 // Horizontal dividers
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
-.nav-divider(@top: #e5e5e5, @bottom: #fff) {
-  height: 2px; // 1px for background, one for border
+.nav-divider(@color: #e5e5e5) {
+  height: 1px;
   margin: ((@line-height-computed / 2) - 1) 0;
   overflow: hidden;
-  background-color: @top;
-  border-bottom: 1px solid @bottom;
+  background-color: @color;
 }
 
 // Alerts
diff --git a/less/variables.less b/less/variables.less
index 2627a8bd7..38ca8a474 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -147,8 +147,7 @@
 @dropdown-bg:                    #fff;
 @dropdown-border:                rgba(0,0,0,.15);
 @dropdown-fallback-border:       #ccc;
-@dropdown-divider-top:           #e5e5e5;
-@dropdown-divider-bottom:        #fff;
+@dropdown-divider-bg:            #e5e5e5;
 
 @dropdown-link-active-color:     #fff;
 @dropdown-link-active-bg:        @component-active-bg;
@@ -157,9 +156,7 @@
 @dropdown-link-hover-color:      #fff;
 @dropdown-link-hover-bg:         @dropdown-link-active-bg;
 
-@caret-border-top-color:         #000;
-
-@dropup-caret-border-color:      #000;
+@dropdown-caret-color:           #000;
 
 
 // COMPONENT VARIABLES