b627c55b9a
We removed the blue focus on phone/domain/array/email floating inputs but we want to keep it in the app settings. <img width="644" alt="Screenshot 2024-11-05 at 15 55 04" src="https://github.com/user-attachments/assets/afcbe6b2-2d6b-4e0d-8397-4268d529127c"> <img width="606" alt="Screenshot 2024-11-05 at 15 55 23" src="https://github.com/user-attachments/assets/004becf8-41e7-45d6-9ad9-9e487b8db8f3"> <img width="351" alt="Screenshot 2024-11-05 at 15 55 33" src="https://github.com/user-attachments/assets/6a4c06e6-04d3-46bf-940b-9fd61ee91995"> <img width="330" alt="Screenshot 2024-11-05 at 15 55 41" src="https://github.com/user-attachments/assets/e6fc8bbd-eca3-47bc-93f1-d6ff8d3d8a13"> <img width="588" alt="Screenshot 2024-11-05 at 15 56 07" src="https://github.com/user-attachments/assets/0d0f5e80-3501-4346-94a1-6ea4b77ee7ba"> <img width="211" alt="Screenshot 2024-11-05 at 15 56 31" src="https://github.com/user-attachments/assets/9cd85f4d-8052-4c6b-a694-84c691c6217d">
35 lines
933 B
TypeScript
35 lines
933 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;
|
|
|
|
height: auto;
|
|
|
|
flex-direction: column;
|
|
z-index: 30;
|
|
width: ${({ width = 200 }) =>
|
|
typeof width === 'number' ? `${width}px` : width};
|
|
`;
|
|
|
|
export const DropdownMenu = StyledDropdownMenu;
|