roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-05-06 00:32:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

104
packages/design-system/atoms/text-input/TextInput.tsx
View file

@ -3,81 +3,81 @@ import * as React from 'react';
import styled from 'styled-components';
const StyledTextInput = styled.input`
appearance: none;
border: 1px solid ${palette.taupe200};
border-radius: 3px;
line-height: 163%;
padding: 12px 16px;
font-size: 1.2rem;
background-color: ${palette.taupe300};
color: ${palette.grey600};
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
position: relative;
width: 100%;
box-sizing: border-box;
max-width: 97vw;
appearance: none;
border: 1px solid ${palette.taupe200};
border-radius: 3px;
line-height: 163%;
padding: 12px 16px;
font-size: 1.2rem;
background-color: ${palette.taupe300};
color: ${palette.grey600};
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
position: relative;
width: 100%;
box-sizing: border-box;
max-width: 97vw;
:focus {
outline: none;
border-color: ${palette.grey100};
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
}
:focus {
outline: none;
border-color: ${palette.grey100};
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
}
[disabled],
:disabled {
cursor: not-allowed;
color: rgba(255, 255, 255, 0.75);
font-style: italic;
}
[disabled],
:disabled {
cursor: not-allowed;
color: rgba(255, 255, 255, 0.75);
font-style: italic;
}
:hover:not([disabled]) {
border-color: ${palette.grey100};
}
:hover:not([disabled]) {
border-color: ${palette.grey100};
}
::placeholder {
color: ${palette.taupe500};
}
::placeholder {
color: ${palette.taupe500};
}
`;
type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
_override?: React.Component;
_override?: React.Component;
};
export const TextInput = (props: TextInputProps) => {
const { ...rest } = props;
return <StyledTextInput {...rest} />;
const { ...rest } = props;
return <StyledTextInput {...rest} />;
};
const StyledTextInputWithIcon = styled(StyledTextInput)`
padding-left: 36px;
padding-left: 36px;
`;
const IconContainer = styled.div`
position: absolute;
left: 12px;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 12px;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
`;
const IconInputContainer = styled.div`
position: relative;
width: 100%;
position: relative;
width: 100%;
`;
type TextInputWithIconProps = TextInputProps & {
icon: React.ReactNode;
icon: React.ReactNode;
};
export const TextInputWithIcon = (props: TextInputWithIconProps) => {
const { icon, ...rest } = props;
return (
<IconInputContainer>
<IconContainer>{icon}</IconContainer>
<StyledTextInputWithIcon {...rest}></StyledTextInputWithIcon>
</IconInputContainer>
);
const { icon, ...rest } = props;
return (
<IconInputContainer>
<IconContainer>{icon}</IconContainer>
<StyledTextInputWithIcon {...rest}></StyledTextInputWithIcon>
</IconInputContainer>
);
};