vielle.dev
+47
src/components/navigation/Sidebar.astro
+47
src/components/navigation/Sidebar.astro
···
49
49
background-color: #00000080;
50
50
backdrop-filter: blur(15px);
51
51
}
52
52
+
53
53
+
/* animations */
54
54
+
--popover-animation-timing: 0.2s;
55
55
+
@media (prefers-reduced-motion: reduce) {
56
56
+
--popover-animation-timing: 0;
57
57
+
}
58
58
+
--popover-animation-easing: ease-in-out;
59
59
+
60
60
+
transition:
61
61
+
translate var(--popover-animation-timing, 0.2s)
62
62
+
var(--popover-animation-easing, linear) allow-discrete,
63
63
+
overlay var(--popover-animation-timing, 0.2s)
64
64
+
var(--popover-animation-easing, linear) allow-discrete,
65
65
+
display var(--popover-animation-timing, 0.2s)
66
66
+
var(--popover-animation-easing, linear) allow-discrete;
67
67
+
68
68
+
/* exit */
69
69
+
translate: 100% 0;
70
70
+
/* base */
71
71
+
&:popover-open {
72
72
+
translate: 0 0;
73
73
+
/* enter */
74
74
+
@starting-style {
75
75
+
translate: 100% 0;
76
76
+
}
77
77
+
}
78
78
+
79
79
+
&::backdrop {
80
80
+
transition:
81
81
+
display var(--popover-animation-timing)
82
82
+
var(--popover-animation-easing, linear) allow-discrete,
83
83
+
overlay var(--popover-animation-timing, 0.2s)
84
84
+
var(--popover-animation-easing, linear) allow-discrete,
85
85
+
opacity var(--popover-animation-timing)
86
86
+
var(--popover-animation-easing, linear) allow-discrete;
87
87
+
88
88
+
/* exit */
89
89
+
opacity: 0;
90
90
+
}
91
91
+
/* base */
92
92
+
&:popover-open::backdrop {
93
93
+
opacity: 1;
94
94
+
/* enter */
95
95
+
@starting-style {
96
96
+
opacity: 0;
97
97
+
}
98
98
+
}
52
99
}
53
100
</style>