From 8bfb058df2cac9c3543c70c48767a78873f5a43a Mon Sep 17 00:00:00 2001 From: Miki Date: Fri, 9 Aug 2024 14:17:11 -0700 Subject: [PATCH] Better border hiding for DSM popover button Signed-off-by: Miki --- .../popover_button/popover_button.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/plugins/data_source_management/public/components/popover_button/popover_button.scss b/src/plugins/data_source_management/public/components/popover_button/popover_button.scss index a9cd9ffbd01f..e52212bde5f7 100644 --- a/src/plugins/data_source_management/public/components/popover_button/popover_button.scss +++ b/src/plugins/data_source_management/public/components/popover_button/popover_button.scss @@ -12,7 +12,21 @@ font-size: 0.4rem; line-height: 0.4rem; padding: 0 $euiSizeXS; - background-color: $euiHeaderBackgroundColor; + + /* Trying to hide the button's border: + * The background should start 1px (for the border) higher than at the edge of the button. + * When the top is 0.2rem, the gradient should start at 0.2rem - 1. + * The value is rounded down to the nearest pixel to avoid partial coverage of the border + * we are trying to hide. + */ + --dsm-popover-label-start: round(down, calc(0.2rem - 1px), 1px); + + background: + linear-gradient( + to bottom, + transparent var(--dsm-popover-label-start), + $euiHeaderBackgroundColor var(--dsm-popover-label-start) + ); color: $euiTextColor; z-index: 0; text-transform: uppercase;