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

diff --git a/scss/_variables.scss b/scss/_variables.scss
index e56e516d4fed95bb248156bced42efc65121b47c..2fe14787457d1ebf6bca3f683c3f8cc55b32afba 100644 (file)
--- 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 88b4ab6efa3ca16871024ebc6d58f99e9e9570de..40eb7ce089ca53c3486639d2cb165e5f6abe326b 100644 (file)
--- 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 cdc5959073febcc21c6f2bcdc2f84970167b9319..25da71a7fb7998a6aee970677c28fd4bf605825b 100644 (file)
--- 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 88c4d64b7f7ef50faabf977b168076bb9750da17..13547401a3cd8ccfc470ec9ef110386d5d9cef05 100644 (file)
--- 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;
   }