fix(range): css adjustement

ovh · Jul 29, 2024 · 1a42894 · 1a42894
1 parent 94ea8d1
commit 1a42894
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/ods/src/components/range/src/components/ods-range/ods-range.scss b/packages/ods/src/components/range/src/components/ods-range/ods-range.scss
@@ -22,22 +22,22 @@
 
   &__min {
     position: absolute;
-    margin-top: 12px;
+    top: 12px;
     color: var(--ods-color-text);
   }
 
   &__max {
     position: absolute;
+    top: 12px;
     right: 0;
-    margin-top: 12px;
     color: var(--ods-color-text);
   }
 
   &__shadow-thumb {
     position: absolute;
     top: -2px;
     opacity: 0;
-    z-index: -2;
+    z-index: -1;
     width: 16px;
     height: 16px;
   }

diff --git a/packages/ods/src/style/_range.scss b/packages/ods/src/style/_range.scss
@@ -5,6 +5,7 @@ $ods-input-range-height: 8px;
 $ods-input-range-size-thumb: 16px;
 $range-background-color-active: var(--ods-color-primary-500);
 $range-background-color: var(--ods-color-neutral-300);
+$range-z-index-dual: 1;
 
 @mixin ods-range() {
   $range: &;
@@ -126,7 +127,7 @@ $range-background-color: var(--ods-color-neutral-300);
 
 @mixin ods-range-dual() {
   .ods-range__range-dual {
-    z-index: 1;
+    z-index: $range-z-index-dual;
     background: linear-gradient(to right,
       $range-background-color 0,
       $range-background-color min(var(--ods-range-value-percentage), var(--ods-range-value-percentage-dual)),
@@ -148,7 +149,7 @@ $range-background-color: var(--ods-color-neutral-300);
 
   .ods-range__range {
     position: absolute;
-    z-index: 2;
+    z-index: $range-z-index-dual + 1;
     margin-top: 6px;
     height: 0;
   }