blob: 9612d526324e17823f052ad49b15d57fc9402769 (
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
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<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'}>
{#if notification.description}
<details open id="notification">
<summary>{@html notification.heading}</summary>
{@html notification.description}
<br />
<div class="button-container">
<button on:click={remove} class="button-hide">Hide</button>
</div>
</details>
{:else}
<div class="card" id="notification">
{@html notification.heading}
<div class="button-container">
<button on:click={remove} class="button-hide">Hide</button>
</div>
</div>
{/if}
</div>
<style>
#notification-container {
margin: 1rem 1rem 0 0;
float: right;
}
#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%;
}
.button-container {
display: flex;
justify-content: flex-end;
}
#notification > div {
display: inline;
}
.button-hide {
float: right;
}
.button-container::after {
content: '';
clear: both;
display: table;
}
.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>
|