diff options
| -rw-r--r-- | docs/4.0/migration.md | 1 | ||||
| -rw-r--r-- | scss/_custom-forms.scss | 34 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 7 |
3 files changed, 33 insertions, 9 deletions
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index b12c733628..97ad847eef 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 diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 54af829b61..4e38021df0 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); } @@ -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 9fe889cf56..b7e664db73 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); |