1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00

Improve gradients

- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled
This commit is contained in:
Martijn Cuppens
2020-04-14 17:28:20 +03:00
committed by XhmikosR
parent bbeda10e37
commit b531bda07c
16 changed files with 29 additions and 30 deletions

View File

@@ -53,7 +53,7 @@
&[type="checkbox"] {
@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-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
} @else {
background-image: escape-svg($form-check-input-checked-bg-image);
}
@@ -61,7 +61,7 @@
&[type="radio"] {
@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-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
@@ -73,7 +73,7 @@
border-color: $form-check-input-indeterminate-border-color;
@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-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
}