seigi_toast 0.2.1

Unstyled toast components for web
Documentation 
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

[data-seigi-toaster] {
  position: fixed;
  width: attr(data-width, 300px);
  bottom: 24px;
  right: 24px;
  z-index: 999999999;
}

[data-seigi-toast] {
  position: absolute;
  padding: 16px;
  width: attr(data-width, 300px);
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid oklch(98.462% 0.001 247.838);
  display: flex;
  align-items: center;
  gap: 6px;
  bottom: 0;
  translate: 0 calc(-1 * attr(data-offset px));
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

[data-seigi-toast]:not([data-visible]),
[data-seigi-toast][data-dismissed] {
  filter: blur(4px);
  scale: 1.1;
  opacity: 0;
}

[data-seigi-toast][data-visible][data-collapsed] {
  scale: 0.7;
  opacity: 0;
  translate: 0 calc(-1 * attr(data-offset px) - 20px);
}

[data-seigi-toast][data-visible][data-collapsed="0"] {
  scale: 0.95;
  opacity: 1;
  translate: 0 calc(-1 * attr(data-offset px) - 12px);
}

[data-seigi-toast][data-visible][data-collapsed="1"] {
  scale: 0.85;
  opacity: 0.7;
  translate: 0 calc(-1 * attr(data-offset px) - 16px);
}

[data-seigi-toast][data-visible][data-collapsed="2"] {
  scale: 0.75;
  opacity: 0.6;
  translate: 0 calc(-1 * attr(data-offset px) - 20px);
}