From 0fdd467ab5bfc292cdde74a3cc911f6e5c5e5770 Mon Sep 17 00:00:00 2001 From: Adam Jolicoeur Date: Tue, 22 May 2018 12:31:58 -0400 Subject: [PATCH] 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 https://github.com/patternfly/patternfly/issues/1014 Co-authored-by: Matthew Carleton --- src/less/popovers.less | 14 ++++++++++++++ src/less/variables.less | 4 ++++ src/sass/converted/patternfly/_popovers.scss | 14 ++++++++++++++ src/sass/converted/patternfly/_variables.scss | 4 ++++ 4 files changed, 36 insertions(+) diff --git a/src/less/popovers.less b/src/less/popovers.less index ac8ebd99eb..8f5f008135 100644 --- 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 index e032d7eb4f..d8a31954b6 100644 --- 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 index 3478e7b2b2..e6778c21f0 100644 --- 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 index e623621616..01a5d64987 100644 --- 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;