Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 1x 1x 1x 1x 1x | import styled, { css } from "styled-components";
// extends React.InputHTMLAttributes<HTMLInputElement>
export interface StyledInputProps {
readonly $displaySize?: "small" | "medium" | "large";
}
export const StyledInput = styled.input<StyledInputProps>`
background: ${(props) => props.theme.colors.input.background};
color: ${(props) => props.theme.colors.input.text};
border: 1px solid ${(props) => props.theme.colors.input.border};
font-size: ${(props) => props.theme.typography.fontSize};
border-radius: ${(props) => props.theme.borderRadius}px;
padding: 5px;
box-sizing: border-box;
width: 100%;
height: 28px;
&:hover {
background: ${(props) => props.theme.colors.input.hoverBackground};
}
&:focus {
border: 1px solid ${(props) => props.theme.colors.highlight};
background: ${(props) => props.theme.colors.input.activeBackground};
}
&:disabled {
opacity: 0.5;
}
${(props) => (props.$displaySize === "small" ? smallStyles : "")}
${(props) => (props.$displaySize === "large" ? largeStyles : "")}
`;
const smallStyles = css`
font-size: 10px;
padding: 6px;
height: 22px;
`;
const largeStyles = css`
padding: 20px 10px;
font-size: 14px;
`;
// #region Textarea
export interface StyledTextareaProps {
readonly $displaySize?: "small" | "medium" | "large";
}
export const StyledTextarea = styled.textarea<StyledTextareaProps>`
background: ${(props) => props.theme.colors.input.background};
color: ${(props) => props.theme.colors.input.text};
border: 1px solid ${(props) => props.theme.colors.input.border};
font-size: ${(props) => props.theme.typography.fontSize};
border-radius: ${(props) => props.theme.borderRadius}px;
padding: 5px;
box-sizing: border-box;
width: 100%;
resize: none;
&:hover {
background: ${(props) => props.theme.colors.input.hoverBackground};
}
&:focus {
border: 1px solid ${(props) => props.theme.colors.highlight};
background: ${(props) => props.theme.colors.input.activeBackground};
}
${(props) => (props.$displaySize === "small" ? textareaSmallStyles : "")}
${(props) => (props.$displaySize === "large" ? textareaLargeStyles : "")}
`;
const textareaSmallStyles = css`
font-size: 9px;
padding: 6px;
`;
const textareaLargeStyles = css`
padding: 20px 10px;
font-size: 14px;
`;
// #endregion Textarea
|