diff options
| author | Martijn Cuppens <[email protected]> | 2020-04-14 17:28:20 +0300 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2020-05-15 15:03:12 +0300 |
| commit | b531bda07cbea2e124194aefe3b8597b3ac2578e (patch) | |
| tree | 0c39842174e325622e65cbafe5e31b512e464500 /site/content/docs | |
| parent | bbeda10e372f33e80fbc2095a71d5a1fc86f8e30 (diff) | |
| download | bootstrap-b531bda07cbea2e124194aefe3b8597b3ac2578e.tar.xz bootstrap-b531bda07cbea2e124194aefe3b8597b3ac2578e.zip | |
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
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.0/migration.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/colors.md | 6 |
2 files changed, 6 insertions, 2 deletions
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index bbaf43d8d..a0fd30a46 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 cef79ab66..86f474146 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 >}} |