Indrakant D
d770e56e31
fixes [#5304](https://github.com/twentyhq/twenty/issues/5304#issue-2280984063) dark mode <img width="1425" alt="Screenshot 2024-05-09 at 1 59 56 AM" src="https://github.com/twentyhq/twenty/assets/60315832/70230f9e-607a-462a-8823-db8350d86bc4"> <br> <br> Light mode <img width="1448" alt="Screenshot 2024-05-09 at 2 01 06 AM" src="https://github.com/twentyhq/twenty/assets/60315832/523488a5-21de-4911-b11b-e28fba9adae6"> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
33 lines
915 B
TypeScript
33 lines
915 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: 1;
|
|
width: ${({ width = 160 }) =>
|
|
typeof width === 'number' ? `${width}px` : width};
|
|
`;
|
|
|
|
export const DropdownMenu = StyledDropdownMenu;
|