fix(popovers): Fix color issue with bottom popover (#1026)

Fix the bottom popover styling issue where the triangle is white, rather than grey to match the title background. fixes patternfly/patternfly#1014 Co-authored-by: Matthew Carleton <mcarleton@redhat.com>
patternfly · May 22, 2018 · 0fdd467 · 0fdd467
1 parent 09b5aa2
commit 0fdd467
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/src/less/popovers.less b/src/less/popovers.less
@@ -5,6 +5,20 @@
 .popover {
   .box-shadow(0 2px 2px fade(@color-pf-black, 8%));
   padding: 0;
+  &.bottom {
+    .popover-title:before {
+      content:"";
+      position: absolute;
+      top: @popover-position-top;
+      left: 50%;
+      transform: translateX(-50%);
+      border-top-width: @popover-border-top-width;
+      border-width: @popover-border-width;
+      border-color: transparent;
+      border-bottom-color: @popover-border-bottom-color;
+      border-style: solid;
+    }
+  }
 }
 
 .popover-content {

diff --git a/src/less/variables.less b/src/less/variables.less
@@ -491,7 +491,11 @@
 @popover-arrow-color:                                               @color-pf-white;
 @popover-arrow-outer-color:                                         @color-pf-black-400;
 @popover-border-color:                                              @color-pf-black-400;
+@popover-border-bottom-color:                                       @color-pf-black-150;
+@popover-border-width:                                              10px;
+@popover-border-top-width:                                          0;
 @popover-max-width:                                                 220px;
+@popover-position-top:                                              -20px;
 @popover-title-bg:                                                  @color-pf-black-150;
 @pre-bg:                                                            @color-pf-black-100;
 @progress-bg:                                                       @color-pf-black-200;

diff --git a/src/sass/converted/patternfly/_popovers.scss b/src/sass/converted/patternfly/_popovers.scss
@@ -5,6 +5,20 @@
 .popover {
   @include box-shadow(0 2px 2px rgba($color-pf-black, (8/100)));
   padding: 0;
+  &.bottom {
+    .popover-title:before {
+      content:"";
+      position: absolute;
+      top: $popover-position-top;
+      left: 50%;
+      transform: translateX(-50%);
+      border-top-width: $popover-border-top-width;
+      border-width: $popover-border-width;
+      border-color: transparent;
+      border-bottom-color: $popover-border-bottom-color;
+      border-style: solid;
+    }
+  }
 }
 
 .popover-content {

diff --git a/src/sass/converted/patternfly/_variables.scss b/src/sass/converted/patternfly/_variables.scss
@@ -491,7 +491,11 @@ $panel-inner-border:                                                $color-pf-bl
 $popover-arrow-color:                                               $color-pf-white !default;
 $popover-arrow-outer-color:                                         $color-pf-black-400 !default;
 $popover-border-color:                                              $color-pf-black-400 !default;
+$popover-border-bottom-color:                                       $color-pf-black-150 !default;
+$popover-border-width:                                              10px !default;
+$popover-border-top-width:                                          0 !default;
 $popover-max-width:                                                 220px !default;
+$popover-position-top:                                              -20px !default;
 $popover-title-bg:                                                  $color-pf-black-150 !default;
 $pre-bg:                                                            $color-pf-black-100 !default;
 $progress-bg:                                                       $color-pf-black-200 !default;