38 lines
850 B
Svelte
38 lines
850 B
Svelte
<script lang="ts">
|
|
import { modalStore } from '$lib/stores/modal';
|
|
|
|
export let transitionX: number = 0;
|
|
export let transitionY: number = 25;
|
|
export let navbarMount: boolean | undefined = undefined;
|
|
|
|
const dismissModal = () => $modalStore?.hideModal();
|
|
</script>
|
|
|
|
<div
|
|
class="z-[51] flex flex-col gap-2 pointer-events-auto max-h-screen"
|
|
class:h-full={navbarMount === true}
|
|
aria-modal="true"
|
|
style="--x: {transitionX}px; --y: {transitionY}px;"
|
|
on:click|self={dismissModal}
|
|
on:keyup|self={dismissModal}>
|
|
<slot />
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
div {
|
|
animation-name: fly;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: ease-in;
|
|
animation-duration: 0.2s;
|
|
}
|
|
|
|
@keyframes fly {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(var(--x)) translateY(var(--y));
|
|
}
|
|
|
|
to {
|
|
}
|
|
}
|
|
</style>
|