Merge pull request #14 from icssc/dialog

fix: 🐛 dialog component overlay styling
icssc · Feb 9, 2024 · 111f640 · 111f640
2 parents 7c30450 + 09f2124
commit 111f640
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
@@ -14,7 +14,7 @@
 
 <div use:melt={$portalled}>
   {#if $open}
-    <div use:melt={$overlay} class="" transition:fade={{ duration: 150 }} />
+    <div use:melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} />
     <div use:melt={$content} transition:fade={{ duration: 100 }} class="content">
       <h2 use:melt={$titleElement}>{title}</h2>
       <slot />
@@ -45,4 +45,10 @@
       margin: 24px 16px 0 16px;
     }
   }
+
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
 </style>