blob: f5e172a76047c57d868c1abc9dda870c9510e5f5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<script lang="ts">
import { onMount } from 'svelte';
export let notification: { [key: string]: any } = {};
export let onRemove: () => void = () => {
return;
};
export let removed = false;
onMount(() => setTimeout(remove, notification.duration));
const remove = () => {
removed = true;
setTimeout(onRemove, 150);
};
</script>
<div
id="notification-container"
class={removed ? 'fade-out' : 'fade-in'}
on:click={remove}
on:keydown={() => {
return;
}}
role="button"
tabindex="0"
>
{#if notification.description}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<details
open
id="notification"
on:click|preventDefault={(event) => event.preventDefault()}
on:keydown={() => {
return;
}}
>
<summary>{@html notification.heading}</summary>
{@html notification.description}
</details>
{:else}
<div class="card" id="notification">
{@html notification.heading}
</div>
{/if}
</div>
<style>
#notification-container {
margin: 1rem 1rem 0 0;
float: right;
cursor: pointer;
}
#notification {
background-color: var(--base001);
box-shadow: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px, 0 0 0 4px var(--base0E);
widows: 100%;
}
.fade-in {
animation: fadeInAnimation ease 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.fade-out {
animation: fadeOutAnimation ease 150ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
100% {
opacity: 1;
}
1% {
opacity: 0.01;
}
0% {
opacity: 0;
}
}
@keyframes fadeOutAnimation {
0% {
opacity: 1;
}
99% {
opacity: 0.01;
}
100% {
opacity: 0;
}
}
</style>
|