feat: SW-1422 Implemented Switch/Toggle component

2025-01-30 11:38:38 +01:00
parent 1b5b09d7a6
commit 6741a0a21c
3 changed files with 102 additions and 0 deletions
--- a/components/TempDesignSystem/Form/Switch/switch.module.css
+++ b/components/TempDesignSystem/Form/Switch/switch.module.css
@@ -0,0 +1,44 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.switch {
+  width: 40px;
+  height: 24px;
+  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  background: var(--UI-Input-Controls-Surface-Normal);
+  border-radius: 24px;
+  transition: all 200ms;
+  display: block;
+
+  &:before {
+    content: "";
+    display: block;
+    margin: 2px;
+    width: 16px;
+    height: 16px;
+    background: var(--UI-Input-Controls-Border-Normal);
+    border-radius: 100%;
+    transition: all 200ms;
+  }
+}
+
+.container[data-selected] {
+  .switch {
+    border-color: var(--UI-Input-Controls-Fill-Selected);
+    background: var(--UI-Input-Controls-Fill-Selected);
+
+    &:before {
+      background: var(--UI-Input-Controls-Surface-Normal);
+      transform: translateX(100%);
+    }
+  }
+}
+
+.container[data-focus-visible] .switch {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
+}