diff options
Diffstat (limited to 'site/content')
| -rw-r--r-- | site/content/docs/5.0/components/close-button.md | 21 | ||||
| -rw-r--r-- | site/content/docs/5.0/components/toasts.md | 54 | ||||
| -rw-r--r-- | site/content/docs/5.0/migration.md | 1 |
3 files changed, 34 insertions, 42 deletions
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 >}} <button type="button" class="btn-close" aria-label="Close"></button> +{{< /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 >}} <button type="button" class="btn-close" disabled aria-label="Close"></button> {{< /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" >}} +<button type="button" class="btn-close btn-close-white" aria-label="Close"></button> +<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button> +{{< /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" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> 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" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> 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" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">just now</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> 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" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> 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" >}} -<div class="toast d-flex" role="alert" aria-live="assertive" aria-atomic="true"> +<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> Hello, world! This is a toast message. </div> - <button type="button" class="ml-auto p-2 close" data-dismiss="toast" aria-label="Close"> - <svg class="bi bi-x" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"/> - <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"/> - </svg> - </button> + <button type="button" class="btn-close ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button> </div> {{< /example >}} @@ -135,16 +122,11 @@ Alternatively, you can also add additional controls and components to toasts. Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.text-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. {{< example class="bg-light" >}} -<div class="toast d-flex text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> +<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> Hello, world! This is a toast message. </div> - <button type="button" class="ml-auto p-2 close text-white" data-dismiss="toast" aria-label="Close"> - <svg class="bi bi-x" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"/> - <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"/> - </svg> - </button> + <button type="button" class="btn-close btn-close-white ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button> </div> {{< /example >}} @@ -159,9 +141,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. @@ -183,9 +163,7 @@ For systems that generate more notifications, consider using a wrapping element {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">just now</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> See? Just like this. @@ -197,9 +175,7 @@ For systems that generate more notifications, consider using a wrapping element {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Heads up, toasts will stack automatically @@ -221,9 +197,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. @@ -256,9 +230,7 @@ When using `autohide: false`, you must add a close button to allow users to dism {{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}} <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 01f33d444..91cfb456d 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -53,6 +53,7 @@ toc: true - Renamed `.close` to `.btn-close` for a less generic name. - Close buttons now use a `background-image` (embedded SVG) instead of a `×` in the HTML, allowing for easier customization without the need to touch your markup. - Added new variables to better control the customization. +- Added new `.btn-close-white` variant that uses `backdrop-filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds. #### Navs |