zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(select): add max-height in options wrapper

This commit is contained in:
George Lima 2019-03-17 00:15:46 -03:00
parent 5e5d084f6b
commit fecf8ba6d0
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/select.js
View File

@ -70,11 +70,9 @@ const SelectMenuButton = styled.button`
border-radius: 100%;
cursor: pointer;
border: 1px solid
${(props: PropsWithTheme<{ isOpen: boolean }>) => (
props.isOpen
? props.theme.colors.dropdownOpenedIconBorder
: props.theme.colors.dropdownIconBorder
)};
${(props: PropsWithTheme<{ isOpen: boolean }>) => (props.isOpen
? props.theme.colors.dropdownOpenedIconBorder
: props.theme.colors.dropdownIconBorder)};
`;
const Icon = styled.img`
@ -86,21 +84,23 @@ const OptionsWrapper = styled.div`
display: flex;
flex-direction: column;
position: absolute;
top: 55px;
z-index: 99;
width: 100.5%;
margin-left: -0.25%;
background-color: ${props => props.theme.colors.dropdownBg};
border-radius: ${props => props.theme.colors.boxBorderRadius};
border: 1px solid ${props => props.theme.colors.inputBorder};
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String(((props.optionsAmount || 0) * 40) + 10)}px`}`};
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String((props.optionsAmount || 0) * 40 + 10)}px`}`};
overflow-y: auto;
box-shadow: 1px 3px 20px rgba(16, 19, 20, 0.1);
max-height: 65vh;
`;
const Option = styled.button`
border: none;
background: none;
height: 40px;
min-height: 40px;
background-color: ${props => props.theme.colors.dropdownBg};
cursor: pointer;
z-index: 99;
@ -203,10 +203,7 @@ class Component extends PureComponent<Props, State> {
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
bgColor={bgColor}
>
<ValueWrapper
hasValue={Boolean(value)}
capitalize={capitalize}
>
<ValueWrapper hasValue={Boolean(value)} capitalize={capitalize}>
{this.getSelectedLabel(value) || placeholder}
</ValueWrapper>
<SelectMenuButtonWrapper>