bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animate all popups

Browse Source
This commit is contained in:
Andy Smith
2025-10-31 16:19:37 -05:00
parent b3ffbc6a79
commit 54e3c146d1
2 changed files with 41 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/fizzy-menu.css
+11 -2
View File
@@ -6,8 +6,8 @@
img {
block-size: auto;
inline-size: 1.15em;
margin-inline-end: 0.8ch;
inline-size: 1.15em;
margin-inline-end: 0.8ch;
}
}
@@ -71,6 +71,15 @@
flex-direction: column;
gap: 2px;
scrollbar-gutter: stable both-edges;
/* Safari doesn't position the sticky footer properly during the
* transition, so we need to delay the footer entrance. */
.popup__footer {
animation: safari-sticky-footer-hack 0s;
animation-delay: var(--dialog-duration);
animation-fill-mode: both;
inset-inline: var(--block-space);
}
}
.fizzy-menu__close {
app/assets/stylesheets/popup.css
+30 -48
View File
@@ -14,9 +14,39 @@
position: absolute;
transform: translateX(-50%);
z-index: var(--z-popup);
opacity: 0;
transform: scale(0.2) translateX(-50%);
transform-origin: top left;
transition: var(--dialog-duration) allow-discrete;
transition-property: display, opacity, overlay, transform;
&::backdrop {
background-color: var(--color-always-black);
opacity: 0;
transform: scale(1);
transition: var(--dialog-duration) allow-discrete;
transition-property: display, opacity, overlay;
}
&[open] {
display: flex;
opacity: 1;
transform: scale(1) translateX(-50%);
&::backdrop {
opacity: 0.5;
}
}
@starting-style {
&[open] {
opacity: 0;
transform: scale(0.2) translateX(-50%);
}
&[open]::backdrop {
opacity: 0;
}
}
&.orient-left {
@@ -179,54 +209,6 @@
z-index: 1;
}
/* Variants
/* ------------------------------------------------------------------------ */
.popup--animated {
opacity: 0;
transform: scale(0.2) translateX(-50%);
transform-origin: top left;
transition: var(--dialog-duration) allow-discrete;
transition-property: display, opacity, overlay, transform;
&::backdrop {
background-color: var(--color-always-black);
opacity: 0;
transform: scale(1);
transition: var(--dialog-duration) allow-discrete;
transition-property: display, opacity, overlay;
}
/* Safari doesn't position the sticky footer properly during the
* transition, so we need to delay the footer entrance. */
.popup__footer {
animation: safari-sticky-footer-hack 0s;
animation-delay: var(--dialog-duration);
animation-fill-mode: both;
inset-inline: var(--block-space);
}
&[open] {
opacity: 1;
transform: scale(1) translateX(-50%);
&::backdrop {
opacity: 0.5;
}
}
@starting-style {
&[open] {
opacity: 0;
transform: scale(0.2) translateX(-50%);
}
&[open]::backdrop {
opacity: 0;
}
}
}
@keyframes safari-sticky-footer-hack {
0% { position: absolute; }
100% { position: sticky; }