From 987715fd2408f4c65cf477132a5a8ca4bd18a045 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 13 Jan 2021 20:11:18 -0800
Subject: [PATCH] Drop transition on .form-check, keep on .form-switch

To avoid breaking changes, turns -check-transition to null, then adds a new -switch-transition variable
---
 scss/_variables.scss        | 5 +++--
 scss/forms/_form-check.scss | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index bea1f73fe4..3ad989a419 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -692,11 +692,11 @@ $form-check-padding-start:                $form-check-input-width + .5em !defaul
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-color:                  null !default;
 $form-check-label-cursor:                 null !default;
-$form-check-transition:                   background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$form-check-transition:                   null !default;
 
 $form-check-input-active-filter:          brightness(90%) !default;
 
-$form-check-input-bg:                     $body-bg !default;
+$form-check-input-bg:                     $input-bg !default;
 $form-check-input-border:                 1px solid rgba(0, 0, 0, .25) !default;
 $form-check-input-border-radius:          .25em !default;
 $form-check-radio-border-radius:          50% !default;
@@ -723,6 +723,7 @@ $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius:       $form-switch-width !default;
+$form-switch-transition:          background-position .15s ease-in-out !default;
 
 $form-switch-focus-color:         $input-focus-border-color !default;
 $form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 1d6d87363d..b34250a710 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -113,6 +113,7 @@
     background-image: escape-svg($form-switch-bg-image);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
+    @include transition($form-switch-transition);
 
     &:focus {
       background-image: escape-svg($form-switch-focus-bg-image);