From e24586c96397fcab1f63268433396b9fb988a31c Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 6 Nov 2017 23:13:21 -0600
Subject: [PATCH 1/5] 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
---
 scss/_custom-forms.scss |  9 ++++-----
 scss/_variables.scss    |  4 ++--
 scss/mixins/_forms.scss | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 455a208865aa..4fa9b6686f0c 100644
--- 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);
   }
 
@@ -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);
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 99a5179a8119..14f2c98e07bf 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index cea803de3380..eef1a13528f2 100644
--- a/scss/mixins/_forms.scss
+++ b/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;
+  }
+}

From 43201493af33d93e8ed811f0d236fad52bd5045a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 14 Nov 2017 20:54:30 -0800
Subject: [PATCH 2/5] restore default vars

---
 scss/_variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 93fe2fca78f5..acea370fb23e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -98,8 +98,8 @@ $yiq-text-light: $white !default;
 
 $enable-caret:              true !default;
 $enable-rounded:            true !default;
-$enable-shadows:            true !default;
-$enable-gradients:          true !default;
+$enable-shadows:            false !default;
+$enable-gradients:          false !default;
 $enable-transitions:        true !default;
 $enable-hover-media-query:  false !default;
 $enable-grid-classes:       true !default;

From b9689360585d1d707ad46e06be4ff0bcc3ed1a3e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 14 Nov 2017 21:41:22 -0800
Subject: [PATCH 3/5] 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.
---
 scss/_custom-forms.scss | 31 +++++++++++++++++++++++++------
 scss/mixins/_forms.scss |  7 ++++++-
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 4fa9b6686f0c..91c363e47934 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -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,12 +85,20 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    @include custom-check-bg($custom-control-indicator-checked-bg, $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 {
-    @include custom-check-bg($custom-checkbox-indicator-indeterminate-bg, $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;
+    }
   }
 }
 
@@ -97,7 +112,11 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    @include custom-check-bg($custom-control-indicator-checked-bg, $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 822994278220..5e75bb5e35c8 100644
--- 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);

From d2b144a7ca5b38f238e70c99ccdfc52f5c2db91c Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 14 Nov 2017 21:42:04 -0800
Subject: [PATCH 4/5] remove now unused mixin

---
 scss/mixins/_forms.scss | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 5e75bb5e35c8..b7e664db7335 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -119,21 +119,3 @@
     }
   }
 }
-
-// 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;
-  }
-}

From aeff51450d29b751211808de2c124bca67f6c4b2 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 14 Nov 2017 21:50:30 -0800
Subject: [PATCH 5/5] mention change in migration docs

---
 docs/4.0/migration.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index b12c733628c1..97ad847eef96 100644
--- 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