custom form elements

scss/ui/_inputs.custom.scss

@@ -1,3 +1,14 @@
+.custom-switch,
+.custom-radio,
+.custom-checkbox {
+  margin-bottom: 0;
+  user-select: none;
+
+  &:not(:first-child) {
+    margin-top: .25rem;
+  }
+}
+
 /**
 Icon input
  */
@@ -192,84 +203,6 @@ Selectgroup
   }
 }
 
-/*
-Switch
- */
-$custom-switch-width: 2.25rem !default;
-$custom-switch-height: 1.25rem !default;
-$custom-switch-padding: 1px !default;
-
-.custom-switch {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-  cursor: default;
-  user-select: none;
-}
-
-.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 {
-  position: relative;
-  display: inline-block;
-  width: $custom-switch-width;
-  height: $custom-switch-height;
-  vertical-align: bottom;
-  background: $gray-200;
-  border: 1px solid $border-color;
-  border-radius: 50px;
-  transition: .3s border-color, .3s background-color;
-
-  &::before {
-    position: absolute;
-    top: $custom-switch-padding;
-    left: $custom-switch-padding;
-    width: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
-    height: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
-    content: "";
-    background: #fff;
-    border-radius: 50%;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4);
-    transition: .3s left;
-  }
-
-  .custom-switch-input:checked ~ & {
-    background: $primary;
-
-    &::before {
-      left: calc(#{$custom-switch-width - $custom-switch-height} + #{$custom-switch-padding});
-    }
-  }
-
-  .custom-switch-input:focus ~ & {
-    border-color: $primary;
-    box-shadow: $input-btn-focus-box-shadow;
-  }
-}
-
-.custom-switch-description {
-  margin-left: .5rem;
-  color: $text-muted;
-  transition: .3s color;
-
-  .custom-switch-input:checked ~ & {
-    color: $body-color;
-  }
-}
-
 
 /**
 Image check