aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-21 09:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: accordion css not going to keep me down

Browse Source
This commit is contained in:
Adam
2025-10-24 15:01:22 -05:00
parent 6ff0ce8bc5
commit e34042e17a
1 changed files with 55 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,9 +4,6 @@
align-items: flex-start; align-items: flex-start;
gap: 0px; gap: 0px;
align-self: stretch; align-self: stretch;
border-radius: 8px;
border: 1px solid var(--border-weak-base);
overflow: clip;
[data-slot="accordion-item"] { [data-slot="accordion-item"] {
width: 100%; width: 100%;
@@ -15,6 +12,10 @@
align-items: flex-start; align-items: flex-start;
gap: 0px; gap: 0px;
align-self: stretch; align-self: stretch;
border: 1px solid var(--border-weak-base);
border-bottom: none;
border-top: none;
overflow: clip;
[data-slot="accordion-header"] { [data-slot="accordion-header"] {
width: 100%; width: 100%;
@@ -36,6 +37,7 @@
background-color: var(--surface-base); background-color: var(--surface-base);
border-bottom: 1px solid var(--border-weak-base); border-bottom: 1px solid var(--border-weak-base);
overflow: clip;
color: var(--text-strong); color: var(--text-strong);
transition: background-color 0.15s ease; transition: background-color 0.15s ease;
@@ -50,28 +52,69 @@
&:hover { &:hover {
background-color: var(--surface-base); background-color: var(--surface-base);
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
&[data-disabled] { &[data-disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }
&:last-child { &[data-expanded] {
[data-slot="accordion-trigger"] { border: 1px solid var(--border-weak-base);
border-bottom: none; border-bottom: 1px solid var(--border-weak-base);
margin-top: 8px;
margin-bottom: 8px;
border-radius: 8px;
/* previous */
[data-slot="accordion-item"]:has(+ &) {
&[data-closed] {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
[data-slot="accordion-trigger"] {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
margin-bottom: 8px;
} }
&[data-expanded] {
border-bottom: none; /* next */
& + [data-slot="accordion-item"] {
border-top: 1px solid var(--border-weak-base);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 8px;
} }
} }
&[data-expanded] { &:first-child {
border-bottom: 1px solid var(--border-weak-base); margin-top: 0px;
border-top: 1px solid var(--border-weak-base);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
&[data-closed] {
[data-slot="accordion-trigger"] {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}
}
&:last-child {
margin-bottom: 0px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
&[data-closed] {
[data-slot="accordion-trigger"] {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
} }
[data-slot="accordion-content"] { [data-slot="accordion-content"] {