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

Hoist up dialog variable

Browse Source
This commit is contained in:
Andy Smith
2025-07-30 16:15:33 -05:00
parent 012a517afa
commit c00914b9c8
4 changed files with 11 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+3
View File
@@ -53,6 +53,9 @@
--focus-ring-offset: 1px;
--focus-ring-size: 2px;
/* Dialogs */
--dialog-duration: 150ms;
@media (max-width: 799px) {
--tray-size: var(--footer-height);
}
app/assets/stylesheets/dialog.css
+4 -12
View File
@@ -1,26 +1,18 @@
@layer components {
:is(.dialog) {
--backdrop-speed: 150ms;
--speed: 150ms;
border: 0;
opacity: 0;
transform: scale(0.2);
transform-origin: top center;
transition:
display var(--speed) allow-discrete,
opacity var(--speed),
overlay var(--speed) allow-discrete,
transform var(--speed);
transition: var(--dialog-duration) allow-discrete;
transition-property: display, opacity, overlay, transform;
&::backdrop {
background-color: var(--color-black);
opacity: 0;
transform: scale(1);
transition:
display var(--backdrop-speed) allow-discrete,
opacity var(--backdrop-speed),
overlay var(--backdrop-speed) allow-discrete;
transition: var(--dialog-duration) allow-discrete;
transition-property: display, opacity, overlay;
}
&[open] {
app/assets/stylesheets/lightbox.css
-6
View File
@@ -1,7 +1,5 @@
@layer components {
.lightbox {
--backdrop-speed: 150ms;
background-color: oklch(var(--lch-canvas) / 0.66);
block-size: 100dvh;
border: 0;
@@ -18,10 +16,6 @@
backdrop-filter: blur(66px);
background-color: var(--color-ink);
opacity: 0;
transition:
display var(--backdrop-speed) allow-discrete,
opacity var(--backdrop-speed),
overlay var(--backdrop-speed) allow-discrete;
}
&[open] {
app/assets/stylesheets/popup.css
+4 -12
View File
@@ -149,26 +149,18 @@
}
.popup--animated {
--backdrop-speed: 150ms;
--speed: 150ms;
opacity: 0;
transform: scale(0.2) translateX(-50%);
transform-origin: top left;
transition:
display var(--speed) allow-discrete,
opacity var(--speed),
overlay var(--speed) allow-discrete,
transform var(--speed);
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:
display var(--backdrop-speed) allow-discrete,
opacity var(--backdrop-speed),
overlay var(--backdrop-speed) allow-discrete;
transition: var(--dialog-duration) allow-discrete;
transition-property: display, opacity, overlay;
}
&[open] {