Update .form-check to properly support gradients when enabled (#29338)

4 files changed, 38 insertions, 10 deletions

diff --git a/scss/_variables.scss b/scss/_variables.scss
index e56e516d4..2fe147874 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -660,9 +660,9 @@ $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xml
 
 $form-switch-color:               rgba(0, 0, 0, .25) !default;
 $form-switch-width:               2em !default;
-$form-switch-height:              $form-check-input-width !default;
 $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;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 88b4ab6ef..40eb7ce08 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -48,20 +48,35 @@
     border-color: $form-check-input-checked-border-color;
 
     &[type="checkbox"] {
-      background-image: escape-svg($form-check-input-checked-bg-image);
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-input-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
+        background-size: $form-check-input-checked-bg-size, auto;
+      } @else {
+        background-image: escape-svg($form-check-input-checked-bg-image);
+      }
     }
 
     &[type="radio"] {
-      background-image: escape-svg($form-check-radio-checked-bg-image);
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-radio-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
+        background-size: $form-check-input-checked-bg-size, auto;
+      } @else {
+        background-image: escape-svg($form-check-radio-checked-bg-image);
+      }
     }
   }
 
   &[type="checkbox"]:indeterminate {
     background-color: $form-check-input-indeterminate-bg-color;
-    background-image: escape-svg($form-check-input-indeterminate-bg-image);
     background-repeat: $form-check-input-indeterminate-bg-repeat;
     background-position: $form-check-input-indeterminate-bg-position;
-    background-size: $form-check-input-indeterminate-bg-size;
+    @if $enable-gradients {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
+      background-size: $form-check-input-checked-bg-size, auto;
+    } @else {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      background-size: $form-check-input-indeterminate-bg-size;
+    }
     border-color: $form-check-input-indeterminate-border-color;
   }
 
@@ -95,7 +110,7 @@
     background-image: escape-svg($form-switch-bg-image);
     background-repeat: no-repeat;
     background-position: left center;
-    background-size: calc(#{$form-switch-height} - 2px); // Get a 1px separation
+    background-size: $form-switch-bg-size; // Get a 1px separation
     @include border-radius($form-switch-border-radius);
     // Todo: Figure out how to tackle these, with or without mixin?
     // transition: $form-switch-transition;
@@ -106,8 +121,14 @@
     }
 
     &:checked {
-      background-image: escape-svg($form-switch-checked-bg-image);
       background-position: $form-switch-checked-bg-position;
+
+      @if $enable-gradients {
+        background-image: escape-svg($form-switch-checked-bg-image), linear-gradient(180deg, $form-check-input-checked-bg-color, lighten($form-check-input-checked-bg-color, 10%));
+        background-size: $form-switch-bg-size, auto;
+      } @else {
+        background-image: escape-svg($form-switch-checked-bg-image);
+      }
     }
   }
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index cdc595907..25da71a7f 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -122,7 +122,7 @@
       border-color: $color;
 
       &:checked {
-        @include gradient-bg(lighten($color, 10%));
+        @include gradient-bg(lighten($color, 10%), escape-svg($form-check-input-checked-bg-image));
       }
 
       &:focus {
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 88c4d64b7..13547401a 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -1,8 +1,15 @@
 // Gradients
 
-@mixin gradient-bg($color) {
+@mixin gradient-bg($color, $foreground: null) {
   @if $enable-gradients {
-    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+    @if $foreground {
+      background-color: $color;
+      background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
+      background-repeat: no-repeat;
+      background-size: 1em, auto;
+    } @else {
+      background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+    }
   } @else {
     background-color: $color;
   }