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

tweak(ui): rotate collapsible chevron icon

Browse Source
This commit is contained in:
David Hill
2026-02-19 00:35:12 +00:00
parent 6042785c57
commit 802ccd3788
2 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/ui/src/components/collapsible.css
View File

@@ -29,11 +29,10 @@
} }
[data-slot="collapsible-arrow-icon"] { [data-slot="collapsible-arrow-icon"] {
display: none;
}
[data-slot="collapsible-arrow-icon"][data-direction="right"] {
display: inline-flex; display: inline-flex;
color: var(--icon-weaker);
transform: rotate(-90deg);
transition: transform 0.15s ease;
} }
&:hover [data-slot="collapsible-arrow"] { &:hover [data-slot="collapsible-arrow"] {
@@ -74,12 +73,8 @@
opacity: 1; opacity: 1;
} }
[data-slot="collapsible-arrow-icon"][data-direction="right"] { [data-slot="collapsible-arrow-icon"] {
display: none; transform: rotate(0deg);
}
[data-slot="collapsible-arrow-icon"][data-direction="down"] {
display: inline-flex;
} }
} }

5
packages/ui/src/components/collapsible.tsx
View File

@@ -34,10 +34,7 @@ function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
function CollapsibleArrow(props?: ComponentProps<"div">) { function CollapsibleArrow(props?: ComponentProps<"div">) {
return ( return (
<div data-slot="collapsible-arrow" {...(props || {})}> <div data-slot="collapsible-arrow" {...(props || {})}>
<span data-slot="collapsible-arrow-icon" data-direction="right"> <span data-slot="collapsible-arrow-icon">
<Icon name="chevron-right" size="small" />
</span>
<span data-slot="collapsible-arrow-icon" data-direction="down">
<Icon name="chevron-down" size="small" /> <Icon name="chevron-down" size="small" />
</span> </span>
</div> </div>