62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
/**
|
|
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
|
|
*/
|
|
import * as styled from 'styled-components';
|
|
import Input from 'components/forms/Input';
|
|
import Theme from 'theme';
|
|
|
|
const {spacing, colors, typography, primaryBorderRadius} = Theme;
|
|
|
|
export const DropdownContainer = styled.default.div`
|
|
width: 100%;
|
|
position: relative;
|
|
margin: ${spacing.xSmall} 0;
|
|
`;
|
|
|
|
export const DropdownInput = styled.default(Input)<{showMenu?: boolean}>`
|
|
${({showMenu}) =>
|
|
showMenu &&
|
|
styled.css`
|
|
border-bottom-left-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-width: 0;
|
|
`}
|
|
`;
|
|
|
|
export const DropdownMenu = styled.default.div`
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
top: calc(100% - 4px);
|
|
position: absolute;
|
|
height: auto;
|
|
max-height: 210px;
|
|
border: 1px solid ${colors.gray400};
|
|
border-top-width: 0;
|
|
z-index: 4;
|
|
background-color: ${colors.white};
|
|
border-bottom-left-radius: ${primaryBorderRadius};
|
|
border-bottom-right-radius: ${primaryBorderRadius};
|
|
`;
|
|
|
|
export const DropdownMenuItem = styled.default.div<{
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
selected?: boolean;
|
|
}>`
|
|
line-height: ${spacing.large};
|
|
padding: ${spacing.xsmall} ${spacing.medium};
|
|
font-size: ${typography.fontSizeS};
|
|
word-wrap: break-word;
|
|
${({active, selected, disabled}) => styled.css`
|
|
background-color: ${active || selected ? colors.gray300 : 'transparent'};
|
|
font-weight: ${selected ? 'bold' : 'normal'};
|
|
color: ${disabled ? colors.gray500 : colors.gray900}
|
|
|
|
:hover{
|
|
background-color: ${disabled ? colors.white : colors.gray300};
|
|
cursor: ${disabled ? 'text' : 'pointer'};
|
|
}
|
|
`}
|
|
`;
|