83 lines
1.5 KiB
Svelte
83 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
export let showModal: boolean;
|
|
|
|
let dialog: HTMLDialogElement;
|
|
|
|
$: if (dialog && showModal) dialog.showModal();
|
|
|
|
import CloseIcon from "./Toasts/CloseIcon.svelte";
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
|
|
<dialog
|
|
bind:this={dialog}
|
|
on:close={() => (showModal = false)}
|
|
on:click|self={() => dialog.close()}
|
|
>
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div on:click|stopPropagation>
|
|
<slot name="header" />
|
|
<hr />
|
|
<slot />
|
|
<hr />
|
|
</div>
|
|
<button class="close" on:click={() => dialog.close()}>
|
|
<CloseIcon width="0.8em" />
|
|
</button>
|
|
</dialog>
|
|
|
|
<style>
|
|
dialog {
|
|
max-width: 70%;
|
|
border-radius: 0.2em;
|
|
border: none;
|
|
padding: 0em 2em 2em 2em;
|
|
border-left: 2em;
|
|
border-right: 2em;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
box-shadow: .5em .5em .5em var(--red);
|
|
}
|
|
dialog::backdrop {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
dialog > div {
|
|
padding: 1em;
|
|
}
|
|
dialog[open] {
|
|
animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
@keyframes zoom {
|
|
from {
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
dialog[open]::backdrop {
|
|
animation: fade 0.3s ease-out;
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 1em;
|
|
right: 1.5em;
|
|
color: var(--fg);
|
|
background: transparent;
|
|
border: 0 none;
|
|
padding: 0;
|
|
margin: 0 0 0 auto;
|
|
line-height: 1;
|
|
font-size: 1.2em;
|
|
}
|
|
</style>
|