fix: added arrow bg color for Popover component (#2477)

openedx · Aug 1, 2023 · fe8f1ae · fe8f1ae
1 parent 5c5e5c7
commit fe8f1ae
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/src/Popover/_mixins.scss b/src/Popover/_mixins.scss
@@ -0,0 +1,31 @@
+@mixin get-popover-variant($bg, $icon-color) {
+  background: $bg;
+
+  .popover-header {
+    background: $bg;
+
+    &::before {
+      border-bottom-color: $bg;
+    }
+  }
+
+  .pgn__icon {
+    color: $icon-color;
+  }
+
+  &.bs-popover-bottom .arrow::after {
+    border-bottom-color: $bg;
+  }
+
+  &.bs-popover-top .arrow::after {
+    border-top-color: $bg;
+  }
+
+  &.bs-popover-right .arrow::after {
+    border-right-color: $bg;
+  }
+
+  &.bs-popover-left .arrow::after {
+    border-left-color: $bg;
+  }
+}
diff --git a/src/Popover/index.scss b/src/Popover/index.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 @import "~bootstrap/scss/popover";
 
 .popover {
@@ -18,37 +19,13 @@
 }
 
 .popover-success {
-  background: $popover-success-bg;
-
-  .popover-header {
-    background: $popover-success-bg;
-  }
-
-  .pgn__icon {
-    color: $popover-success-icon-color;
-  }
+  @include get-popover-variant($popover-success-bg, $popover-success-icon-color);
 }
 
 .popover-warning {
-  background: $popover-warning-bg;
-
-  .popover-header {
-    background: $popover-warning-bg;
-  }
-
-  .pgn__icon {
-    color: $popover-warning-icon-color;
-  }
+  @include get-popover-variant($popover-warning-bg, $popover-warning-icon-color);
 }
 
 .popover-danger {
-  background: $popover-danger-bg;
-
-  .popover-header {
-    background: $popover-danger-bg;
-  }
-
-  .pgn__icon {
-    color: $popover-danger-icon-color;
-  }
+  @include get-popover-variant($popover-danger-bg, $popover-danger-icon-color);
 }