initial

layers/ui/components/switch/styles.scss

@@ -0,0 +1,93 @@
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+
+.ui-switch {
+  $self: &;
+
+  display: inline-flex;
+
+  &__control {
+    position: relative;
+    border-radius: 5px;
+    background: var(--switch-background);
+    width: 28px;
+    height: 10px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    outline: none;
+    
+    #{$self}.is-loading & {
+      cursor: wait;
+    }
+
+    #{$self}.is-disabled & {
+      cursor: not-allowed;
+      background-color: var(--switch-disabled-background);
+    }
+  }
+
+  &__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  &__action {
+    --action-size: var(--switch-action-size, 16px);
+
+    position: absolute;
+    top: -3px;
+    left: 0;
+    width: var(--action-size);
+    height: var(--action-size);
+    background: var(--switch-off-action-background);
+    border-radius: 50%;
+    transition: .2s ease;
+    transition-property: background-color, left;
+
+    #{$self}.is-focused &,
+    #{$self}__control:hover & {
+      background: var(--switch-off-action-hover-background);
+    }
+
+    #{$self}.is-checked & {
+      background: var(--switch-on-action-background);
+      left: calc(100% - var(--action-size));
+    }
+
+    #{$self}:not(.is-disabled).is-checked.is-focused &,
+    #{$self}:not(.is-disabled).is-checked #{$self}__control:hover & {
+      background-color: var(--switch-on-action-hover-background);
+    }
+
+    #{$self}.is-disabled & {
+      background-color: var(--switch-off-action-disabled-background);
+    }
+
+    #{$self}.is-disabled.is-checked & {
+      background-color: var(--switch-on-action-disabled-background);
+    }
+  }
+
+  &__spinner {
+    --spinner-size: 12px;
+    --spinner-color: #{$clr-white};
+
+    margin: 2px;
+  }
+
+  /* prettier-ignore */
+  @include element-variant('switch', '', (
+          'background': $clr-grey-300,
+          'disabled-background': $clr-grey-200,
+          'off-action-background': $clr-grey-400,
+          'off-action-hover-background': $clr-grey-500,
+          'off-action-disabled-background': $clr-grey-300,
+          'on-action-background': $clr-cyan-500,
+          'on-action-hover-background': $clr-cyan-400,
+          'on-action-disabled-background': $clr-cyan-300
+  ));
+}