Merge branch 'main' into jo-docs-thanks-pagejo-docs-thanks-page

1 files changed, 25 insertions, 23 deletions

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 7cad64009..06e70f701 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -16,13 +16,11 @@
 // The dropdown menu
 .dropdown-menu {
   position: absolute;
-  top: 100%;
-  left: 0;
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y $dropdown-padding-x;
-  margin: $dropdown-spacer 0 0; // override default ul
+  margin: 0; // Override default margin of ul
   @include font-size($dropdown-font-size);
   color: $dropdown-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -32,21 +30,38 @@
   border: $dropdown-border-width solid $dropdown-border-color;
   @include border-radius($dropdown-border-radius);
   @include box-shadow($dropdown-box-shadow);
+
+  &[data-bs-popper] {
+    top: 100%;
+    left: 0;
+    margin-top: $dropdown-spacer;
+  }
 }
 
 // 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 {
-      right: auto #{"/* rtl:ignore */"};
-      left: 0 #{"/* rtl:ignore */"};
+      --bs-position: start;
+
+      &[data-bs-popper] {
+        right: auto #{"/* rtl:ignore */"};
+        left: 0 #{"/* rtl:ignore */"};
+      }
     }
 
     .dropdown-menu#{$infix}-end {
-      right: 0 #{"/* rtl:ignore */"};
-      left: auto #{"/* rtl:ignore */"};
+      --bs-position: end;
+
+      &[data-bs-popper] {
+        right: 0 #{"/* rtl:ignore */"};
+        left: auto #{"/* rtl:ignore */"};
+      }
     }
   }
 }
@@ -55,7 +70,7 @@
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 // Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
-  .dropdown-menu {
+  .dropdown-menu[data-bs-popper] {
     top: auto;
     bottom: 100%;
     margin-top: 0;
@@ -68,7 +83,7 @@
 }
 
 .dropend {
-  .dropdown-menu {
+  .dropdown-menu[data-bs-popper] {
     top: 0;
     right: auto;
     left: 100%;
@@ -85,7 +100,7 @@
 }
 
 .dropstart {
-  .dropdown-menu {
+  .dropdown-menu[data-bs-popper] {
     top: 0;
     right: 100%;
     left: auto;
@@ -101,19 +116,6 @@
   }
 }
 
-// When Popper is enabled, reset the basic dropdown position
-// stylelint-disable-next-line no-duplicate-selectors
-.dropdown-menu {
-  &[x-placement^="top"],
-  &[x-placement^="right"],
-  &[x-placement^="bottom"],
-  &[x-placement^="left"] {
-    right: auto;
-    bottom: auto;
-    left: auto;
-  }
-}
-
 
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {