Adjust default dropdown styling
This commit is contained in:
parent
661751f306
commit
918b77eebb
3 changed files with 11 additions and 11 deletions
|
@ -19,17 +19,17 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
|
||||||
min-width: ${({ minWidth }) => minWidth}px;
|
min-width: ${({ minWidth }) => minWidth}px;
|
||||||
max-width: ${({ maxWidth }) => maxWidth}px;
|
max-width: ${({ maxWidth }) => maxWidth}px;
|
||||||
background: var(--dropdown-menu-bg);
|
background: var(--dropdown-menu-bg);
|
||||||
border-radius: 10px;
|
border-radius: var(--dropdown-menu-border-radius);
|
||||||
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
|
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
|
||||||
|
|
||||||
button:first-child {
|
button:first-child {
|
||||||
border-top-left-radius: 10px;
|
border-top-left-radius: var(--dropdown-menu-border-radius);
|
||||||
border-top-right-radius: 10px;
|
border-top-right-radius: var(--dropdown-menu-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:last-child {
|
button:last-child {
|
||||||
border-bottom-right-radius: 10px;
|
border-bottom-right-radius: var(--dropdown-menu-border-radius);
|
||||||
border-bottom-left-radius: 10px;
|
border-bottom-left-radius: var(--dropdown-menu-border-radius);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -85,7 +85,8 @@ const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledMenuDivider = styled(MantineMenu.Divider)`
|
const StyledMenuDivider = styled(MantineMenu.Divider)`
|
||||||
/* margin: 0.3rem 0; */
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const DropdownMenu = ({ children, ...props }: MenuProps) => {
|
export const DropdownMenu = ({ children, ...props }: MenuProps) => {
|
||||||
|
@ -97,7 +98,6 @@ export const DropdownMenu = ({ children, ...props }: MenuProps) => {
|
||||||
filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
|
filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
transition="fade"
|
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -64,13 +64,13 @@
|
||||||
--input-active-fg: rgb(193, 193, 193);
|
--input-active-fg: rgb(193, 193, 193);
|
||||||
--input-active-bg: rgba(255, 255, 255, 0.1);
|
--input-active-bg: rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
--dropdown-menu-bg: rgb(40, 40, 40);
|
--dropdown-menu-bg: rgb(45, 45, 45);
|
||||||
--dropdown-menu-fg: rgb(235, 235, 235);
|
--dropdown-menu-fg: rgb(235, 235, 235);
|
||||||
--dropdown-menu-item-padding: 1rem;
|
--dropdown-menu-item-padding: 0.8rem;
|
||||||
--dropdown-menu-item-font-size: 1rem;
|
--dropdown-menu-item-font-size: 1rem;
|
||||||
--dropdown-menu-bg-hover: rgb(62, 62, 62);
|
--dropdown-menu-bg-hover: rgb(62, 62, 62);
|
||||||
--dropdown-menu-border: none;
|
--dropdown-menu-border: 1px var(--generic-border-color) solid;
|
||||||
--dropdown-menu-border-radius: 10px;
|
--dropdown-menu-border-radius: 0;
|
||||||
|
|
||||||
--switch-track-bg: rgb(50, 50, 50);
|
--switch-track-bg: rgb(50, 50, 50);
|
||||||
--switch-track-enabled-bg: var(--primary-color);
|
--switch-track-enabled-bg: var(--primary-color);
|
||||||
|
|
Reference in a new issue