Convert popover's arrows to generated CSS content via :before/:after

1 files changed, 74 insertions, 50 deletions

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 674a8f31f6..5ff8bd5328 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -23,19 +23,22 @@
   &.bs-tether-element-attached-bottom {
     margin-top: -$popover-arrow-width;
 
-    .popover-arrow {
-      bottom: -$popover-arrow-outer-width;
+    &::before,
+    &::after {
       left: 50%;
+      border-bottom-width: 0;
+    }
+
+    &::before {
+      bottom: -$popover-arrow-outer-width;
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
-      border-bottom-width: 0;
-      &::after {
-        bottom: 1px;
-        margin-left: -$popover-arrow-width;
-        content: "";
-        border-top-color: $popover-arrow-color;
-        border-bottom-width: 0;
-      }
+    }
+
+    &::after {
+      bottom: -($popover-arrow-outer-width - 1);
+      margin-left: -$popover-arrow-width;
+      border-top-color: $popover-arrow-color;
     }
   }
 
@@ -43,19 +46,22 @@
   &.bs-tether-element-attached-left {
     margin-left: $popover-arrow-width;
 
-    .popover-arrow {
+    &::before,
+    &::after {
       top: 50%;
+      border-left-width: 0;
+    }
+
+    &::before {
       left: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
-      border-left-width: 0;
-      &::after {
-        bottom: -$popover-arrow-width;
-        left: 1px;
-        content: "";
-        border-right-color: $popover-arrow-color;
-        border-left-width: 0;
-      }
+    }
+
+    &::after {
+      left: -($popover-arrow-outer-width - 1);
+      margin-top: -($popover-arrow-outer-width - 1);
+      border-right-color: $popover-arrow-color;
     }
   }
 
@@ -63,19 +69,34 @@
   &.bs-tether-element-attached-top {
     margin-top: $popover-arrow-width;
 
-    .popover-arrow {
-      top: -$popover-arrow-outer-width;
+    &::before,
+    &::after {
       left: 50%;
-      margin-left: -$popover-arrow-outer-width;
       border-top-width: 0;
+    }
+
+    &::before {
+      top: -$popover-arrow-outer-width;
+      margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
-      &::after {
-        top: 1px;
-        margin-left: -$popover-arrow-width;
-        content: "";
-        border-top-width: 0;
-        border-bottom-color: $popover-arrow-color;
-      }
+    }
+
+    &::after {
+      top: -($popover-arrow-outer-width - 1);
+      margin-left: -$popover-arrow-width;
+      border-bottom-color: $popover-title-bg;
+    }
+
+    // This will remove the popover-title's border just below the arrow
+    .popover-title::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: 20px;
+      margin-left: -10px;
+      content: "";
+      border-bottom: 1px solid $popover-title-bg;
     }
   }
 
@@ -83,19 +104,22 @@
   &.bs-tether-element-attached-right {
     margin-left: -$popover-arrow-width;
 
-    .popover-arrow {
+    &::before,
+    &::after {
       top: 50%;
+      border-right-width: 0;
+    }
+
+    &::before {
       right: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
-      border-right-width: 0;
       border-left-color: $popover-arrow-outer-color;
-      &::after {
-        right: 1px;
-        bottom: -$popover-arrow-width;
-        content: "";
-        border-right-width: 0;
-        border-left-color: $popover-arrow-color;
-      }
+    }
+
+    &::after {
+      right: -($popover-arrow-outer-width - 1);
+      margin-top: -($popover-arrow-outer-width - 1);
+      border-left-color: $popover-arrow-color;
     }
   }
 }
@@ -120,21 +144,21 @@
 //
 // .popover-arrow is outer, .popover-arrow::after is inner
 
-.popover-arrow {
-  &,
-  &::after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
+.popover::before,
+.popover::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
 }
-.popover-arrow {
+
+.popover::before {
+  content: "";
   border-width: $popover-arrow-outer-width;
 }
-.popover-arrow::after {
+.popover::after {
   content: "";
   border-width: $popover-arrow-width;
 }