arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 01:08:27 +00:00
Code Issues Releases Wiki Activity

Add styles to textarea

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-09-04 15:54:29 +02:00
parent cf9cff3170
commit 3f7cf6ca27
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Textarea/index.js
View File

@ -2,23 +2,34 @@ 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 colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
width: 100%; width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
`;
const Label = styled.span`
padding-bottom: 4px;
color: ${colors.TEXT_SECONDARY};
`; `;
const disabledColor = colors.TEXT_PRIMARY; const disabledColor = colors.TEXT_PRIMARY;
const TextArea = styled.textarea` const TextArea = styled.textarea`
width: 100%; width: 100%;
padding: 5px 10px; padding: 6px 12px;
box-sizing: border-box; box-sizing: border-box;
min-height: 25px; min-height: 25px;
border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.TEXT_PRIMARY}`)}; border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.DIVIDER}`)};
border-radius: 2px;
resize: none; resize: none;
outline: none; outline: none;
background: transparent; font-family: ${FONT_FAMILY.MONOSPACE};
color: ${colors.TEXT_PRIMARY};
background: ${colors.WHITE};
font-weight: ${FONT_WEIGHT.BASE}; font-weight: ${FONT_WEIGHT.BASE};
font-size: ${FONT_SIZE.BASE}; font-size: ${FONT_SIZE.BASE};
white-space: pre-wrap; /* css-3 */ white-space: pre-wrap; /* css-3 */
@ -73,34 +84,33 @@ const TextArea = styled.textarea`
opacity: 1; opacity: 1;
} }
} }
&:hover:not(:disabled),
&:focus:not(:disabled) {
border: 1px solid ${colors.TEXT_SECONDARY};
}
`; `;
const Textarea = ({ const Textarea = ({
className, className,
placeholder = '', placeholder = '',
value = '', value,
customStyle = {}, customStyle = {},
onFocus, onFocus,
onBlur, onBlur,
disabled, isDisabled,
onChange, onChange,
isError, isError,
label,
}) => ( }) => (
<Wrapper> <Wrapper>
{label && (
<Label>{label}</Label>
)}
<TextArea <TextArea
className={className} className={className}
disabled={disabled} disabled={isDisabled}
style={customStyle} style={customStyle}
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}
onChange={e => onChange(e.target.value)} onChange={onChange}
isError={isError} isError={isError}
/> />
</Wrapper> </Wrapper>
@ -115,7 +125,8 @@ Textarea.propTypes = {
customStyle: PropTypes.string, customStyle: PropTypes.string,
placeholder: PropTypes.string, placeholder: PropTypes.string,
value: PropTypes.string, value: PropTypes.string,
disabled: PropTypes.bool, isDisabled: PropTypes.bool,
label: PropTypes.string,
}; };
export default Textarea; export default Textarea;