From fae9aef3dbc9674eadd4d0187b58653bcef96a2a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Sep 2020 19:47:05 -0700 Subject: Update toasts dismiss (moving more styles to CSS instead of utilities), fix some more close examples, and add a new .btn-close-white variant --- site/content/docs/5.0/components/close-button.md | 21 ++++++++- site/content/docs/5.0/components/toasts.md | 54 ++++++------------------ site/content/docs/5.0/migration.md | 1 + 3 files changed, 34 insertions(+), 42 deletions(-) (limited to 'site/content/docs') diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md index 1a83d7a96..ba4d17bdc 100644 --- a/site/content/docs/5.0/components/close-button.md +++ b/site/content/docs/5.0/components/close-button.md @@ -3,11 +3,30 @@ layout: docs title: Close button description: A generic close button for dismissing content like modals and alerts. group: components +toc: true --- -**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` and `user-select: none` applied to preventing hover and active states from triggering. +## Example + +Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`. {{< example >}} +{{< /example >}} + +## Disabled state + +Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering. + +{{< example >}} {{< /example >}} + +## White variant + +Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `backdrop-filter` property to invert the `background-image`. + +{{< example class="bg-dark" >}} + + +{{< /example >}} diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index ee8eba458..06d4fa37e 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -34,9 +34,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap 11 mins ago - +
Hello, world! This is a toast message. @@ -54,9 +52,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap 11 mins ago - +
Hello, world! This is a toast message. @@ -74,9 +70,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap just now - +
See? Just like this. @@ -88,9 +82,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} Bootstrap 2 seconds ago - +
Heads up, toasts will stack automatically @@ -103,16 +95,11 @@ When you have multiple toasts, we default to vertically stacking them in a reada Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout. {{< example class="bg-light" >}} -