arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-27 18:58:08 +00:00
Code Issues Releases Wiki Activity

set border color when focused for input, button, textarea, select

Browse Source
This commit is contained in:
slowbackspace 2019-01-18 14:50:26 +01:00
parent 449e97f377
commit 8edb6b66b8
4 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Button/index.js
View File

@ -37,6 +37,10 @@ const Wrapper = styled.button`
background: ${colors.GREEN_TERTIARY};
}
&:focus {
border-color: ${colors.INPUT_BORDER_FOCUSED};
}
${props => props.isDisabled && css`
pointer-events: none;
color: ${colors.TEXT_SECONDARY};
@ -48,6 +52,10 @@ const Wrapper = styled.button`
color: ${colors.TEXT_SECONDARY};
border: 1px solid ${colors.DIVIDER};
&:focus {
border-color: ${colors.INPUT_BORDER_FOCUSED};
}
&:hover {
color: ${colors.TEXT_PRIMARY};
background: ${colors.DIVIDER};

5
src/components/Select/index.js
View File

@ -11,17 +11,16 @@ const styles = isSearchable => ({
width: '100%',
color: colors.TEXT_SECONDARY,
}),
control: (base, { isDisabled }) => ({
control: (base, { isDisabled, isFocused }) => ({
...base,
minHeight: 'initial',
height: '40px',
borderRadius: '2px',
borderColor: colors.DIVIDER,
borderColor: isFocused ? colors.INPUT_BORDER_FOCUSED : colors.DIVIDER,
boxShadow: 'none',
background: isDisabled ? colors.LANDING : colors.WHITE,
'&:hover': {
cursor: isSearchable ? 'text' : 'pointer',
borderColor: colors.DIVIDER,
},
}),
indicatorSeparator: () => ({

4
src/components/Textarea/index.js
View File

@ -67,6 +67,10 @@ const StyledTextarea = styled(Textarea)`
color: ${colors.TEXT_SECONDARY};
}
&:focus {
border-color: ${colors.INPUT_BORDER_FOCUSED};
}
&:disabled {
pointer-events: none;
background: ${colors.GRAY_LIGHT};

4
src/components/inputs/Input/index.js
View File

@ -59,6 +59,10 @@ const StyledInput = styled.input`
background-color: ${colors.WHITE};
transition: ${TRANSITION.HOVER};
&:focus {
border-color: ${colors.INPUT_BORDER_FOCUSED};
}
&:disabled {
pointer-events: none;
background: ${colors.GRAY_LIGHT};