diff --git a/src/assets/scss/radix/_toast.scss b/src/assets/scss/radix/_toast.scss index 2f251a9a..2ad9f37d 100644 --- a/src/assets/scss/radix/_toast.scss +++ b/src/assets/scss/radix/_toast.scss @@ -16,6 +16,7 @@ } .toast-root { + position: relative; padding: 15px; display: grid; grid-template-areas: 'title action' 'description action'; @@ -32,6 +33,21 @@ color: var(--green-700); border: 1px solid var(--green-700); background-color: color-mix(in srgb, var(--green-500) 17.5%, var(--white)); + + .toast-icon svg { + fill: var(--green-700); + } + } + + &:has(.toast-icon) { + padding-left: 2.2rem; + } + + .toast-icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: .66rem; } } .toast-root[data-state='open'] { diff --git a/src/components/maps/overlay/ToastService.vue b/src/components/maps/overlay/ToastService.vue index 5c80df41..4cb2c9f5 100644 --- a/src/components/maps/overlay/ToastService.vue +++ b/src/components/maps/overlay/ToastService.vue @@ -35,10 +35,6 @@ function handleUpdate(id: string) { toasts.value.forEach((t, i) => { if (t.id === id) { t.open = false - - setTimeout(() => { - toasts.value.splice(i, 1) - }, 5000) } }) } @@ -54,6 +50,10 @@ function handleUpdate(id: string) { v-bind="toast" @update:open="handleUpdate(toast.id)" > +
+ +
+ {{ toast.title }}