Style popovers according to the design specs

- Apply new styles for header, padding, border, and fonts
- Remove bootstrap 3 backward compat code

4 files changed, 87 insertions, 15 deletions

diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 7f6384f4eea..802d58779d0 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -147,11 +147,6 @@ table {
   pointer-events: none;
 }
 
-.popover,
-.popover-header {
-  font-size: 14px;
-}
-
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss
index 774be9ef588..3d915928565 100644
--- a/app/assets/stylesheets/components/popover.scss
+++ b/app/assets/stylesheets/components/popover.scss
@@ -1,37 +1,102 @@
 .popover {
-  min-width: 300px;
+  max-width: $popover-max-width;
+  border: 1px solid $gray-200;
+  box-shadow: 0 2px 3px 1px $gray-200;
+  font-size: $gl-font-size-small;
 
-  .popover-body .user-popover {
-    padding: $gl-padding-8;
-    font-size: $gl-font-size-small;
-    line-height: $gl-line-height;
-
-    .category-icon {
-      color: $gray-600;
-    }
+  .category-icon {
+    color: $gray-600;
   }
 
+  /**
+  * Blue popover variation
+  */
   &.blue {
     background-color: $blue-600;
+    border-color: $blue-600;
 
     .popover-body {
       color: $white-light;
     }
 
     &.bs-popover-bottom {
+      .arrow::before,
       .arrow::after {
         border-bottom-color: $blue-600;
       }
     }
 
     &.bs-popover-top {
+      .arrow::before,
       .arrow::after {
         border-top-color: $blue-600;
       }
     }
+
+    &.bs-popover-right {
+      .arrow::after,
+      .arrow::before {
+        border-right-color: $blue-600;
+      }
+    }
+
+    &.bs-popover-left {
+      .arrow::before,
+      .arrow::after {
+        border-left-color: $blue-600;
+      }
+    }
+  }
+}
+
+.bs-popover-top {
+  /* When popover position is top, the arrow is translated 1 pixel
+  *  due to the box-shadow include in our custom styles.
+  */
+  > .arrow::before {
+    border-top-color: $gray-200;
+    bottom: 1px;
+  }
+
+  > .arrow::after {
+    bottom: 2px;
+  }
+}
+
+.bs-popover-bottom {
+  > .arrow::before {
+    border-bottom-color: $gray-200;
+  }
+
+  > .popover-header::before {
+    border-color: $white-light;
+  }
+}
+
+.bs-popover-right > .arrow::before {
+  border-right-color: $gray-200;
+}
+
+.bs-popover-left > .arrow::before {
+  border-left-color: $gray-200;
+}
+
+.popover-header {
+  background-color: $white-light;
+  font-size: $gl-font-size-small;
+}
+
+.popover-body {
+  padding: $gl-padding;
+
+  > .popover-hr {
+    margin: $gl-padding 0;
   }
 }
 
+/**
+* mr_popover component
+*/
 .mr-popover {
   .text-secondary {
     font-size: 12px;
@@ -58,6 +123,14 @@
   }
 }
 
+/**
+* user_popover component
+*/
+.user-popover {
+  padding: $gl-padding-8;
+  line-height: $gl-line-height;
+}
+
 .onboarding-welcome-page {
   .popover {
     min-width: auto;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index dc451a97e17..3d7a3d5766e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -810,6 +810,11 @@ $modal-border-color: #e9ecef;
 $priority-label-empty-state-width: 114px;
 
 /*
+Popovers
+*/
+$popover-max-width: 384px;
+
+/*
 Issues Analytics
 */
 $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index c03554b287f..2d600e3aef6 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -136,7 +136,6 @@
     > .popover-header,
     > .popover-body {
       padding: 8px;
-      font-size: 12px;
       white-space: nowrap;
       position: relative;
     }