arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-15 02:20:58 +00:00
Code Issues Releases Wiki Activity

Merge pull request #345 from trezor/fix/focus-border-color

Browse Source 
Fix/focus border color
This commit is contained in:
Vladimir Volek 2019-01-22 14:01:06 +01:00 committed by GitHub
commit 4925d8412f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,6 +37,11 @@ const Wrapper = styled.button`
background: ${colors.GREEN_TERTIARY}; background: ${colors.GREEN_TERTIARY};
} }
&:focus {
border-color: ${colors.INPUT_FOCUSED_BORDER};
box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
}
${props => props.isDisabled && css` ${props => props.isDisabled && css`
pointer-events: none; pointer-events: none;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
@ -48,6 +53,10 @@ const Wrapper = styled.button`
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
border: 1px solid ${colors.DIVIDER}; border: 1px solid ${colors.DIVIDER};
&:focus {
border-color: ${colors.INPUT_FOCUSED_BORDER};
}
&:hover { &:hover {
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
background: ${colors.DIVIDER}; background: ${colors.DIVIDER};
@ -64,6 +73,11 @@ const Wrapper = styled.button`
border: 0px; border: 0px;
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
&:focus {
color: ${colors.TEXT_PRIMARY};
box-shadow: none;
}
&:hover, &:hover,
&:active { &:active {
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};

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

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

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

@ -67,6 +67,11 @@ const StyledTextarea = styled(Textarea)`
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
} }
&:focus {
border-color: ${colors.INPUT_FOCUSED_BORDER};
box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
}
&:disabled { &:disabled {
pointer-events: none; pointer-events: none;
background: ${colors.GRAY_LIGHT}; background: ${colors.GRAY_LIGHT};

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

@ -59,6 +59,11 @@ const StyledInput = styled.input`
background-color: ${colors.WHITE}; background-color: ${colors.WHITE};
transition: ${TRANSITION.HOVER}; transition: ${TRANSITION.HOVER};
&:focus {
border-color: ${colors.INPUT_FOCUSED_BORDER};
box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
}
&:disabled { &:disabled {
pointer-events: none; pointer-events: none;
background: ${colors.GRAY_LIGHT}; background: ${colors.GRAY_LIGHT};

3
src/config/colors.js
View File

@ -34,4 +34,7 @@ export default {
LABEL_COLOR: '#A9A9A9', LABEL_COLOR: '#A9A9A9',
TOOLTIP_BACKGROUND: '#333333', TOOLTIP_BACKGROUND: '#333333',
INPUT_FOCUSED_BORDER: '#A9A9A9',
INPUT_FOCUSED_SHADOW: '#d6d7d7',
}; };