From 7b517bcb1068aa38882cc293056bd352ae7c84b4 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 11 Nov 2019 12:18:03 +0100
Subject: [PATCH]  ColorPicker: Fixes issue with ColorPicker disappearing too
 quickly (#20289)

(cherry picked from commit 422a94707dc8cd1aa4e47a426c823ac2b8c7a885)
---
 .../components/ColorPicker/_ColorPicker.scss  | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
index a961aa0ac84..341ee617399 100644
--- a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
+++ b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
@@ -2,6 +2,9 @@ $arrowSize: 15px;
 .ColorPicker {
   @extend .popper;
   font-size: 12px;
+  // !important because these styles are also provided to popper via .popper classes from Tooltip component
+  // hope to get rid of those soon
+  padding: $arrowSize !important;
 }
 
 .ColorPicker__arrow {
@@ -75,32 +78,19 @@ $arrowSize: 15px;
   border-color: #1e2028;
 }
 
-// Top
-.ColorPicker[data-placement^='top'] {
-  padding-bottom: $arrowSize;
-}
-
-// Bottom
+// !important because these styles are also provided to popper via .popper classes from Tooltip component
+// hope to get rid of those soon
+.ColorPicker[data-placement^='top'],
 .ColorPicker[data-placement^='bottom'] {
-  padding-top: $arrowSize;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 }
 
-.ColorPicker[data-placement^='bottom-start'] {
-  padding-top: $arrowSize;
-}
-
-.ColorPicker[data-placement^='bottom-end'] {
-  padding-top: $arrowSize;
-}
-
-// Right
+// !important because these styles are also provided to popper via .popper classes from Tooltip component
+// hope to get rid of those soon
+.ColorPicker[data-placement^='left'],
 .ColorPicker[data-placement^='right'] {
-  padding-left: $arrowSize;
-}
-
-// Left
-.ColorPicker[data-placement^='left'] {
-  padding-right: $arrowSize;
+  padding-top: 0 !important;
 }
 
 .ColorPickerPopover {