2021-03-31 11:59:07 +02:00
|
|
|
<script>
|
|
|
|
|
import { slide } from "svelte/transition"
|
|
|
|
|
import Portal from "svelte-portal"
|
2021-07-14 15:21:11 +02:00
|
|
|
import Button from "../Button/Button.svelte"
|
2021-04-22 15:14:55 +02:00
|
|
|
import Body from "../Typography/Body.svelte"
|
|
|
|
|
import Heading from "../Typography/Heading.svelte"
|
2021-03-31 11:59:07 +02:00
|
|
|
|
|
|
|
|
export let title
|
2021-09-16 13:15:32 +02:00
|
|
|
export let fillWidth
|
2021-03-31 11:59:07 +02:00
|
|
|
let visible = false
|
|
|
|
|
export function show() {
|
|
|
|
|
if (visible) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
visible = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function hide() {
|
|
|
|
|
if (!visible) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
visible = false
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
{#if visible}
|
|
|
|
|
<Portal>
|
2021-09-16 13:15:32 +02:00
|
|
|
<section class:fillWidth class="drawer" transition:slide>
|
2021-03-31 11:59:07 +02:00
|
|
|
<header>
|
|
|
|
|
<div class="text">
|
2021-04-30 13:38:06 +02:00
|
|
|
<Heading size="XS">{title}</Heading>
|
2021-07-14 15:21:11 +02:00
|
|
|
<Body size="S">
|
2021-05-04 10:55:14 +02:00
|
|
|
<slot name="description" />
|
|
|
|
|
</Body>
|
2021-03-31 11:59:07 +02:00
|
|
|
</div>
|
2021-04-22 16:34:18 +02:00
|
|
|
<div class="buttons">
|
2021-07-14 15:21:11 +02:00
|
|
|
<Button secondary quiet on:click={hide}>Cancel</Button>
|
2021-03-31 11:59:07 +02:00
|
|
|
<slot name="buttons" />
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<slot name="body" />
|
|
|
|
|
</section>
|
|
|
|
|
</Portal>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<style>
|
2022-02-14 15:57:06 +01:00
|
|
|
.buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-31 11:59:07 +02:00
|
|
|
.drawer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 260px;
|
|
|
|
|
width: calc(100% - 520px);
|
|
|
|
|
background: var(--background);
|
2021-07-14 15:21:11 +02:00
|
|
|
border-top: var(--border-light);
|
2021-03-31 11:59:07 +02:00
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-16 13:15:32 +02:00
|
|
|
.fillWidth {
|
|
|
|
|
width: calc(100% - 260px) !important;
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-31 11:59:07 +02:00
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: var(--border-light);
|
2021-07-14 15:21:11 +02:00
|
|
|
padding: var(--spacing-l) var(--spacing-xl);
|
|
|
|
|
gap: var(--spacing-xl);
|
2021-03-31 11:59:07 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
display: flex;
|
2021-07-14 15:21:11 +02:00
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: var(--spacing-xs);
|
2021-03-31 11:59:07 +02:00
|
|
|
}
|
2022-02-10 12:46:57 +01:00
|
|
|
|
|
|
|
|
.buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--spacing-m);
|
|
|
|
|
}
|
2021-03-31 11:59:07 +02:00
|
|
|
</style>
|
