68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
import React, { Component } from 'react'
|
|
import styled, {withTheme,} from 'styled-components'
|
|
export class SearchBox extends Component {
|
|
|
|
|
|
render() {
|
|
const SearchWrapper = styled.div`
|
|
margin: .5em;
|
|
border-radius: .5rem;
|
|
display: inline-flex;
|
|
white-space: nowrap;
|
|
//margin-left: auto;
|
|
transition: ease-in-out all 500ms;
|
|
flex-grow: 0;
|
|
max-width: 20em;
|
|
&:hover {
|
|
box-shadow: 0 0 1em ${this.props.theme.colours.color3};
|
|
flex-grow: 1;
|
|
input {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
input{
|
|
height: 2rem;
|
|
transition: ease all 500ms;
|
|
border-radius: .5rem 0 0 .5rem;
|
|
display: inline-flex;
|
|
background: ${this.props.theme.colours.color3};
|
|
border: none;
|
|
outline: none;
|
|
color: ${this.props.theme.colours.color10};
|
|
flex-grow: 0;
|
|
margin-left: auto;
|
|
width: 100%;
|
|
box-shadow: 0 0 .2em ${this.props.theme.colours.color5};
|
|
padding: .5em;
|
|
&:hover, &:not(:placeholder-shown){
|
|
transition: ease all 500ms;
|
|
flex-grow: 1;
|
|
}
|
|
+ button{
|
|
height: 2rem;
|
|
border: none;
|
|
transition: ease-in-out all 100ms;
|
|
color: ${this.props.theme.colours.color6};
|
|
border-radius: 0 .5rem .5rem 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background: ${this.props.theme.colours.color2};
|
|
font-size: 1em;
|
|
border: .1rem inset ${this.props.theme.colours.color3};
|
|
border-style: solid;
|
|
padding: .5em;
|
|
&:hover{
|
|
background: ${this.props.theme.colours.color6};
|
|
color: ${this.props.theme.colours.color3};
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
return (
|
|
<SearchWrapper id="header__search"><input id={this.props.id} type="text" placeholder="..."></input><button>Search</button></SearchWrapper>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withTheme(SearchBox)
|