fix(styles): bring Slider tooltip styling from FNGX [ci visual]

SAP · Sep 6, 2024 · 2185a88 · 2185a88
1 parent d7ca723
commit 2185a88
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 2 deletions.
diff --git 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
@@ -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 */
+        user-select: none; /* Safari */
+        user-select: none; /* Konqueror HTML */
+        user-select: none; /* Old versions of Firefox */
+        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;
+      }
+    }
+  }
 }