feat: add design system

2026-03-12 00:42:41 +02:00
parent fcb8dab8a0
commit 55bf63e215
93 changed files with 1647 additions and 86 deletions
--- a/src/components/form/RangeInput/RangeInput.module.css
+++ b/src/components/form/RangeInput/RangeInput.module.css
@@ -0,0 +1,82 @@
+@layer base {
+  .rangeInput {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+
+    --thumb-size: 30px;
+    --track-height: 10px;
+    width: 100%;
+    padding: calc(var(--thumb-size) / 2) 0;
+    height: 10px;
+
+    &::-webkit-slider-runnable-track {
+      border-radius: 9px;
+      height: var(--track-height);
+      background: #0000004d;
+      border-top: 1px solid #472715;
+      box-shadow:
+        0px 4px 2px 0px #00000040 inset,
+        0px -1.5px 0px 0px #8a582d inset;
+    }
+
+    &::-moz-range-track {
+      border-radius: 9px;
+      height: var(--track-height);
+      background: #0000004d;
+      border-top: 1px solid #472715;
+      box-shadow:
+        0px 4px 2px 0px #00000040 inset,
+        0px -1.5px 0px 0px #8a582d inset;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+      margin-top: calc((var(--track-height) / 2) - var(--thumb-size) / 2);
+      background: #895428;
+      border-radius: 50%;
+      box-shadow:
+        -2px 0px 1px 0px #00000040 inset,
+        2px 0px 1px 0px #00000040 inset,
+        0px 2px 1px 0px #be7f4a inset,
+        0px -2px 1px 0px #3a1c09 inset,
+        0px 1px 0px 0px #00000033;
+      transition: transform 0.1s ease;
+    }
+
+    &:active::-webkit-slider-thumb {
+      transform: scale(1.1);
+    }
+
+    ::-moz-range-thumb {
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+      margin-top: calc((var(--track-height) / 2) - var(--thumb-size) / 2);
+      background: #895428;
+      border-radius: 50%;
+      box-shadow:
+        -2px 0px 1px 0px #00000040 inset,
+        2px 0px 1px 0px #00000040 inset,
+        0px 2px 1px 0px #be7f4a inset,
+        0px -2px 1px 0px #3a1c09 inset,
+        0px 1px 0px 0px #00000033;
+      transition: transform 0.1s ease;
+    }
+
+    &:active::-moz-range-thumb {
+      transform: scale(1.1);
+    }
+  }
+
+  .dragging::-webkit-slider-thumb {
+    transform: scale(1.1);
+  }
+
+  .dragging::-moz-range-thumb {
+    transform: scale(1.1);
+  }
+}