Refactor: drop .dropdown .caret for a generated caret using .dropdown-toggle:after

2 files changed, 20 insertions, 18 deletions

diff --git a/less/dropdowns.less b/less/dropdowns.less
index c71a618ff..cfe19cb20 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -2,27 +2,29 @@
 // Dropdown menus
 // --------------------------------------------------
 
-
-// Dropdown arrow/caret
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 2px;
-  vertical-align: middle;
-  border-top:   @caret-width-base solid;
-  border-right: @caret-width-base solid transparent;
-  border-left:  @caret-width-base solid transparent;
-}
-
 // The dropdown wrapper (div)
 .dropdown {
   position: relative;
 }
 
-// Prevent the focus on the dropdown toggle when closing dropdowns
-.dropdown-toggle:focus {
-  outline: 0;
+.dropdown-toggle {
+  // Generate the caret automatically
+  &:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    content: "";
+    margin-left: .25rem;
+    vertical-align: middle;
+    border-top:   @caret-width-base solid;
+    border-right: @caret-width-base solid transparent;
+    border-left:  @caret-width-base solid transparent;
+  }
+
+  // Prevent the focus on the dropdown toggle when closing dropdowns
+  &:focus {
+    outline: 0;
+  }
 }
 
 // The dropdown menu (ul)
diff --git a/less/variables.less b/less/variables.less
index f7d8fcf98..f718e3747 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -101,9 +101,9 @@
 @component-active-bg:       @brand-primary;
 
 //** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base:          4px;
+@caret-width-base:          .3em;
 //** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
+@caret-width-large:         @caret-width-base;
 
 
 //== Tables