Add option to disable carets on dropdowns through `$enable-caret`

4 files changed, 39 insertions, 19 deletions

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 05e8b1652..9d276f875 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -6,21 +6,7 @@
 
 .dropdown-toggle {
   // Generate the caret automatically
-  &::after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: $caret-width * .85;
-    vertical-align: $caret-width * .85;
-    content: "";
-    border-top: $caret-width solid;
-    border-right: $caret-width solid transparent;
-    border-left: $caret-width solid transparent;
-  }
-
-  &:empty::after {
-    margin-left: 0;
-  }
+  @include caret;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
@@ -32,10 +18,7 @@
   }
 
   .dropdown-toggle {
-    &::after {
-      border-top: 0;
-      border-bottom: $caret-width solid;
-    }
+    @include caret(up);
   }
 }
 
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 09035bf10..d9a1774b7 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -19,6 +19,7 @@
 // // Components
 @import "mixins/alert";
 @import "mixins/buttons";
+@import "mixins/caret";
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/list-group";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e68fb23c8..71fb384aa 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -122,6 +122,7 @@ $theme-color-interval: 8% !default;
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
+$enable-caret:              true !default;
 $enable-rounded:            true !default;
 $enable-shadows:            false !default;
 $enable-gradients:          false !default;
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
new file mode 100644
index 000000000..daab9d03c
--- /dev/null
+++ b/scss/mixins/_caret.scss
@@ -0,0 +1,35 @@
+@mixin caret-down {
+  border-top: $caret-width solid;
+  border-right: $caret-width solid transparent;
+  border-bottom: 0;
+  border-left: $caret-width solid transparent;
+}
+
+@mixin caret-up {
+  border-top: 0;
+  border-right: $caret-width solid transparent;
+  border-bottom: $caret-width solid;
+  border-left: $caret-width solid transparent;
+}
+
+@mixin caret($direction: down) {
+  @if $enable-caret {
+    &::after {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-left: $caret-width * .85;
+      vertical-align: $caret-width * .85;
+      content: "";
+      @if $direction == down {
+        @include caret-down;
+      } @else if $direction == up {
+        @include caret-up;
+      }
+    }
+
+    &:empty::after {
+      margin-left: 0;
+    }
+  }
+}