Jason
/
safaribook-aspnet-core5-and-react
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Chap06 -> Reducing boilerplate code with React Hook Form -> Creating from styled components

master
Jason Zhu 2022-03-30 23:21:13 +11:00
parent d72ed50173
commit fc14b1bca6
1 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
QandA/frontend/src/Styles.ts
View File

@ -1,4 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { css } from '@emotion/react';
export const gray1 = '#383737'; export const gray1 = '#383737';
export const gray2 = '#5c5a5a'; export const gray2 = '#5c5a5a';
@ -33,3 +34,70 @@ export const PrimaryButton = styled.button`
cursor: not-allowed; cursor: not-allowed;
} }
`; `;
export const Fieldset = styled.fieldset`
margin: 10px auto 0 auto;
padding: 30px;
width: 350px;
background-color: ${gray6};
border-radius: 4px;
border: 1px solid ${gray5};
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
`;
export const FieldContainer = styled.label`
font-weight: 10px;
`;
const baseFieldCSS = css`
box-sizing: border-box;
font-family: ${fontFamily};
font-size: ${fontSize};
margin-bottom: 5px;
padding: 8px 10px;
border: 1px solid ${gray5};
border-radius: 3px;
color: ${gray2};
background-color: white;
width: 100%;
:focus {
outline-color: ${gray5};
}
:disabled {
background-color: ${gray6};
}
`;
export const FieldLabel = styled.label`
font-weight: bold;
`;
export const FieldInput = styled.input`
${baseFieldCSS}
`;
export const FieldTextArea = styled.textarea`
${baseFieldCSS}
height: 100px;
`;
export const FieldError = styled.div`
font-size: 12px;
color: red;
`;
export const FormButtonContainer = styled.div`
margin: 30px 0px 0px 0px;
padding: 20px 0px 0px 0px;
border-top: 1px solid ${gray5};
`;
export const SubmissionSussess = styled.div`
margin-top: 10px;
color: green;
`;
export const SubmissionFailure = styled.div`
margin-top: 10px;
color: red;
`;