Fix conflict with Bootstrap CSS

1 files changed, 10 insertions, 13 deletions

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 9db6937aee..c86aac625b 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -32,19 +32,29 @@
   border: $dropdown-border-width solid $dropdown-border-color;
   @include border-radius($dropdown-border-radius);
   @include box-shadow($dropdown-box-shadow);
+
+  // Reset positioning when positioned with Popper
+  &[style] {
+    right: auto;
+  }
 }
 
 // scss-docs-start responsive-breakpoints
+// We deliberately hardcode the `bs-` prefix because we check
+// this custom property in JS to determine Popper's positioning
+
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
     .dropdown-menu#{$infix}-start {
+      --bs-position: start;
       right: auto #{"/* rtl:ignore */"};
       left: 0 #{"/* rtl:ignore */"};
     }
 
     .dropdown-menu#{$infix}-end {
+      --bs-position: end;
       right: 0 #{"/* rtl:ignore */"};
       left: auto #{"/* rtl:ignore */"};
     }
@@ -101,19 +111,6 @@
   }
 }
 
-// When Popper is enabled, reset the basic dropdown position
-// stylelint-disable-next-line no-duplicate-selectors
-.dropdown-menu {
-  &[data-popper-placement^="top"],
-  &[data-popper-placement^="right"],
-  &[data-popper-placement^="bottom"],
-  &[data-popper-placement^="left"] {
-    right: auto;
-    bottom: auto;
-    left: auto;
-  }
-}
-
 
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {