monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(app): don't jump accordion on expand/collapse

Browse Source
This commit is contained in:
Adam
2026-01-20 10:54:04 -06:00
parent 86b2002deb
commit 5f67e6fd12
1 changed files with 4 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/ui/src/components/accordion.css
View File

@@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 0px; gap: 8px;
align-self: stretch; align-self: stretch;
[data-slot="accordion-item"] { [data-slot="accordion-item"] {
@@ -10,7 +10,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 0px;
align-self: stretch; align-self: stretch;
overflow: clip; overflow: clip;
@@ -34,6 +33,7 @@
background-color: var(--surface-base); background-color: var(--surface-base);
border: 1px solid var(--border-weak-base); border: 1px solid var(--border-weak-base);
border-radius: var(--radius-md);
overflow: clip; overflow: clip;
color: var(--text-strong); color: var(--text-strong);
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
@@ -59,12 +59,9 @@
} }
&[data-expanded] { &[data-expanded] {
margin-top: 8px;
margin-bottom: 8px;
[data-slot="accordion-trigger"] { [data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-md); border-bottom-left-radius: 0;
border-top-right-radius: var(--radius-md); border-bottom-right-radius: 0;
} }
[data-slot="accordion-content"] { [data-slot="accordion-content"] {
@@ -73,68 +70,11 @@
border-bottom-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
} }
& + [data-slot="accordion-item"] {
margin-top: 8px;
[data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
}
}
&:has(+ [data-slot="accordion-item"][data-expanded]) {
margin-bottom: 8px;
&[data-closed] {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
[data-slot="accordion-trigger"] {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
}
}
&[data-closed] + &[data-closed] {
[data-slot="accordion-trigger"] {
border-top: none;
}
}
&:first-child {
margin-top: 0px;
&[data-closed] {
[data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
}
}
&:last-child {
margin-bottom: 0px;
&[data-closed] {
[data-slot="accordion-trigger"] {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
}
} }
[data-slot="accordion-content"] { [data-slot="accordion-content"] {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
/* animation: slideUp 250ms cubic-bezier(0.87, 0, 0.13, 1); */
/**/
/* &[data-expanded] { */
/* animation: slideDown 250ms cubic-bezier(0.87, 0, 0.13, 1); */
/* } */
} }
} }
} }