From 4e2cb7302fb8cfb4a2490e5af05a90e5d2c16aa7 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 14 Feb 2022 14:38:36 +0100 Subject: [PATCH] feature (alerts): add dark background in documentation --- site/content/docs/5.1/components/alerts.md | 48 ++++++++++++---------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md index 04960c2e38..5b95b50aa6 100644 --- a/site/content/docs/5.1/components/alerts.md +++ b/site/content/docs/5.1/components/alerts.md @@ -91,27 +91,6 @@ Alerts come with a smaller variant: `.alert-sm`. {{< /example >}} -### Dark background - -{{< example class="bg-dark" >}} - - - - -{{< /example >}} - ### Additional content Alerts can also contain additional HTML elements like headings, links and paragraphs. @@ -151,6 +130,31 @@ You can see this in action with a live demo: When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. {{< /callout >}} +### Dark background + +Alerts come with dark variants using `.alert-dark`. + +{{< example class="bg-dark" >}} +
+ + + +
+{{< /example >}} + ## CSS Added in v5.2.0 @@ -163,6 +167,8 @@ As part of Boosted's evolving CSS variables approach, alerts now use local CSS v {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} +{{< scss-docs name="links-theme-variables" file="scss/_variables.scss" >}} + ### Sass mixin Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.