diff --git a/scss/_toasts.scss b/scss/_toasts.scss index e2b98e600..7a1cf7354 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,25 +1,17 @@ .toast { - max-width: $toast-max-width; + width: $toast-max-width; + max-width: 100%; @include font-size($toast-font-size); color: $toast-color; + pointer-events: auto; background-color: $toast-background-color; background-clip: padding-box; border: $toast-border-width solid $toast-border-color; box-shadow: $toast-box-shadow; - opacity: 0; @include border-radius($toast-border-radius); - &:not(:last-child) { - margin-bottom: $toast-padding-x; - } - - &.showing { - opacity: 1; - } - - &.show { - display: block; - opacity: 1; + &:not(.showing):not(.show) { + opacity: 0; } &.hide { @@ -27,6 +19,16 @@ } } +.toast-container { + width: max-content; + max-width: 100%; + pointer-events: none; + + > :not(:last-child) { + margin-bottom: $toast-spacing; + } +} + .toast-header { display: flex; align-items: center; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index dacd8b289..89bf16847 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -65,7 +65,9 @@ $utilities: map-merge( property: transform, class: translate-middle, values: ( - null: (translateX(-50%) translateY(-50%)) + null: translate(-50%, -50%), + x: translateX(-50%), + y: translateY(-50%), ) ), "border": ( diff --git a/scss/_variables.scss b/scss/_variables.scss index b97e520d7..d9acaca98 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1108,6 +1108,7 @@ $toast-border-width: 1px !default; $toast-border-color: rgba(0, 0, 0, .1) !default; $toast-border-radius: $border-radius !default; $toast-box-shadow: $box-shadow !default; +$toast-spacing: $container-padding-x !default; $toast-header-color: $gray-600 !default; $toast-header-background-color: rgba($white, .85) !default; diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 58f4e23bf..7f6752d2c 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -28,6 +28,17 @@ new bootstrap.Popover(popover) }) + var toastPlacement = document.getElementById('toastPlacement') + if (toastPlacement) { + document.getElementById('selectToastPlacement').addEventListener('change', function () { + if (!toastPlacement.dataset.originalClass) { + toastPlacement.dataset.originalClass = toastPlacement.className + } + + toastPlacement.className = toastPlacement.dataset.originalClass + ' ' + this.value + }) + } + document.querySelectorAll('.toast') .forEach(function (toastNode) { var toast = new bootstrap.Toast(toastNode, { diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index b29635500..ce7ea7539 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -265,6 +265,11 @@ } } +// Toasts +.bd-example-toasts { + min-height: 240px; +} + // // Code snippets // diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index be368c76e..740a926f9 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -13,7 +13,6 @@ Toasts are lightweight notifications designed to mimic the push notifications th Things to know when using the toast plugin: - Toasts are opt-in for performance reasons, so **you must initialize them yourself**. -- **Please note that you are responsible for positioning toasts.** - Toasts will automatically hide if you do not specify `autohide: false`. {{< callout info >}} @@ -62,30 +61,32 @@ Toasts are slightly translucent, too, so they blend over whatever they might app ### Stacking -When you have multiple toasts, we default to vertically stacking them in a readable manner. +You can stack toasts by wrapping them in a toast container, which will vertically add some spacing. {{< example class="bg-light" >}} -