0ee056b2a1
* Prototype of toast system * More toast adoption * share * flag * bookmark * subscribe * delete * More toast usage: * forms * settings save * Log error during flag failure * Incorporate PR feedback: 1. return `toaster` from `useToast` hook, with simplified `success` and `danger` methods 2. remove toast header, move close button to body 3. change how toast ids are generated to use a global incrementing int 4. update toast messages * PR feedback: * reduce width of toast on narrow screens * dynamic delete success toast message based on deleted type * add toasts to auth methods deletion operations * Dismiss all toasts upon page navigation * refine style and use delay prop * more styling --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com> Co-authored-by: keyan <keyan.kousha+huumn@gmail.com>
27 lines
412 B
CSS
27 lines
412 B
CSS
.toast {
|
|
width: auto;
|
|
border: 1px solid var(--bs-success-border-subtle);
|
|
color: #fff;
|
|
}
|
|
|
|
.toastClose {
|
|
color: #fff;
|
|
font-family: "lightning";
|
|
font-size: 150%;
|
|
line-height: 1rem;
|
|
margin-bottom: -0.25rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.toastClose:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
@media screen and (min-width: 400px) {
|
|
.toast {
|
|
width: var(--bs-toast-max-width);
|
|
}
|
|
}
|