31 lines
861 B
TypeScript
31 lines
861 B
TypeScript
import styled from '@emotion/styled';
|
|
|
|
const StyledDropdownMenu = styled.div<{
|
|
disableBlur?: boolean;
|
|
disableBorder?: boolean;
|
|
width?: `${string}px` | `${number}%` | 'auto' | number;
|
|
}>`
|
|
backdrop-filter: ${({ theme, disableBlur }) =>
|
|
disableBlur ? 'none' : theme.blur.medium};
|
|
|
|
background: ${({ theme, disableBlur }) =>
|
|
disableBlur
|
|
? theme.background.primary
|
|
: theme.background.transparent.secondary};
|
|
|
|
border: ${({ disableBorder, theme }) =>
|
|
disableBorder ? 'none' : `1px solid ${theme.border.color.medium}`};
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
|
|
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
z-index: 1;
|
|
width: ${({ width = 160 }) =>
|
|
typeof width === 'number' ? `${width}px` : width};
|
|
`;
|
|
|
|
export const DropdownMenu = StyledDropdownMenu;
|