add custom switch component

scss/tabler.scss

@@ -42,6 +42,7 @@
 @import "ui/pagination";
 @import "ui/toasts";
 @import "ui/steps";
+@import "ui/switch";
 
 @import "ui/highlight";
 @import "ui/examples";

scss/ui/_switch.scss

+$custom-switch-width: 2.25rem;
+$custom-switch-height: 1.25rem;
+$custom-switch-padding: 1px;
+
+.custom-switch {
+  user-select: none;
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+}
+
+.custom-switch-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.custom-switches-stacked {
+  display: flex;
+  flex-direction: column;
+
+  .custom-switch {
+    margin-bottom: .5rem;
+  }
+}
+
+.custom-switch-indicator {
+  display: inline-block;
+  height: $custom-switch-height;
+  width: $custom-switch-width;
+  background: $gray-200;
+  border-radius: 50px;
+  position: relative;
+  vertical-align: bottom;
+  border: 1px solid $border-color;
+  transition: .3s border-color, .3s background-color;
+
+  &:before {
+    content: '';
+    position: absolute;
+    height: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
+    width: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
+    top: $custom-switch-padding;
+    left: $custom-switch-padding;
+    background: #fff;
+    border-radius: 50%;
+    transition: .3s left;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  }
+
+  .custom-switch-input:checked ~ & {
+    background: $primary;
+
+    &:before {
+      left: calc(#{$custom-switch-width - $custom-switch-height} + #{$custom-switch-padding})
+    }
+  }
+
+  .custom-switch-input:focus ~ & {
+    box-shadow: $input-btn-focus-box-shadow;
+    border-color: $primary;
+  }
+}
+
+.custom-switch-description {
+  margin-left: .5rem;
+  color: $text-muted;
+  transition: .3s color;
+
+  .custom-switch-input:checked ~ & {
+    color: $body-color;
+  }
+}