From 04cea02c28a08a2b74e5982816f51ea104070f8b Mon Sep 17 00:00:00 2001
From: Inna Atanasova <i.atanasova@sap.com>
Date: Fri, 6 Sep 2024 14:09:30 -0400
Subject: [PATCH] fix(styles): bring Slider tooltip styling from FNGX [ci
 visual]

---
 packages/styles/src/popover.scss | 12 +++++--
 packages/styles/src/slider.scss  | 56 ++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/popover.scss b/packages/styles/src/popover.scss
index 2b4f3a2e0b..776c5c7f1a 100644
--- a/packages/styles/src/popover.scss
+++ b/packages/styles/src/popover.scss
@@ -19,11 +19,14 @@ body.fd-overlay-active::before {
 }
 
 .#{$block} {
+  --fdPopover_Display: inline-block;
+
+
   @include fd-reset();
 
-  position: relative;
-  display: inline-block;
   max-width: 100%;
+  position: relative;
+  display: var(--fdPopover_Display);
 
   &__modal {
     position: relative;
@@ -536,6 +539,11 @@ body.fd-overlay-active::before {
     }
   }
 
+  // Modifier class for Slider Tooltip and Input
+  &--slider {
+    --fdPopover_Display: block;
+  }
+
   // @deprecated, fd-popover__body--input-message-group to be used instead
   &--input-message-group {
     .#{$block}__body,
diff --git a/packages/styles/src/slider.scss b/packages/styles/src/slider.scss
index 63bd4a6f2b..2a3da18465 100644
--- a/packages/styles/src/slider.scss
+++ b/packages/styles/src/slider.scss
@@ -96,6 +96,22 @@ $slider-side-padding: calc((var(--fdSlider_Handle_Width) * 0.5) + #{$handle-outl
     position: relative;
     z-index: 1;
     box-shadow: inset 0 0 0 var(--fdSlider_Track_Border_Width) var(--fdSlider_Track_Border_Color);
+
+    .#{$block}__handle {
+      @include fd-focus() {
+        z-index: 2;
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+        -khtml-user-select: none; /* Konqueror HTML */
+        -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+      }
+    }
+
+    .#{$fd-namespace}-popover-custom {
+        display: none;
+    }
   }
 
   &__track-range {
@@ -124,6 +140,8 @@ $slider-side-padding: calc((var(--fdSlider_Handle_Width) * 0.5) + #{$handle-outl
     @include fd-flex() {
       justify-content: space-between;
     }
+
+    height: var(--fdSlider_Tick_Height);
   }
 
   &__labels {
@@ -136,6 +154,10 @@ $slider-side-padding: calc((var(--fdSlider_Handle_Width) * 0.5) + #{$handle-outl
     position: relative;
     height: 1rem;
     top: 0.5rem;
+
+    .#{$block}__label {
+      white-space: nowrap;
+    }
   }
 
   &__tick {
@@ -394,4 +416,38 @@ $slider-side-padding: calc((var(--fdSlider_Handle_Width) * 0.5) + #{$handle-outl
       }
     }
   }
+
+  &.#{$block}--with-labels {
+    padding-bottom: 2rem;
+  }
+
+  // Overstyle of Popover body, needed for Tooltip and Input inside Tooltip (ngx implementation)
+  &-tooltip-popover {
+    &.#{$fd-namespace}-popover__body {
+      height: 1rem;
+      border: none;
+      padding-block: 0;
+      overflow: hidden;
+      padding-inline: 0.5rem;
+      border-radius: 0.0625rem;
+      top: -0.4375rem !important;
+      background: var(--sapBackgroundColor);
+      box-shadow: var(--sapContent_Shadow1);
+
+      .#{$block}-tooltip {
+          line-height: 1rem;
+          text-align: center;
+          color: var(--sapTextColor);
+          font-family: var(--sapFontFamily);
+          font-size: var(--sapFontSmallSize);
+      }
+
+      &:has(input) {
+          width: auto;
+          height: auto;
+          box-shadow: none;
+          padding-inline: 0;
+      }
+    }
+  }
 }