From 2f40cf25f7161f9d4088f31fcc8e161724bd3116 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Thu, 3 Oct 2019 11:14:35 +0300
Subject: [PATCH] drop usage of thumb size css variable

---
 src/common/Slider/Slider.js   |  8 +++++---
 src/common/Slider/styles.less | 19 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/common/Slider/Slider.js b/src/common/Slider/Slider.js
index 28eca759e..e632dac95 100644
--- a/src/common/Slider/Slider.js
+++ b/src/common/Slider/Slider.js
@@ -115,9 +115,11 @@ const Slider = ({ className, value, minimumValue, maximumValue, onSlide, onCompl
                 <div className={styles['track-before']} style={{ width: `calc(100% * ${thumbPosition})` }} />
             </div>
             <div className={styles['layer']}>
-                <svg className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} viewBox={'0 0 10 10'}>
-                    <circle cx={'5'} cy={'5'} r={'5'} />
-                </svg>
+                <div className={styles['thumb-container']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }}>
+                    <svg className={styles['thumb']} viewBox={'0 0 10 10'}>
+                        <circle cx={'5'} cy={'5'} r={'5'} />
+                    </svg>
+                </div>
             </div>
         </div>
     );
diff --git a/src/common/Slider/styles.less b/src/common/Slider/styles.less
index 741400160..87e2a5822 100644
--- a/src/common/Slider/styles.less
+++ b/src/common/Slider/styles.less
@@ -9,6 +9,7 @@ html.active-slider-within {
 .slider-container {
     position: relative;
     z-index: 0;
+    overflow: visible;
     cursor: pointer;
 
     .layer {
@@ -21,25 +22,31 @@ html.active-slider-within {
         display: flex;
         flex-direction: row;
         align-items: center;
+        overflow: visible;
     }
 
     .track {
         flex: 1;
-        height: calc(var(--thumb-size) / 3);
+        height: 30%;
         background-color: var(--track-color);
     }
 
     .track-before {
         flex: none;
-        height: calc(var(--thumb-size) / 3);
+        height: 30%;
         background-color: var(--track-before-color);
     }
 
-    .thumb {
+    .thumb-container {
         flex: none;
-        width: var(--thumb-size);
-        height: var(--thumb-size);
+        align-self: stretch;
         transform: translateX(-50%);
-        fill: var(--thumb-color);
+
+        .thumb {
+            display: block;
+            width: 100%;
+            height: 100%;
+            fill: var(--thumb-color);
+        }
     }
 }
\ No newline at end of file