pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust style for active menu item

Browse source
This commit is contained in:
jeffvli 2022-12-24 14:10:34 -08:00
parent f786b6f01b
commit 8699bba067
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/renderer/components/dropdown-menu/index.tsx
View file

@ -28,6 +28,10 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
padding: 0.8rem;
font-size: 0.9em;
font-family: var(--content-font-family);
background-color: ${({ $isActive }) => {
if (!$isActive) return undefined;
return 'var(--dropdown-menu-bg-hover)';
}};
&:disabled {
opacity: 0.6;
@ -50,7 +54,6 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
& .mantine-Menu-itemRightSection {
display: flex;
margin-left: 2rem !important;
color: ${({ $isActive }) => ($isActive ? 'var(--primary-color)' : 'var(--dropdown-menu-fg)')};
}
`;
@ -68,7 +71,6 @@ const StyledMenuDivider = styled(MantineMenu.Divider)`
export const DropdownMenu = ({ children, ...props }: MenuProps) => {
return (
<StyledMenu
withArrow
withinPortal
radius="sm"
styles={{
@ -76,7 +78,7 @@ export const DropdownMenu = ({ children, ...props }: MenuProps) => {
filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
},
}}
transition="scale"
transition="scale-y"
{...props}
>
{children}