IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: added common input styles

Browse Source
This commit is contained in:
NikolayRechkin 2019-07-10 12:16:01 +03:00
parent 273c99c414
commit 3f10a4be62
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/ASC.Web.Components/src/components/text-input/common-input-styles.js Normal file
View File

@ -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;

16
web/ASC.Web.Components/src/components/text-input/index.js
View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import styled from 'styled-components'; import styled from 'styled-components';
import commonInputStyle from '../text-input/common-input-styles';
const Input = ({ isAutoFocussed, isDisabled, isReadOnly, hasError, hasWarning, scale, ...props }) => <input {...props}/>; 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' : '' disabled: props.isDisabled ? 'disabled' : ''
}))` }))`
${commonInputStyle}
-webkit-appearance: none; -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'}; background-color: ${props => props.isDisabled ? '#F8F9F9' : '#fff'};
color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'}; color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
display: flex; display: flex;
@ -84,13 +79,6 @@ const StyledInput = styled(Input).attrs((props) => ({
font-family: 'Open Sans',sans-serif font-family: 'Open Sans',sans-serif
} }
:hover{
border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'};
}
:focus{
border-color: #2DA7DB;
}
`; `;
const TextInput = props => <StyledInput {...props} /> const TextInput = props => <StyledInput {...props} />