finxol.io
A very simple bookmarking webapp
bookmarker.finxol.deno.net/
fix: add animation
+21
+21
src/components/BookmarkEditModal.css
+21
src/components/BookmarkEditModal.css
···
13
13
gap: calc(var(--spacing) * 1);
14
14
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
15
15
16
+
opacity: 1;
17
+
transform: scale(1) translateY(0);
18
+
transition:
19
+
opacity 0.25s ease,
20
+
transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
21
+
display 0.25s ease allow-discrete;
22
+
23
+
@starting-style {
24
+
opacity: 0;
25
+
transform: scale(0.95) translateY(0.5rem);
26
+
}
27
+
16
28
&:popover-open {
17
29
display: flex;
18
30
}
···
20
32
&::backdrop {
21
33
background: hsl(from var(--primary) h s 3% / 0.2);
22
34
backdrop-filter: blur(4px);
35
+
transition:
36
+
background 0.25s ease,
37
+
backdrop-filter 0.25s ease,
38
+
display 0.25s ease allow-discrete;
39
+
40
+
@starting-style {
41
+
background: hsl(from var(--primary) h s 3% / 0);
42
+
backdrop-filter: blur(0);
43
+
}
23
44
}
24
45
25
46
& > .button-ghost {