Rewrite custom form check backgrounds (#24697)

* 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

* restore default vars

* Revamp custom check and radio backgrounds

Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.

* remove now unused mixin

* mention change in migration docs

diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index b12c733628c17d90212facd0b043b285582aacb8..97ad847eef96ae6f7e317093be0fe96271606586 100644 (file)
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -11,6 +11,7 @@ toc: true
 While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.
 
 - Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code.
+- Changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-indicator` for the fill and gradient and `.custom-control-indicator::before` handles the icon.
 
 ## Beta 2 changes
 

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 54af829b61357156d1729071f415301847063bbb..4e38021df0e16aa6f907e8734ebf8bed86d1e4fe 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/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);
   }
 
@@ -62,10 +62,17 @@
   pointer-events: none;
   user-select: none;
   background-color: $custom-control-indicator-bg;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: $custom-control-indicator-bg-size;
   @include box-shadow($custom-control-indicator-box-shadow);
+
+  &::before {
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    content: "";
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $custom-control-indicator-bg-size;
+  }
 }
 
 // Checkboxes
@@ -78,13 +85,20 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-checkbox-indicator-icon-checked;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+
+    &::before {
+      background-image: $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 gradient-bg($custom-control-indicator-checked-bg);
     @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
+
+    &::before {
+      background-image: $custom-checkbox-indicator-icon-indeterminate;
+    }
   }
 }
 
@@ -98,7 +112,11 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-radio-indicator-icon-checked;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+
+    &::before {
+      background-image: $custom-radio-indicator-icon-checked;
+    }
   }
 }
 

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 9fe889cf562372ece754ff24c437945c0677737d..b7e664db7335e3a825ecbf71902c9779a709dc3c 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -84,11 +84,16 @@
     .was-validated &:#{$state},
     &.is-#{$state} {
       ~ .custom-control-indicator {
-        background-color: rgba($color, .4);
+        background-color: lighten($color, 25%);
       }
       ~ .custom-control-description {
         color: $color;
       }
+      &:checked {
+        ~ .custom-control-indicator {
+          @include gradient-bg(lighten($color, 10%));
+        }
+      }
       &:focus {
         ~ .custom-control-indicator {
           box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);