mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-29 16:36:44 +01:00
993b40201c
* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
64 lines
1.0 KiB
Svelte
64 lines
1.0 KiB
Svelte
<script>
|
|
export let showModal; // boolean
|
|
|
|
let dialog; // HTMLDialogElement
|
|
|
|
$: if (dialog && showModal) dialog.showModal();
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<dialog
|
|
bind:this={dialog}
|
|
on:close={() => (showModal = false)}
|
|
on:click|self={() => dialog.close()}
|
|
>
|
|
<div on:click|stopPropagation>
|
|
<slot name="header" />
|
|
<hr />
|
|
<slot />
|
|
<hr />
|
|
<!-- svelte-ignore a11y-autofocus -->
|
|
<button autofocus on:click={() => dialog.close()}>close modal</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<style>
|
|
dialog {
|
|
max-width: 32em;
|
|
border-radius: 0.2em;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
dialog::backdrop {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
dialog > div {
|
|
padding: 1em;
|
|
}
|
|
dialog[open] {
|
|
animation: zoom 0.3s 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.2s ease-out;
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
button {
|
|
display: block;
|
|
}
|
|
</style>
|