Add checkbox transition (#30528)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6f9abfa38727b85f8a5e52cb2c2a8e956e49d462..ec1ba224dea1b663591bf3cf6c2f5229ecfeb400 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -621,6 +621,7 @@ $form-check-padding-left:                 $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-input-active-filter:          brightness(90%) !default;
 
@@ -654,8 +655,6 @@ $form-switch-padding-left:        $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-bg-size:             contain !default;
 $form-switch-border-radius:       $form-switch-width !default;
-$form-switch-transition:          .2s ease-in-out !default;
-$form-switch-transition-property: background-position, background-color !default;
 
 $form-switch-focus-color:         hsla(211, 100%, 75%, 1) !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 3666b6ab47c77109ede7d7999c749c88ee939953..572bd547e4c8dd2fa004be785dc1fd29032f631a 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -23,6 +23,7 @@
   border: $form-check-input-border;
   appearance: none;
   color-adjust: exact; // Keep themed appearance for print
+  @include transition($form-check-transition);
 
   &[type="checkbox"] {
     @include border-radius($form-check-input-border-radius);
@@ -119,9 +120,6 @@
     background-size: $form-switch-bg-size; // Get a 1px separation
     @include border-radius($form-switch-border-radius);
     color-adjust: exact; // Keep themed appearance for print
-    // Todo: Figure out how to tackle these, with or without mixin?
-    // transition: $form-switch-transition;
-    // transition-property: $form-switch-transition-property;
 
     &:focus {
       background-image: escape-svg($form-switch-focus-bg-image);