ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

toast border color based on variant (#469)

Browse Source
This commit is contained in:
SatsAllDay 2023-09-11 15:57:41 -04:00 committed by GitHub
parent ec758b2d5f
commit 9d05a5d09f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/toast.js
View File

@ -56,7 +56,7 @@ export const ToastProvider = ({ children }) => {
{toasts.map(toast => ( {toasts.map(toast => (
<Toast <Toast
key={toast.id} bg={toast.variant} show autohide={toast.autohide} key={toast.id} bg={toast.variant} show autohide={toast.autohide}
delay={toast.delay} className={styles.toast} onClose={() => removeToast(toast.id)} delay={toast.delay} className={`${styles.toast} ${styles[toast.variant]}`} onClose={() => removeToast(toast.id)}
> >
<ToastBody> <ToastBody>
<div className='d-flex align-items-center'> <div className='d-flex align-items-center'>

11
components/toast.module.css
View File

@ -4,8 +4,17 @@
.toast { .toast {
width: auto; width: auto;
border: 1px solid var(--bs-success-border-subtle);
color: #fff; color: #fff;
border-width: 1px;
border-style: solid;
}
.success {
border-color: var(--bs-success-border-subtle);
}
.danger {
border-color: var(--bs-danger-border-subtle);
} }
.toastClose { .toastClose {