Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const textareaStyles = () => `
position: relative;
.form-textarea__textarea {
${stylers.placeholders};
background-color: ${tokens.color.white};
border: 1px solid ${tokens.border.color};
border-radius: ${tokens.border.radius};
box-shadow: none;
box-sizing: border-box;
color: ${tokens.color.black};
display: block;
margin: 0;
min-height: 80px;
padding: ${tokens.space};
resize: none;
width: 100%;
&:hover:not(.is-disabled):not(.is-readonly):not([disabled]) {
border-color: ${tokens.color.blackLighten30};
`;
export const TruncatedBox = styled(Box)`
${stylers.truncateText};
`;
export const UntruncatedBox = styled(TruncatedBox)`
${stylers.noTruncateText};
`;
export const InvisibleBox = styled(Box)`
${stylers.visuallyHidden};
`;
export const InputWithPlaceholder = styled.input`
${stylers.placeholders};
`;
export const FontScale = styled.div``;
export const FontStep = styled.span`
${props => stylers.fontSize(props.scale)};
display: inline-flex;
flex-direction: column;
line-height: 1;
> span {
padding: 0 ${tokens.space};
text-align: center;
&:last-child {
margin-left: 2px;
padding: 0 ${tokens.spaceSm};
`,
[ShirtSizes.LARGE]: `
${stylers.fontSize(2)}
margin-left: ${tokens.spaceSm};
padding: 0 ${tokens.spaceSm};
`,
};
const inputStyles = css`
line-height: 1;
position: relative;
input.form-input__input {
${stylers.placeholders}
background-color: ${tokens.color.white};
border: 1px solid ${tokens.border.color};
border-radius: ${tokens.border.radius};
box-shadow: none;
box-sizing: border-box;
color: ${tokens.color.black};
display: block;
margin: 0;
padding: 0 0 0 ${tokens.space};
padding-right: ${({ hasClearButton }) => (hasClearButton ? stylers.spacer(3) : tokens.space)};
transition: box-shadow 0.2s, color 0.2s;
width: 100%;
&:focus {
background-color: ${tokens.color.white};