aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ui/textarea/styles.ts
diff options
context:
space:
mode:
authorLibravatar Vijay Aravamudhan <vraravam@users.noreply.github.com>2021-10-15 16:22:25 +0530
committerLibravatar GitHub <noreply@github.com>2021-10-15 16:22:25 +0530
commitec15f83b947fb2daf4ca1a72e3af527dc89512a3 (patch)
treeea049cee5184a58b5bc09505e723cd19a736c4bd /src/components/ui/textarea/styles.ts
parentchore: move 'packages/ui' into 'src' (no longer an injected package) (#2077) (diff)
downloadferdium-app-ec15f83b947fb2daf4ca1a72e3af527dc89512a3.tar.gz
ferdium-app-ec15f83b947fb2daf4ca1a72e3af527dc89512a3.tar.zst
ferdium-app-ec15f83b947fb2daf4ca1a72e3af527dc89512a3.zip
chore: move 'packages/forms' into 'src' (no longer an injected package) (#2079)
Diffstat (limited to 'src/components/ui/textarea/styles.ts')
-rw-r--r--src/components/ui/textarea/styles.ts54
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/ui/textarea/styles.ts b/src/components/ui/textarea/styles.ts
new file mode 100644
index 000000000..f2267e000
--- /dev/null
+++ b/src/components/ui/textarea/styles.ts
@@ -0,0 +1,54 @@
1import { Property } from 'csstype';
2
3import { Theme } from '@meetfranz/theme';
4
5export default (theme: Theme) => ({
6 label: {
7 '& > div': {
8 marginTop: 5,
9 },
10 },
11 disabled: {
12 opacity: theme.inputDisabledOpacity,
13 },
14 formModifier: {
15 background: 'none',
16 border: 0,
17 borderLeft: theme.inputBorder,
18 padding: '4px 20px 0',
19 outline: 'none',
20
21 '&:active': {
22 opacity: 0.5,
23 },
24
25 '& svg': {
26 fill: theme.inputModifierColor,
27 },
28 },
29 textarea: {
30 background: 'none',
31 border: 0,
32 fontSize: theme.uiFontSize,
33 outline: 'none',
34 padding: 8,
35 width: '100%',
36 color: theme.inputColor,
37
38 '&::placeholder': {
39 color: theme.inputPlaceholderColor,
40 },
41 },
42 wrapper: {
43 background: theme.inputBackground,
44 border: theme.inputBorder,
45 borderRadius: theme.borderRadiusSmall,
46 boxSizing: 'border-box' as Property.BoxSizing,
47 display: 'flex',
48 order: 1,
49 width: '100%',
50 },
51 hasError: {
52 borderColor: theme.brandDanger,
53 },
54});