diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-03-18 00:48:36 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-18 00:48:36 +0300 |
| commit | a4841afa26fb066a53c6a70e87d906e3e309a903 (patch) | |
| tree | 7c0962c66b8a839abd2a49c312d20307a4c6ecbf /site | |
| parent | 71582eabff54b6ff98aa471350258da70a14c802 (diff) | |
Convert toasts to CSS variables (#35961)
* Convert toasts to CSS variables
* bundlewatch
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.1/components/toasts.md | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index a982c47db3..fdfd9caf7d 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -324,10 +324,18 @@ When using `autohide: false`, you must add a close button to allow users to dism While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`. -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="toast-css-vars" file="scss/_toasts.scss" >}} + +### Sass variables + {{< scss-docs name="toast-variables" file="scss/_variables.scss" >}} ## Usage |