diff options
| author | Sam Nystrom <sam@samnystrom.dev> | 2024-03-16 22:53:40 -0400 |
|---|---|---|
| committer | Sam Nystrom <sam@samnystrom.dev> | 2024-03-16 22:53:40 -0400 |
| commit | f64fa3b82638c8b4ec72b2e09a6341a44745ff46 (patch) | |
| tree | c750c7eb9e4d5484d13e09364c96ac17ededdcf7 /src | |
| parent | 3b8c7e391e1f370af74df30a14a699a49543f918 (diff) | |
fix: fix ButtonMenu icon rotation
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ButtonMenu.css | 11 | ||||
| -rw-r--r-- | src/components/ButtonMenu.tsx | 6 |
2 files changed, 8 insertions, 9 deletions
diff --git a/src/components/ButtonMenu.css b/src/components/ButtonMenu.css index 45d986a..e896030 100644 --- a/src/components/ButtonMenu.css +++ b/src/components/ButtonMenu.css @@ -4,23 +4,18 @@ position: relative; padding-left: 2.5rem; - &::before { + img { content: ''; - width: 1rem; - height: 1rem; left: 0.75rem; position: absolute; - background: url('../icons/chevron-right.svg'); - background-position: left 2px center; - background-repeat: no-repeat; } - &:has(+ :popover-open)::before { + &:has(+ :popover-open) img { transform: rotate(90deg); } @media not (prefers-reduced-motion) { - &::before { + img { transition: transform 0.2s; } } diff --git a/src/components/ButtonMenu.tsx b/src/components/ButtonMenu.tsx index f4427b3..1cb518a 100644 --- a/src/components/ButtonMenu.tsx +++ b/src/components/ButtonMenu.tsx @@ -3,6 +3,7 @@ import { useEffect, useCallback, useRef, useId } from 'preact/hooks'; import { useSignal, batch } from '@preact/signals'; import Button from './Button.tsx'; import Menu from './Menu.tsx'; +import chevronRight from '../icons/chevron-right.svg'; import './ButtonMenu.css'; export interface ButtonMenuProps { @@ -31,7 +32,10 @@ const ButtonMenu = ({ children, label }: ButtonMenuProps) => { onScroll={updateRect} style={`--anchor-x: ${x}px; --anchor-y: ${y}px;`} > - <Button kind="ghost" popoverTarget={id}>{label}</Button> + <Button kind="ghost" popoverTarget={id}> + <img src={chevronRight} /> + {label} + </Button> <Menu id={id} popover="auto"> {children} </Menu> |