Files
opencode/packages/ui/src/components/collapsible.css
2026-03-07 05:25:22 -06:00

134 lines
2.9 KiB
CSS

[data-component="collapsible"] {
width: 100%;
display: flex;
flex-direction: column;
background-color: transparent;
border: none;
transition: background-color 0.15s ease;
border-radius: var(--radius-md);
overflow: visible;
&.tool-collapsible [data-slot="collapsible-trigger"] {
height: 37px;
}
&.tool-collapsible [data-slot="basic-tool-content-inner"] {
padding-top: 0;
}
[data-slot="collapsible-trigger"] {
width: 100%;
display: flex;
height: 36px;
padding: 0;
align-items: center;
align-self: stretch;
cursor: default;
user-select: none;
color: var(--text-base);
> [data-component="tool-trigger"][data-arrow] {
width: auto;
max-width: 100%;
flex: 0 1 auto;
[data-slot="basic-tool-tool-trigger-content"] {
width: auto;
max-width: 100%;
}
}
[data-slot="collapsible-arrow"] {
opacity: 0;
transition: opacity 0.15s ease;
will-change: opacity;
transform: translateZ(0);
}
[data-slot="collapsible-arrow-icon"] {
display: inline-flex;
color: var(--icon-weaker);
transform: translateZ(0) rotate(-90deg);
transition: transform 0.15s ease;
will-change: transform;
}
&:hover [data-slot="collapsible-arrow"] {
opacity: 1;
}
/* text-12-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal);
&:focus-visible {
outline: none;
background-color: var(--surface-raised-base-hover);
}
&[data-disabled] {
cursor: not-allowed;
}
[data-slot="collapsible-arrow"] {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
}
[data-slot="collapsible-trigger"][aria-expanded="true"] {
[data-slot="collapsible-arrow"] {
opacity: 1;
}
[data-slot="collapsible-arrow-icon"] {
transform: translateZ(0) rotate(0deg);
}
}
[data-slot="collapsible-content"] {
overflow: clip;
&[data-expanded] {
overflow: visible;
}
/* JS-animated content: overflow managed by animate() */
&[data-spring-content] {
overflow: clip;
}
}
&[data-variant="ghost"] {
background-color: transparent;
border: none;
> [data-slot="collapsible-trigger"] {
background-color: transparent;
border: none;
padding: 0;
&:focus-visible {
outline: none;
background-color: var(--surface-raised-base-hover);
}
&[data-disabled] {
cursor: not-allowed;
}
}
}
&[data-variant="ghost"][data-scope="filetree"] {
> [data-slot="collapsible-trigger"] {
height: 24px;
}
}
}