diff options
Diffstat (limited to '')
-rw-r--r-- | site/content/docs/5.3/components/alerts.md (renamed from site/content/docs/5.2/components/alerts.md) | 35 |
1 files changed, 10 insertions, 25 deletions
diff --git a/site/content/docs/5.2/components/alerts.md b/site/content/docs/5.3/components/alerts.md index 8837ed4..d634ce2 100644 --- a/site/content/docs/5.2/components/alerts.md +++ b/site/content/docs/5.3/components/alerts.md @@ -10,6 +10,10 @@ toc: true Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). +{{< callout info >}} +**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops). +{{< /callout >}} + {{< example >}} {{< alerts.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -20,7 +24,7 @@ Alerts are available for any length of text, as well as an optional close button {{< /example >}} {{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ### Live example @@ -34,28 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th We use the following JavaScript to trigger our live alert demo: -```js -const alertPlaceholder = document.getElementById('liveAlertPlaceholder') - -const alert = (message, type) => { - const wrapper = document.createElement('div') - wrapper.innerHTML = [ - `<div class="alert alert-${type} alert-dismissible" role="alert">`, - ` <div>${message}</div>`, - ' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>', - '</div>' - ].join('') - - alertPlaceholder.append(wrapper) -} - -const alertTrigger = document.getElementById('liveAlertBtn') -if (alertTrigger) { - alertTrigger.addEventListener('click', () => { - alert('Nice, you triggered this alert message!', 'success') - }) -} -``` +{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}} ### Link color @@ -175,13 +158,15 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} -### Sass mixin +### Sass mixins + +{{< deprecated-in "5.3.0" >}} Used in combination with `$theme-colors` to create contextual modifier classes for our alerts. {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} -### Sass loop +### Sass loops Loop that generates the modifier classes with the `alert-variant()` mixin. |