diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-02-25 19:49:02 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-25 19:49:02 +0300 |
commit | 28d9aaf6708b4b84e7e70a62b78d8b22a51d990d (patch) | |
tree | 02a0e2fd229ba3b5af9958e940d637d55639066e | |
parent | 2c5a16ff8bdffe64361c4e2b8ad2a2dd57c6fa14 (diff) |
Add z-index for .toast-container (#35859)
* Add z-index for .toast-container
- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better
Fixes $34028
* Remove unnecessary z-index from docs examples
-rw-r--r-- | scss/_toasts.scss | 2 | ||||
-rw-r--r-- | scss/_variables.scss | 1 | ||||
-rw-r--r-- | site/content/docs/5.1/components/toasts.md | 6 |
3 files changed, 6 insertions, 3 deletions
diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 0a2d6ec875..889a936851 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -20,6 +20,8 @@ } .toast-container { + position: absolute; + z-index: $zindex-toast; width: max-content; max-width: 100%; pointer-events: none; diff --git a/scss/_variables.scss b/scss/_variables.scss index 566c967b94..5dd78ae2a8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1041,6 +1041,7 @@ $zindex-modal-backdrop: 1050 !default; $zindex-modal: 1055 !default; $zindex-popover: 1070 !default; $zindex-tooltip: 1080 !default; +$zindex-toast: 1090 !default; // scss-docs-end zindex-stack diff --git a/site/content/docs/5.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index 10093b6bc6..e8a9190958 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -49,7 +49,7 @@ Previously, our scripts dynamically added the `.hide` class to completely hide a Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default. -<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11"> +<div class="toast-container position-fixed bottom-0 end-0 p-3"> <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} @@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low ```html <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> -<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11"> +<div class="toast-container position-fixed bottom-0 end-0 p-3"> <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> @@ -122,7 +122,7 @@ Toasts are slightly translucent to blend in with what's below them. You can stack toasts by wrapping them in a toast container, which will vertically add some spacing. {{< example class="bg-light" >}} -<div class="toast-container"> +<div class="toast-container position-static"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} |