diff options
| author | David Hill <[email protected]> | 2026-02-19 00:35:12 +0000 |
|---|---|---|
| committer | David Hill <[email protected]> | 2026-02-19 00:35:12 +0000 |
| commit | 802ccd37888b355dcd779be48b4994efc92168fa (patch) | |
| tree | e50709a30ad7b0c53928390c506fc18c67b9d89c /packages/ui/src | |
| parent | 6042785c57d9488568da0cda5267510d969b1316 (diff) | |
| download | opencode-802ccd37888b355dcd779be48b4994efc92168fa.tar.gz opencode-802ccd37888b355dcd779be48b4994efc92168fa.zip | |
tweak(ui): rotate collapsible chevron icon
Diffstat (limited to 'packages/ui/src')
| -rw-r--r-- | packages/ui/src/components/collapsible.css | 15 | ||||
| -rw-r--r-- | packages/ui/src/components/collapsible.tsx | 5 |
2 files changed, 6 insertions, 14 deletions
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css index 88f37ea7f..6408cfb5e 100644 --- a/packages/ui/src/components/collapsible.css +++ b/packages/ui/src/components/collapsible.css @@ -29,11 +29,10 @@ } [data-slot="collapsible-arrow-icon"] { - display: none; - } - - [data-slot="collapsible-arrow-icon"][data-direction="right"] { display: inline-flex; + color: var(--icon-weaker); + transform: rotate(-90deg); + transition: transform 0.15s ease; } &:hover [data-slot="collapsible-arrow"] { @@ -74,12 +73,8 @@ opacity: 1; } - [data-slot="collapsible-arrow-icon"][data-direction="right"] { - display: none; - } - - [data-slot="collapsible-arrow-icon"][data-direction="down"] { - display: inline-flex; + [data-slot="collapsible-arrow-icon"] { + transform: rotate(0deg); } } diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx index 548088287..8b5cd825c 100644 --- a/packages/ui/src/components/collapsible.tsx +++ b/packages/ui/src/components/collapsible.tsx @@ -34,10 +34,7 @@ function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) { function CollapsibleArrow(props?: ComponentProps<"div">) { return ( <div data-slot="collapsible-arrow" {...(props || {})}> - <span data-slot="collapsible-arrow-icon" data-direction="right"> - <Icon name="chevron-right" size="small" /> - </span> - <span data-slot="collapsible-arrow-icon" data-direction="down"> + <span data-slot="collapsible-arrow-icon"> <Icon name="chevron-down" size="small" /> </span> </div> |