coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Increase accessibility of search input

Browse Source
This commit is contained in:
Tom Moor
2019-01-09 22:15:09 -08:00
parent 4ba10fc5f7
commit c54c3d963e
1 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/scenes/Search/components/SearchField.js
View File

@ -1,5 +1,6 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { lighten } from 'polished';
import styled, { withTheme } from 'styled-components'; import styled, { withTheme } from 'styled-components';
import { SearchIcon } from 'outline-icons'; import { SearchIcon } from 'outline-icons';
import Flex from 'shared/components/Flex'; import Flex from 'shared/components/Flex';
@ -22,11 +23,11 @@ class SearchField extends React.Component<Props> {
render() { render() {
return ( return (
<Flex align="center"> <Field align="center">
<StyledIcon <StyledIcon
type="Search" type="Search"
size={46} size={48}
color={this.props.theme.slateLight} color={lighten(0.1, this.props.theme.slate)}
onClick={this.focusInput} onClick={this.focusInput}
/> />
<StyledInput <StyledInput
@ -38,36 +39,47 @@ class SearchField extends React.Component<Props> {
type="search" type="search"
autoFocus autoFocus
/> />
</Flex> </Field>
); );
} }
} }
const Field = styled(Flex)`
position: relative;
margin-bottom: 8px;
`;
const StyledInput = styled.input` const StyledInput = styled.input`
width: 100%; width: 100%;
padding: 10px; padding: 10px 10px 10px 60px;
font-size: 48px; font-size: 36px;
font-weight: 400; font-weight: 400;
outline: none; outline: none;
border: 0; border: 0;
background: ${props => props.theme.smoke};
border-radius: 4px;
::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: ${props => props.theme.slateLight}; color: ${props => props.theme.slate};
} }
:-moz-placeholder { :-moz-placeholder {
color: ${props => props.theme.slateLight}; color: ${props => props.theme.slate};
} }
::-moz-placeholder { ::-moz-placeholder {
color: ${props => props.theme.slateLight}; color: ${props => props.theme.slate};
} }
:-ms-input-placeholder { :-ms-input-placeholder {
color: ${props => props.theme.slateLight}; color: ${props => props.theme.slate};
} }
`; `;
const StyledIcon = styled(SearchIcon)` const StyledIcon = styled(SearchIcon)`
position: relative; position: absolute;
top: 4px; left: 8px;
`; `;
export default withTheme(SearchField); export default withTheme(SearchField);