Rewrite custom form check backgrounds

Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.

Fixes #24598

Author: mdo

scss/_custom-forms.scss

@@ -33,7 +33,7 @@
 
   &:active ~ .custom-control-indicator {
     color: $custom-control-indicator-active-color;
-    @include gradient-bg($custom-control-indicator-active-bg);
+    background-color: $custom-control-indicator-active-bg;
     @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
@@ -78,12 +78,11 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-checkbox-indicator-icon-checked;
+    @include custom-check-bg($custom-control-indicator-checked-bg, $custom-checkbox-indicator-icon-checked);
   }
 
   .custom-control-input:indeterminate ~ .custom-control-indicator {
-    background-color: $custom-checkbox-indicator-indeterminate-bg;
-    background-image: $custom-checkbox-indicator-icon-indeterminate;
+    @include custom-check-bg($custom-checkbox-indicator-indeterminate-bg, $custom-checkbox-indicator-icon-indeterminate);
     @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
   }
 }
@@ -98,7 +97,7 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-radio-indicator-icon-checked;
+    @include custom-check-bg($custom-control-indicator-checked-bg, $custom-radio-indicator-icon-checked);
   }
 }
 

scss/_variables.scss

@@ -98,8 +98,8 @@ $yiq-text-light: $white !default;
 
 $enable-caret:              true !default;
 $enable-rounded:            true !default;
-$enable-shadows:            false !default;
-$enable-gradients:          false !default;
+$enable-shadows:            true !default;
+$enable-gradients:          true !default;
 $enable-transitions:        true !default;
 $enable-hover-media-query:  false !default;
 $enable-grid-classes:       true !default;

scss/mixins/_forms.scss

@@ -114,3 +114,21 @@
     }
   }
 }
+
+// Custom check backgrounds
+//
+// We use this for multiple form checks (radio and checkbox) and multiple states
+// (checked and active).
+
+@mixin custom-check-bg($bg-color, $bg-image) {
+  background-color: $bg-color;
+
+  @if $enable-gradients {
+    background-image: $bg-image, linear-gradient(180deg, mix($body-bg, $bg-color, 15%), $bg-color);
+    background-repeat: no-repeat, repeat-x;
+    background-position: center center;
+    background-size: $custom-control-indicator-bg-size, 100% 100%;
+  } @else {
+    background-image: $bg-image;
+  }
+}