ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add optional transition animations to dialog

Browse source
This commit is contained in:
David Hill 2026-01-26 16:39:01 +00:00
commit 92229b44f8
4 changed files with 30 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/ui/src/components/dialog.css
View file

@ -5,12 +5,6 @@
inset: 0;
z-index: 50;
background-color: hsl(from var(--background-base) h s l / 0.2);
/* animation: overlayHide 250ms ease 100ms forwards; */
/**/
/* &[data-expanded] { */
/* animation: overlayShow 250ms ease; */
/* } */
}
[data-component="dialog"] {
@ -58,12 +52,6 @@
background-clip: padding-box;
box-shadow: var(--shadow-lg-border-base);
/* animation: contentHide 300ms ease-in forwards; */
/**/
/* &[data-expanded] { */
/* animation: contentShow 300ms ease-out; */
/* } */
[data-slot="dialog-header"] {
display: flex;
padding: 20px;
@ -147,6 +135,14 @@
}
}
[data-component="dialog"][data-transition] [data-slot="dialog-content"] {
animation: contentHide 100ms ease-in forwards;
&[data-expanded] {
animation: contentShow 200ms ease-out;
}
}
@keyframes overlayShow {
from {
opacity: 0;
@ -166,7 +162,7 @@
@keyframes contentShow {
from {
opacity: 0;
transform: scale(0.96);
transform: scale(0.98);
}
to {
opacity: 1;
@ -180,6 +176,6 @@
}
to {
opacity: 0;
transform: scale(0.96);
transform: scale(0.98);
}
}