From 4829350a461f05774149469e8bb2d818351d0c4e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 24 Nov 2017 14:26:56 -0800 Subject: 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 --- docs/4.0/migration.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs') diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index b12c73362..97ad847ee 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 -- cgit v1.2.3