web: components: added common input styles
This commit is contained in:
parent
273c99c414
commit
3f10a4be62
@ -0,0 +1,20 @@
|
||||
import {css} from 'styled-components';
|
||||
|
||||
const commonInputStyle = css`
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px;
|
||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
|
||||
:hover{
|
||||
border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'};
|
||||
}
|
||||
:focus{
|
||||
border-color: #2DA7DB;
|
||||
}
|
||||
`;
|
||||
|
||||
export default commonInputStyle;
|
@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styled from 'styled-components';
|
||||
import commonInputStyle from '../text-input/common-input-styles';
|
||||
|
||||
const Input = ({ isAutoFocussed, isDisabled, isReadOnly, hasError, hasWarning, scale, ...props }) => <input {...props}/>;
|
||||
|
||||
@ -22,14 +23,8 @@ const StyledInput = styled(Input).attrs((props) => ({
|
||||
disabled: props.isDisabled ? 'disabled' : ''
|
||||
|
||||
}))`
|
||||
${commonInputStyle}
|
||||
-webkit-appearance: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px;
|
||||
border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
background-color: ${props => props.isDisabled ? '#F8F9F9' : '#fff'};
|
||||
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
|
||||
display: flex;
|
||||
@ -84,13 +79,6 @@ const StyledInput = styled(Input).attrs((props) => ({
|
||||
font-family: 'Open Sans',sans-serif
|
||||
}
|
||||
|
||||
:hover{
|
||||
border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'};
|
||||
}
|
||||
:focus{
|
||||
border-color: #2DA7DB;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const TextInput = props => <StyledInput {...props} />
|
||||
|
Loading…
Reference in New Issue
Block a user