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

Update users screens

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 16:26:07 -07:00
parent d27bda1c74
commit f3586056f4
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
15 changed files with 155 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,25 @@ const light = css<Props>`
}
`;
const checkboxStyle = css<Props>`
${tw`cursor-pointer appearance-none inline-block align-middle select-none flex-shrink-0 w-4 h-4 text-primary-400 border border-neutral-300 rounded-sm`};
color-adjust: exact;
background-origin: border-box;
transition: all 75ms linear, box-shadow 25ms linear;
&:checked {
${tw`border-transparent bg-no-repeat bg-center`};
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
background-color: currentColor;
background-size: 100% 100%;
}
&:focus {
${tw`outline-none border-primary-300`};
box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
}
`;
const inputStyle = css<Props>`
// Reset to normal styling.
${tw`appearance-none w-full min-w-0`};
@ -43,7 +62,19 @@ const inputStyle = css<Props>`
${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
`;
const Input = styled.input<Props>`${inputStyle}`;
const Input = styled.input<Props>`
&:not([type="checkbox"]):not([type="radio"]) {
${inputStyle};
}
&[type="checkbox"], &[type="radio"] {
${checkboxStyle};
&[type="radio"] {
${tw`rounded-full`};
}
}
`;
const Textarea = styled.textarea<Props>`${inputStyle}`;
export { Textarea };