Merge branch 'dropdown-caret' of https://github.com/pat270/bootstrap into v4-dev

5 files changed, 40 insertions, 19 deletions

diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md
index d03a25422..c4c50dc4b 100644
--- a/docs/4.0/getting-started/theming.md
+++ b/docs/4.0/getting-started/theming.md
@@ -163,6 +163,7 @@ You can find and customize these variables for key global options in our `_varia
 | `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components.                                |
 | `$enable-hover-media-query` | `true` or `false` (default)        | ...                                                                                    |
 | `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).     |
+| `$enable-caret`             | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`.                                    |
 | `$enable-print-styles`      | `true` (default) or `false`        | Enables styles for optimizing printing.                                |
 
 ## Color
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 6e81947ed..32657167f 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 437434ce2..7b39e8b92 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -83,6 +83,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;
+    }
+  }
+}