Add focused style, remove input.css, make it focus on 'v' click

master
Vitaliy Filippov 2019-08-30 18:32:53 +03:00
parent ce9c0fb774
commit 6b9dbe3b73
3 changed files with 11 additions and 53 deletions

View File

@ -213,11 +213,13 @@ export default class Selectbox extends React.PureComponent
onKeyDown={this.onKeyDown}
/>;
return (<div ref={p.ref}
className={autocomplete_css.input + (this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') +
className={autocomplete_css.input +
(p.focused ? ' '+(autocomplete_css.focused||'') : '') +
(this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') +
(this.props.multiple
? ' '+(autocomplete_css.multiple||'')
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : ''))}
onClick={this.props.multiple ? this.focusInput : undefined}>
onClick={this.focusInput}>
{this.props.multiple
? <div className={autocomplete_css.values}>
<span className={autocomplete_css.inputElement+' '+autocomplete_css.sizer} ref={this.setSizer}>

View File

@ -10,6 +10,11 @@
position: relative;
}
.input.focused
{
box-shadow: inset 0 0 0 1px #7ab1ff;
}
.input:after
{
border: 0;
@ -150,8 +155,8 @@
left: auto;
top: 4px;
right: 28px;
line-height: 18px;
font-size: 18px;
line-height: 20px;
font-size: 17px;
text-align: center;
padding: 0;
}

View File

@ -1,49 +0,0 @@
.input
{
background: white;
border: 1px solid #d8d8d8;
border-radius: 0;
font-size: inherit;
padding: 0;
color: rgb(33, 33, 33);
position: relative;
}
.inputElement
{
font-size: inherit;
border: 0;
padding: 0 2em 0 .5em;
margin: 0;
box-sizing: border-box;
display: block;
outline: none;
width: 100%;
}
.inputElement:focus
{
box-shadow: inset 0 0 0 1px #4196d4;
display: block;
}
input.inputElement
{
line-height: 200%;
height: 28px;
}
.inputElement::-ms-clear
{
display: none;
}
.bar
{
display: none;
}
.bar:after, .bar:before
{
display: none;
}