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

1 files changed, 18 insertions, 29 deletions

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 6688f729c..a55555e2e 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -22,7 +22,6 @@
     display: block;
     width: $popover-arrow-width;
     height: $popover-arrow-height;
-    margin: 0 $popover-border-radius;
 
     &::before,
     &::after {
@@ -36,8 +35,6 @@
 }
 
 .bs-popover-top {
-  margin-bottom: $popover-arrow-height;
-
   > .popover-arrow {
     bottom: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -56,31 +53,26 @@
 }
 
 .bs-popover-end {
-  margin-left: $popover-arrow-height #{"/* rtl:ignore */"};
-
   > .popover-arrow {
-    left: subtract(-$popover-arrow-height, $popover-border-width) #{"/* rtl:ignore */"};
+    left: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
 
     &::before {
-      left: 0 #{"/* rtl:ignore */"};
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0 #{"/* rtl:ignore */"};
-      border-right-color: $popover-arrow-outer-color #{"/* rtl:ignore */"};
+      left: 0;
+      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-right-color: $popover-arrow-outer-color;
     }
 
     &::after {
-      left: $popover-border-width #{"/* rtl:ignore */"};
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0 #{"/* rtl:ignore */"};
-      border-right-color: $popover-arrow-color #{"/* rtl:ignore */"};
+      left: $popover-border-width;
+      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-right-color: $popover-arrow-color;
     }
   }
 }
 
 .bs-popover-bottom {
-  margin-top: $popover-arrow-height;
-
   > .popover-arrow {
     top: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -111,39 +103,36 @@
 }
 
 .bs-popover-start {
-  margin-right: $popover-arrow-height #{"/* rtl:ignore */"};
-
   > .popover-arrow {
-    right: subtract(-$popover-arrow-height, $popover-border-width) #{"/* rtl:ignore */"};
+    right: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
 
     &::before {
-      right: 0 #{"/* rtl:ignore */"};
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height #{"/* rtl:ignore */"};
-      border-left-color: $popover-arrow-outer-color #{"/* rtl:ignore */"};
+      right: 0;
+      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-left-color: $popover-arrow-outer-color;
     }
 
     &::after {
-      right: $popover-border-width #{"/* rtl:ignore */"};
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height #{"/* rtl:ignore */"};
-      border-left-color: $popover-arrow-color #{"/* rtl:ignore */"};
+      right: $popover-border-width;
+      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-left-color: $popover-arrow-color;
     }
   }
 }
 
 .bs-popover-auto {
-  &[x-placement^="top"] {
+  &[data-popper-placement^="top"] {
     @extend .bs-popover-top;
   }
-  &[x-placement^="right"] {
+  &[data-popper-placement^="right"] {
     @extend .bs-popover-end;
   }
-  &[x-placement^="bottom"] {
+  &[data-popper-placement^="bottom"] {
     @extend .bs-popover-bottom;
   }
-  &[x-placement^="left"] {
+  &[data-popper-placement^="left"] {
     @extend .bs-popover-start;
   }
 }