diff options
| -rw-r--r-- | scss/_badge.scss | 1 | ||||
| -rw-r--r-- | scss/_helpers.scss | 1 | ||||
| -rw-r--r-- | scss/_mixins.scss | 1 | ||||
| -rw-r--r-- | scss/_nav.scss | 2 | ||||
| -rw-r--r-- | scss/_navbar.scss | 1 | ||||
| -rw-r--r-- | scss/_pagination.scss | 2 | ||||
| -rw-r--r-- | scss/_root.scss | 1 | ||||
| -rw-r--r-- | scss/_utilities.scss | 5 | ||||
| -rw-r--r-- | scss/_variables.scss | 5 | ||||
| -rw-r--r-- | scss/forms/_form-check.scss | 6 | ||||
| -rw-r--r-- | scss/helpers/_background.scss | 5 | ||||
| -rw-r--r-- | scss/mixins/_background-variant.scss | 7 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_gradients.scss | 12 | ||||
| -rw-r--r-- | site/content/docs/5.0/migration.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/colors.md | 6 |
16 files changed, 29 insertions, 30 deletions
diff --git a/scss/_badge.scss b/scss/_badge.scss index baa80a75f3..08df1b84a7 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -14,6 +14,7 @@ white-space: nowrap; vertical-align: baseline; @include border-radius($badge-border-radius); + @include gradient-bg(); // Empty badges collapse automatically &:empty { diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 06d931449f..1fdbc2959d 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -1,4 +1,3 @@ -@import "helpers/background"; @import "helpers/clearfix"; @import "helpers/colored-links"; @import "helpers/embed"; diff --git a/scss/_mixins.scss b/scss/_mixins.scss index b48761de9e..8c00f31d25 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -30,7 +30,6 @@ @import "mixins/table-variants"; // Skins -@import "mixins/background-variant"; @import "mixins/border-radius"; @import "mixins/box-shadow"; @import "mixins/gradients"; diff --git a/scss/_nav.scss b/scss/_nav.scss index e71f6839e2..60ad27a553 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -82,7 +82,7 @@ .nav-link.active, .show > .nav-link { color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; + @include gradient-bg($nav-pills-link-active-bg); } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 129351d193..35d7c7b72e 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -24,6 +24,7 @@ padding-right: $navbar-padding-x; // default: null padding-bottom: $navbar-padding-y; padding-left: $navbar-padding-x; // default: null + @include gradient-bg(); // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly. diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 3ef747d311..40b100b189 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -34,7 +34,7 @@ &.active .page-link { z-index: 3; color: $pagination-active-color; - background-color: $pagination-active-bg; + @include gradient-bg($pagination-active-bg); border-color: $pagination-active-border-color; } diff --git a/scss/_root.scss b/scss/_root.scss index 86f7493c2a..44eff17006 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -12,4 +12,5 @@ // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 --bs-font-sans-serif: #{inspect($font-family-sans-serif)}; --bs-font-monospace: #{inspect($font-family-monospace)}; + --bs-gradient: #{$gradient}; } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 2d886bc4fe..aa6c6eade6 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -416,6 +416,11 @@ $utilities: map-merge( ) ) ), + "gradient": ( + property: background-image, + class: bg, + values: (gradient: var(--bs-gradient)) + ), "white-space": ( property: white-space, class: text, diff --git a/scss/_variables.scss b/scss/_variables.scss index 6bbcc066bb..eeece96c02 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -222,6 +222,11 @@ $enable-negative-margins: false !default; $enable-deprecation-messages: true !default; $enable-important-utilities: true !default; +// Gradient +// +// The gradient which is added to components if `$enable-gradients` is `true` +// This gradient is also added to elements with `.bg-gradient` +$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; // Spacing // diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 31f554a41c..7f4f3cb0fa 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -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); } diff --git a/scss/helpers/_background.scss b/scss/helpers/_background.scss deleted file mode 100644 index 1c0a32a239..0000000000 --- a/scss/helpers/_background.scss +++ /dev/null @@ -1,5 +0,0 @@ -@if $enable-gradients { - @each $color, $value in $theme-colors { - @include bg-gradient-variant(".bg-gradient-#{$color}", $value); - } -} diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss deleted file mode 100644 index 8a5bca4a90..0000000000 --- a/scss/mixins/_background-variant.scss +++ /dev/null @@ -1,7 +0,0 @@ -// stylelint-disable declaration-no-important - -@mixin bg-gradient-variant($parent, $color) { - #{$parent} { - background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important; - } -} diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 5166583714..99ca559846 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -97,7 +97,7 @@ border-color: $color; &:checked { - @include gradient-bg(lighten($color, 10%), escape-svg($form-check-input-checked-bg-image)); + background-color: $color; } &:focus { diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index cecabc9139..8b87c0f15e 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -1,14 +1,10 @@ // Gradients -@mixin gradient-bg($color, $foreground: null) { +@mixin gradient-bg($color: null) { + background-color: $color; + @if $enable-gradients { - @if $foreground { - background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color); - } @else { - background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color); - } - } @else { - background-color: $color; + background-image: var(--bs-gradient); } } diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index bbaf43d8d3..a0fd30a469 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -46,6 +46,8 @@ Changes to our source Sass files and compiled CSS. - `color-yiq()` function and related variables are renamed to `color-contrast()` since it's not related to YIQ colorspace anymore. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/) - `$yiq-contrasted-threshold` is renamed `$min-contrast-ratio`. - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed `$color-contrast-dark` and `$color-contrast-light`. +- Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter. +- `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes. ## JavaScript diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index cef79ab662..86f4741466 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -39,12 +39,14 @@ Similar to the contextual text color classes, easily set the background of an el ## Background gradient -When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{< docsref "/customize/sass" >}}) to enable these classes and more. +By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom. + +Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`. {{< markdown >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -- `.bg-gradient-{{ .name }}` +<div class="p-3 mb-2 bg-{{ .name }} bg-gradient {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else }}text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div> {{- end -}} {{< /colors.inline >}} {{< /markdown >}} |