fixed hover style
This commit is contained in:
parent
496457c427
commit
3d6e2c667f
@ -19,7 +19,7 @@ storiesOf('Components|Input', module)
|
|||||||
const scale = boolean('scale', false);
|
const scale = boolean('scale', false);
|
||||||
const isDisabled = boolean('isDisabled', false);
|
const isDisabled = boolean('isDisabled', false);
|
||||||
const id = text('id', 'fileInputId');
|
const id = text('id', 'fileInputId');
|
||||||
const name = text('name', 'demoEmailInput');
|
const name = text('name', 'demoFileInputName');
|
||||||
const hasError = boolean('hasError', false);
|
const hasError = boolean('hasError', false);
|
||||||
const hasWarning = boolean('hasWarning', false);
|
const hasWarning = boolean('hasWarning', false);
|
||||||
|
|
||||||
|
@ -23,6 +23,18 @@ const StyledFileInput = styled.div`
|
|||||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:hover{
|
||||||
|
.icon {
|
||||||
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#A3A9AE'};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:active {
|
||||||
|
.icon {
|
||||||
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#2DA7DB'};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -50,15 +62,6 @@ const StyledFileInput = styled.div`
|
|||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
|
|
||||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
||||||
|
|
||||||
:hover{
|
|
||||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#A3A9AE'};
|
|
||||||
}
|
|
||||||
|
|
||||||
:active{
|
|
||||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#2DA7DB'};
|
|
||||||
}
|
|
||||||
|
|
||||||
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}
|
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
@ -73,7 +76,6 @@ class FileInput extends Component {
|
|||||||
fileName: '',
|
fileName: '',
|
||||||
path: ''
|
path: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onIconFileClick = e => {
|
onIconFileClick = e => {
|
||||||
@ -93,6 +95,7 @@ class FileInput extends Component {
|
|||||||
const { fileName } = this.state;
|
const { fileName } = this.state;
|
||||||
const {
|
const {
|
||||||
size,
|
size,
|
||||||
|
placeholder,
|
||||||
isDisabled,
|
isDisabled,
|
||||||
scale,
|
scale,
|
||||||
hasError,
|
hasError,
|
||||||
@ -130,22 +133,26 @@ class FileInput extends Component {
|
|||||||
>
|
>
|
||||||
<TextInput
|
<TextInput
|
||||||
className="text-input"
|
className="text-input"
|
||||||
|
placeholder={placeholder}
|
||||||
value={fileName}
|
value={fileName}
|
||||||
onChange={this.onChangeFile}
|
|
||||||
onFocus={this.onIconFileClick}
|
|
||||||
size={size}
|
size={size}
|
||||||
isDisabled={isDisabled}
|
isDisabled={isDisabled}
|
||||||
hasError={hasError}
|
hasError={hasError}
|
||||||
hasWarning={hasWarning}
|
hasWarning={hasWarning}
|
||||||
scale={scale}
|
scale={scale}
|
||||||
|
onChange={this.onChangeFile}
|
||||||
|
onFocus={this.onIconFileClick}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
onInput={this.onInputFile}
|
|
||||||
ref={this.inputRef}
|
ref={this.inputRef}
|
||||||
style={{ display: 'none' }}
|
style={{ display: 'none' }}
|
||||||
|
onInput={this.onInputFile}
|
||||||
/>
|
/>
|
||||||
<div className="icon" onClick={this.onIconFileClick}>
|
<div
|
||||||
|
className="icon"
|
||||||
|
onClick={this.onIconFileClick}
|
||||||
|
>
|
||||||
<IconButton
|
<IconButton
|
||||||
iconName={"CatalogFolderIcon"}
|
iconName={"CatalogFolderIcon"}
|
||||||
size={iconSize}
|
size={iconSize}
|
||||||
|
Loading…
Reference in New Issue
Block a user