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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<script>
import { fade, fly } from "svelte/transition";
import { removeNotif } from "../../stores/notifs";
import { elasticOut } from "svelte/easing";
export let nid;
export let text = "";
export let title;
export let type;
export let transitionType = "fly";
function customTransition(
node,
{ duration = 400, x = 0, y = 0, opacity = 0 }
) {
return {
duration,
css: (t, u) => {
// t = 0 to 1, u = (1 - t)
if (transitionType === "fly")
return `
transform: translate(${x * (1 - t)}px,${y * (1 - t)}px);
opacity: ${t};
`;
else
return `
opacity: ${t};
`;
}
};
}
</script>
<style>
.notification {
max-width: 300px;
padding: 16px;
padding-right: 0;
margin: 10px 0;
box-shadow: 0 3px 6px rgb(0, 0, 0, 0.3);
border-radius: 4px;
display: flex;
justify-content: space-between;
z-index: 1000;
}
.notification.default {
background: rgb(194, 194, 194);
color: black;
border: 1px solid rgb(150, 150, 150);
border-left: 4px solid rgb(150, 150, 150);
}
.notification.danger {
background: rgb(255, 72, 72);
border: 1px solid rgb(235, 15, 15);
border-left: 4px solid rgb(235, 15, 15);
color: white;
}
.notification.success {
background: rgb(23, 153, 12);
border: 1px solid rgb(15, 116, 6);
border-left: 4px solid rgb(15, 116, 6);
color: white;
}
.notification.warning {
background: rgb(255, 144, 69);
border: 1px solid rgb(238, 103, 12);
border-left: 4px solid rgb(238, 103, 12);
color: white;
}
.notification.info {
background: rgb(69, 150, 255);
border: 1px solid rgb(8, 97, 214);
border-left: 4px solid rgb(8, 97, 214);
color: white;
}
.notification .notification__content {
padding-right: 16px;
}
.notification .notification__content--title {
font-weight: 500;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0;
margin-bottom: 5px;
}
.notification .notification__content--text {
font-size: 0.9rem;
margin: 0;
word-wrap: break-word;
overflow: hidden;
}
.notification .notification__close {
font-size: 1rem;
font-weight: bold;
margin: 0;
text-align: right;
text-transform: uppercase;
padding: 0 6px;
border-left: 1px solid rgba(0, 0, 0, 0.199);
display: flex;
align-items: center;
/* justify-content: center; */
}
.notification.info .notification__close,
.notification.danger .notification__close,
.notification.warning .notification__close,
.notification.success .notification__close {
color: white;
border-left-color: rgba(255, 255, 255, 0.438);
}
.notification .notification__close span {
cursor: pointer;
}
</style>
<div
class="notification {type || 'default'}"
transition:customTransition={{ x: 50, duration: 200 }}>
<div class="notification__content">
{#if title}
<h1 class="notification__content--title">{title}</h1>
{/if}
<p class="notification__content--text">{text}</p>
</div>
<div class="notification__close">
<span on:click={() => removeNotif(nid)}>×</span>
</div>
</div>
|
