Apply arrow styles to direct descendants of bootstrap popover classes

With the current styles, it is not possible to nest a popover inside of
another popover if they have different placements because the arrow
styles of the parent popover will conflict with the arrow styles of the
child popover.

1 files changed, 20 insertions, 20 deletions

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 4a79fb7517..e9a1ea8575 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -38,21 +38,21 @@
 .bs-popover-top {
   margin-bottom: $popover-arrow-height;
 
-  .arrow {
+  > .arrow {
     bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
   }
 
-  .arrow::before,
-  .arrow::after {
+  > .arrow::before,
+  > .arrow::after {
     border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
   }
 
-  .arrow::before {
+  > .arrow::before {
     bottom: 0;
     border-top-color: $popover-arrow-outer-color;
   }
 
-  .arrow::after {
+  > .arrow::after {
     bottom: $popover-border-width;
     border-top-color: $popover-arrow-color;
   }
@@ -61,24 +61,24 @@
 .bs-popover-right {
   margin-left: $popover-arrow-height;
 
-  .arrow {
+  > .arrow {
     left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
     margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
   }
 
-  .arrow::before,
-  .arrow::after {
+  > .arrow::before,
+  > .arrow::after {
     border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
   }
 
-  .arrow::before {
+  > .arrow::before {
     left: 0;
     border-right-color: $popover-arrow-outer-color;
   }
 
-  .arrow::after {
+  > .arrow::after {
     left: $popover-border-width;
     border-right-color: $popover-arrow-color;
   }
@@ -87,21 +87,21 @@
 .bs-popover-bottom {
   margin-top: $popover-arrow-height;
 
-  .arrow {
+  > .arrow {
     top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
   }
 
-  .arrow::before,
-  .arrow::after {
+  > .arrow::before,
+  > .arrow::after {
     border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
   }
 
-  .arrow::before {
+  > .arrow::before {
     top: 0;
     border-bottom-color: $popover-arrow-outer-color;
   }
 
-  .arrow::after {
+  > .arrow::after {
     top: $popover-border-width;
     border-bottom-color: $popover-arrow-color;
   }
@@ -122,24 +122,24 @@
 .bs-popover-left {
   margin-right: $popover-arrow-height;
 
-  .arrow {
+  > .arrow {
     right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
     margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
   }
 
-  .arrow::before,
-  .arrow::after {
+  > .arrow::before,
+  > .arrow::after {
     border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
   }
 
-  .arrow::before {
+  > .arrow::before {
     right: 0;
     border-left-color: $popover-arrow-outer-color;
   }
 
-  .arrow::after {
+  > .arrow::after {
     right: $popover-border-width;
     border-left-color: $popover-arrow-color;
   }