StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Apply new eslint rules; default to prettier for styling

Browse source
This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions
Download patch file Download diff file Expand all files Collapse all files

42
resources/scripts/components/elements/Input.tsx
View file

@ -7,9 +7,11 @@ export interface Props {
}
const light = css<Props>`
${tw`bg-white border-neutral-200 text-neutral-800`};
&:focus { ${tw`border-primary-400`} }
${tw`bg-white border-neutral-200 text-neutral-800`};
&:focus {
${tw`border-primary-400`}
}
&:disabled {
${tw`bg-neutral-100 border-neutral-200`};
}
@ -40,43 +42,47 @@ const inputStyle = css<Props>`
${tw`appearance-none outline-none w-full min-w-0`};
${tw`p-3 border-2 rounded text-sm transition-all duration-150`};
${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none focus:ring-0`};
& + .input-help {
${tw`mt-1 text-xs`};
${props => props.hasError ? tw`text-red-200` : tw`text-neutral-200`};
${(props) => (props.hasError ? tw`text-red-200` : tw`text-neutral-200`)};
}
&:required, &:invalid {
&:required,
&:invalid {
${tw`shadow-none`};
}
&:not(:disabled):not(:read-only):focus {
${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
${props => props.hasError && tw`border-red-300 ring-red-200`};
${(props) => props.hasError && tw`border-red-300 ring-red-200`};
}
&:disabled {
${tw`opacity-75`};
}
${props => props.isLight && light};
${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
${(props) => props.isLight && light};
${(props) => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
`;
const Input = styled.input<Props>`
&:not([type="checkbox"]):not([type="radio"]) {
&:not([type='checkbox']):not([type='radio']) {
${inputStyle};
}
&[type="checkbox"], &[type="radio"] {
&[type='checkbox'],
&[type='radio'] {
${checkboxStyle};
&[type="radio"] {
&[type='radio'] {
${tw`rounded-full`};
}
}
`;
const Textarea = styled.textarea<Props>`${inputStyle}`;
const Textarea = styled.textarea<Props>`
${inputStyle}
`;
export { Textarea };
export default Input;