Css suggestion

[bsoliveira]

Thank you very much for the package, I would like to contribute an idea of css that worked well for me. it would be ideal for the script to define only the class toast- *, and leave all style in the css, to be customizable.

.toast-container { position: absolute; z-index: 1055; top: 60px; right: 0; min-width: 100%; }

.toast-wrapper { position: relative; padding-right: 1.25rem; padding-left: 1.25rem; padding-top: 0.8rem; width: 100%; }

@media (min-width: 768px) { .toast-wrapper { width: 350px; float: right; } }

.toast-container > .toast-wrapper > .toast { min-width: 100%; background-color: white; border-top: none; }

.toast-container > .toast-wrapper > .toast > .toast-header strong { padding-right: 20px; }

.toast-header { border-bottom: none; }

.toast-body { padding-top: 0.8em; padding-bottom: 1.3em; text-align: center; font-size: 1.2em; }

.toast-primary .toast-header { background-color: #5898d9; color: #fff; }

.toast-secondary .toast-header { background-color: #6c757d; color: #fff; }

.toast-success .toast-header { background-color: #28a745; color: #fff; }

.toast-success .toast-body { background-color: #2dbc4e; color: #fff; }

.toast-info .toast-header { background-color: #17a2b8; color: #fff; }

.toast-info .toast-body { background-color: #1ab6cf; color: #fff; }

.toast-warning .toast-header { background-color: #ffc107; color: #fff; }

.toast-danger .toast-header { background-color: #b23405; color: #fff; }

.toast-danger .toast-body { background-color: #cb3b06; color: #fff; }

.toast-light .toast-header { background-color: #f8f9fa; color: #000; }

.toast-dark .toast-header { background-color: #343a40; color: #fff; }

[Script47]

The styling is based on Bootstrap's styling. However with v1.0.0 you can customise the style for the different types of toasts.