mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-02 18:02:37 +02:00
Code Issues Releases Wiki Activity

Rewrite custom form check backgrounds (#24697)

Browse Source 
* 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
This commit is contained in:
Mark Otto
2017-11-24 14:26:56 -08:00
committed by GitHub
parent fff0116f70
commit 4829350a46
3 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
scss/mixins/_forms.scss
View File

@@ -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);