diff options
| author | Mark Otto <[email protected]> | 2019-10-28 00:12:07 -0700 |
|---|---|---|
| committer | Martijn Cuppens <[email protected]> | 2019-10-28 08:12:07 +0100 |
| commit | b81a23a60d1a0c137dfeff17ce9f85c80ca9fe5c (patch) | |
| tree | e376af27001f732dd6d3f35b2814ad490b3374ca /scss/forms | |
| parent | 9c7bc1a1111940158050db8aaf66340e8ce4d558 (diff) | |
| download | bootstrap-b81a23a60d1a0c137dfeff17ce9f85c80ca9fe5c.tar.xz bootstrap-b81a23a60d1a0c137dfeff17ce9f85c80ca9fe5c.zip | |
Update .form-check to properly support gradients when enabled (#29338)
Diffstat (limited to 'scss/forms')
| -rw-r--r-- | scss/forms/_form-check.scss | 33 |
1 files changed, 27 insertions, 6 deletions
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 88b4ab6ef..40eb7ce08 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -48,20 +48,35 @@ border-color: $form-check-input-checked-border-color; &[type="checkbox"] { - background-image: escape-svg($form-check-input-checked-bg-image); + @if $enable-gradients { + background-image: escape-svg($form-check-input-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color); + background-size: $form-check-input-checked-bg-size, auto; + } @else { + background-image: escape-svg($form-check-input-checked-bg-image); + } } &[type="radio"] { - background-image: escape-svg($form-check-radio-checked-bg-image); + @if $enable-gradients { + background-image: escape-svg($form-check-radio-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color); + background-size: $form-check-input-checked-bg-size, auto; + } @else { + background-image: escape-svg($form-check-radio-checked-bg-image); + } } } &[type="checkbox"]:indeterminate { background-color: $form-check-input-indeterminate-bg-color; - background-image: escape-svg($form-check-input-indeterminate-bg-image); background-repeat: $form-check-input-indeterminate-bg-repeat; background-position: $form-check-input-indeterminate-bg-position; - background-size: $form-check-input-indeterminate-bg-size; + @if $enable-gradients { + background-image: escape-svg($form-check-input-indeterminate-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color); + background-size: $form-check-input-checked-bg-size, auto; + } @else { + background-image: escape-svg($form-check-input-indeterminate-bg-image); + background-size: $form-check-input-indeterminate-bg-size; + } border-color: $form-check-input-indeterminate-border-color; } @@ -95,7 +110,7 @@ background-image: escape-svg($form-switch-bg-image); background-repeat: no-repeat; background-position: left center; - background-size: calc(#{$form-switch-height} - 2px); // Get a 1px separation + background-size: $form-switch-bg-size; // Get a 1px separation @include border-radius($form-switch-border-radius); // Todo: Figure out how to tackle these, with or without mixin? // transition: $form-switch-transition; @@ -106,8 +121,14 @@ } &:checked { - background-image: escape-svg($form-switch-checked-bg-image); background-position: $form-switch-checked-bg-position; + + @if $enable-gradients { + background-image: escape-svg($form-switch-checked-bg-image), linear-gradient(180deg, $form-check-input-checked-bg-color, lighten($form-check-input-checked-bg-color, 10%)); + background-size: $form-switch-bg-size, auto; + } @else { + background-image: escape-svg($form-switch-checked-bg-image); + } } } } |