104 lines
2.4 KiB
Svelte
104 lines
2.4 KiB
Svelte
<style>
|
|
.dialog {
|
|
@apply inline-block;
|
|
@apply bg-white;
|
|
@apply rounded-lg;
|
|
@apply text-left;
|
|
@apply overflow-hidden;
|
|
@apply shadow-xl;
|
|
@apply transform;
|
|
@apply transition-all;
|
|
@apply my-8;
|
|
|
|
width: 95%;
|
|
}
|
|
.my-max-w-xl {
|
|
@apply max-w-xl;
|
|
}
|
|
.my-max-w-2xl {
|
|
@apply max-w-2xl;
|
|
}
|
|
.my-max-w-3xl {
|
|
@apply max-w-3xl;
|
|
}
|
|
.my-max-w-4xl {
|
|
@apply max-w-4xl;
|
|
}
|
|
.my-max-w-5xl {
|
|
@apply max-w-5xl;
|
|
}
|
|
.my-max-w-6xl {
|
|
@apply max-w-6xl;
|
|
}
|
|
.my-max-w-7xl {
|
|
@apply max-w-7xl;
|
|
}
|
|
.my-align-middle {
|
|
@apply align-middle;
|
|
}
|
|
.h90 {
|
|
max-height: 90vh;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { fade } from 'svelte/transition';
|
|
export let size = 'xl'; // https://tailwindcss.com/docs/max-width#class-reference
|
|
export let open = false;
|
|
export let scrollable = true;
|
|
export let verticalAlign = 'middle';
|
|
</script>
|
|
|
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<div
|
|
class:hidden={!open}
|
|
class:overflow-y-auto={scrollable}
|
|
class="fixed inset-0 z-50"
|
|
in:fade={{ delay: 100 }}
|
|
out:fade={{ delay: 100 }}
|
|
>
|
|
<div
|
|
class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
|
|
>
|
|
<!--
|
|
Background overlay, show/hide based on modal state.
|
|
|
|
Entering: "ease-out duration-300"
|
|
From: "opacity-0"
|
|
To: "opacity-100"
|
|
Leaving: "ease-in duration-200"
|
|
From: "opacity-100"
|
|
To: "opacity-0"
|
|
-->
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75" ></div>
|
|
</div>
|
|
|
|
<!-- This element is to trick the browser into centering the modal contents. -->
|
|
<span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"
|
|
>​</span
|
|
>
|
|
<!--
|
|
Modal panel, show/hide based on modal state.
|
|
|
|
Entering: "ease-out duration-300"
|
|
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
To: "opacity-100 translate-y-0 sm:scale-100"
|
|
Leaving: "ease-in duration-200"
|
|
From: "opacity-100 translate-y-0 sm:scale-100"
|
|
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
-->
|
|
|
|
<div
|
|
class="dialog my-max-w-{size} my-align-{verticalAlign}"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="modal-headline"
|
|
>
|
|
<div class="h90 flex flex-col">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|