Harsh Singh
3ad1113173
Fixes: #8716 [Screencast from 2024-11-25 22-06-24.webm](https://github.com/user-attachments/assets/35bd66cc-942f-4903-abda-0d67a75b6582) --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
34 lines
936 B
TypeScript
34 lines
936 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};
|
|
|
|
color: ${({ theme }) => theme.font.color.secondary};
|
|
|
|
background: ${({ theme, disableBlur }) =>
|
|
disableBlur
|
|
? theme.background.primary
|
|
: theme.background.transparent.primary};
|
|
|
|
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: 30;
|
|
width: ${({ width = 200 }) =>
|
|
typeof width === 'number' ? `${width}px` : width};
|
|
|
|
overflow: hidden;
|
|
`;
|
|
|
|
export const DropdownMenu = StyledDropdownMenu;
|