Add dropright and dropleft (right and left placements for our dropdown) (#23860)

* Add dropright (right placement for our dropdown)

* Add dropleft

* moves drop left arrow to the left

2 files changed, 58 insertions, 0 deletions

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 271764188..19edfca7a 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -44,6 +44,34 @@
   }
 }
 
+.dropright {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-left: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(right);
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropleft {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-right: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(left);
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider($dropdown-divider-bg);
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index daab9d03c..40478e492 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -12,6 +12,18 @@
   border-left: $caret-width solid transparent;
 }
 
+@mixin caret-right {
+  border-top: $caret-width solid transparent;
+  border-bottom: $caret-width solid transparent;
+  border-left: $caret-width solid;
+}
+
+@mixin caret-left {
+  border-top: $caret-width solid transparent;
+  border-right: $caret-width solid;
+  border-bottom: $caret-width solid transparent;
+}
+
 @mixin caret($direction: down) {
   @if $enable-caret {
     &::after {
@@ -25,6 +37,24 @@
         @include caret-down;
       } @else if $direction == up {
         @include caret-up;
+      } @else if $direction == right {
+        @include caret-right;
+      }
+    }
+
+    @if $direction == left {
+      &::after {
+        display: none;
+      }
+
+      &::before {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-right: $caret-width * .85;
+        vertical-align: $caret-width * .85;
+        content: "";
+        @include caret-left;
       }
     }