Add switch custom form control (#23004)

1 files changed, 41 insertions, 0 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index e999daf0c..71eb746b8 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -161,6 +161,47 @@
 }
 
 
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+  padding-left: $custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size);
+
+  .custom-control-label {
+    &::before {
+      left: -($custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size));
+      width: $custom-switch-width;
+      pointer-events: all;
+      border-radius: $custom-switch-indicator-border-radius;
+    }
+
+    &::after {
+      top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
+      left: calc(#{-($custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size))} + #{$custom-control-indicator-border-width * 2});
+      width: $custom-switch-indicator-size;
+      height: $custom-switch-indicator-size;
+      background-color: $custom-control-indicator-border-color;
+      border-radius: $custom-switch-indicator-border-radius;
+      @include transition(transform .15s ease-in-out, $custom-forms-transition);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-color: $custom-control-indicator-bg;
+      transform: translateX($custom-switch-width - $custom-control-indicator-size);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+
 // Select
 //
 // Replaces the browser default select with a custom one, mostly pulled from