From 0a12da5064730be8dc134a8037e18a2d29cc0b4c Mon Sep 17 00:00:00 2001 From: Alexey Shvorak Date: Thu, 1 Feb 2024 16:25:06 +0100 Subject: [PATCH] fix(MultipleTooltip): changed tooltips and it's backdrop styles (#179) * fix(MultipleTooltip): changed tooltips and it's backdrop styles * fix(MultipleTooltip): add todo comment above private variable usages --------- Co-authored-by: Alex Shvorak --- .../MultipleTooltip/MultipleTooltip.scss | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss b/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss index 3478ec9..f9c1ed9 100644 --- a/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss +++ b/src/components/CompositeBar/MultipleTooltip/MultipleTooltip.scss @@ -4,24 +4,31 @@ $block: '.#{variables.$ns}multiple-tooltip'; .g-root_theme_dark #{$block}, .g-root_theme_dark-hc #{$block} { - --multiple-tooltip-item-bg-color: #424147; // TODO: color variable will appear in uikit 5 + // TODO: Replace private color variable with special one which should appear in next uikit major version + --multiple-tooltip-item-bg-color: var(--g-color-private-white-100-solid); --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy); --multiple-tooltip-backdrop-background: linear-gradient( 90deg, - #313036 0%, - rgba(49, 48, 54, 0.3) 100% + var(--g-color-base-background) 50%, + transparent ); --multiple-tooltip-backdrop-filter: blur(16px); } +.g-root_theme_dark-hc #{$block} { + // TODO: Replace private color variable with special one which should appear in next uikit major version + --multiple-tooltip-item-bg-color: var(--g-color-private-white-150-solid); +} + .g-root_theme_light #{$block}, .g-root_theme_light-hc #{$block} { - --multiple-tooltip-item-bg-color: #7a7a7a; // TODO: color variable will appear in uikit 5 + // TODO: Replace private color variable with special one which should appear in next uikit major version + --multiple-tooltip-item-bg-color: var(--g-color-private-black-550-solid); --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy); --multiple-tooltip-backdrop-background: linear-gradient( 90deg, - #ffffff 0%, - rgba(255, 255, 255, 0.3) 100% + var(--g-color-base-background) 50%, + transparent ); --multiple-tooltip-backdrop-filter: blur(12px); } @@ -39,6 +46,7 @@ $block: '.#{variables.$ns}multiple-tooltip'; width: 100%; height: 100%; z-index: -1; + opacity: 0.7; background: var(--multiple-tooltip-backdrop-background); filter: var(--multiple-tooltip-backdrop-filter); }