clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-04-28 00:35:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): accordion styles

Browse Source
This commit is contained in:
Adam
2026-02-19 08:44:17 -06:00
parent 8ebdbe0ea2
commit 338393c016
7 changed files with 455 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
gap: 0px;
align-self: stretch;
[data-slot="accordion-item"] {
@@ -11,7 +11,11 @@
flex-direction: column;
align-items: flex-start;
align-self: stretch;
overflow: clip;
overflow: visible;
& + [data-slot="accordion-item"] {
margin-top: -1px;
}
[data-slot="accordion-header"] {
width: 100%;
@@ -31,9 +35,10 @@
cursor: default;
user-select: none;
background-color: var(--surface-base);
background-color: var(--background-stronger);
border: 1px solid var(--border-weak-base);
border-radius: var(--radius-md);
border-radius: 0;
box-shadow: none;
overflow: clip;
color: var(--text-strong);
transition: background-color 0.15s ease;
@@ -47,7 +52,10 @@
letter-spacing: var(--letter-spacing-normal);
&:hover {
background-color: var(--surface-base);
background-color: var(--surface-base-hover);
}
&:active {
background-color: var(--surface-base-active);
}
&:focus-visible {
outline: none;
@@ -58,23 +66,40 @@
}
}
&[data-expanded] {
[data-slot="accordion-trigger"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&:first-child {
[data-slot="accordion-header"] [data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
}
&:last-child:not([data-expanded]) {
[data-slot="accordion-header"] [data-slot="accordion-trigger"] {
border-bottom-left-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
}
&[data-expanded] {
[data-slot="accordion-content"] {
border: 1px solid var(--border-weak-base);
border-top: none;
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
border-top: 0;
background-color: var(--background-stronger);
}
}
&:last-child[data-expanded] {
[data-slot="accordion-content"] {
border-bottom-left-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
}
[data-slot="accordion-content"] {
overflow: hidden;
width: 100%;
border: 0;
background-color: transparent;
}
}
}