filters + fullscreen + components

2024-04-27 18:30:04 +05:00
parent c26d766429
commit 17aea1fff1
27 changed files with 632 additions and 79 deletions
@@ -72,7 +72,105 @@ body {
  }

  .left-slider-btn-offset {
-    /* left: clamp(230px, 3.8007rem + 13.2075vw, 401px); */
    left: clamp(230px, 0.5927rem + 17.2144vw, 370px);
  }
+
+  .slider {
+    position: relative;
+  }
+
+  .slider__track,
+  .slider__range {
+    border-radius: 3px;
+    height: 5px;
+    position: absolute;
+  }
+
+  .slider__track {
+    background-color: #000;
+    width: 100%;
+    z-index: 1;
+  }
+
+  .slider__range {
+    background-color: #9fe5e1;
+    z-index: 2;
+  }
+
+  /* Removing the default appearance */
+  .thumb,
+  .thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    width: 200px;
+    outline: none;
+  }
+
+  .thumb--zindex-3 {
+    z-index: 3;
+  }
+
+  .thumb--zindex-4 {
+    z-index: 4;
+  }
+
+  /* For Chrome browsers */
+  .thumb::-webkit-slider-thumb {
+    background-color: #f1f5f7;
+    border: none;
+    border-radius: 50%;
+    box-shadow: 0 0 1px 1px #ced4da;
+    cursor: pointer;
+    height: 18px;
+    width: 18px;
+    margin-top: 4px;
+    pointer-events: all;
+    position: relative;
+  }
+
+  /* For Firefox browsers */
+  .thumb::-moz-range-thumb {
+    background-color: #f1f5f7;
+    border: none;
+    border-radius: 50%;
+    box-shadow: 0 0 1px 1px #ced4da;
+    cursor: pointer;
+    height: 18px;
+    width: 18px;
+    margin-top: 4px;
+    pointer-events: all;
+    position: relative;
+  }
+
+  .slider__left-value,
+  .slider__right-value {
+    color: #dee2e6;
+    font-size: 12px;
+    margin-top: 20px;
+    position: absolute;
+  }
+
+  .slider__left-value {
+    left: 6px;
+  }
+
+  .slider__right-value {
+    right: -4px;
+  }
+
+  input[type="number"].input_number {
+    -moz-appearance: textfield;
+  }
+
+  input.input_number::-webkit-outer-spin-button,
+  input.input_number::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }