Handle pointer-events better

zerodevx · Apr 7, 2021 · b9b9d43 · b9b9d43
1 parent 3ab06b5
commit b9b9d43
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/SvelteToast.svelte b/src/SvelteToast.svelte
@@ -23,15 +23,16 @@ const getCss = theme => Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]
 
 <style>
 ul {
+  top: var(--toastContainerTop,1.5rem);
+  right: var(--toastContainerRight,2rem);
+  bottom: var(--toastContainerBottom,auto);
+  left: var(--toastContainerLeft,auto);
   position: fixed;
   margin: 0;
   padding: 0;
   list-style-type: none;
+  pointer-events: none;
   z-index: 9999;
-  top: var(--toastContainerTop,1.5rem);
-  right: var(--toastContainerRight,2rem);
-  bottom: var(--toastContainerBottom,auto);
-  left: var(--toastContainerLeft,auto);
 }
 </style>
 

diff --git a/src/ToastItem.svelte b/src/ToastItem.svelte
@@ -40,6 +40,9 @@ $: if (prevProgress !== item.progress) {
   padding: var(--toastMsgPadding,0.75rem 0.5rem);
   flex: 1 1 0%;
 }
+._toastMsg :global(a) {
+  pointer-events: auto;
+}
 ._toastBtn {
   width: 2rem;
   height: 100%;