diff options
Diffstat (limited to 'packages/forms/src/input/styles.ts')
-rw-r--r-- | packages/forms/src/input/styles.ts | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts new file mode 100644 index 000000000..e2ab30a4f --- /dev/null +++ b/packages/forms/src/input/styles.ts | |||
@@ -0,0 +1,101 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import CSS from 'csstype'; | ||
3 | |||
4 | const prefixStyles = (theme: Theme) => ({ | ||
5 | background: theme.inputPrefixBackground, | ||
6 | color: theme.inputPrefixColor, | ||
7 | lineHeight: `${theme.inputHeight}px`, | ||
8 | padding: '0 10px', | ||
9 | fontSize: theme.uiFontSize, | ||
10 | }); | ||
11 | |||
12 | export default (theme: Theme) => ({ | ||
13 | label: { | ||
14 | '& > div': { | ||
15 | marginTop: 5, | ||
16 | } | ||
17 | }, | ||
18 | disabled: { | ||
19 | opacity: theme.inputDisabledOpacity, | ||
20 | }, | ||
21 | formModifier: { | ||
22 | background: 'none', | ||
23 | border: 0, | ||
24 | borderLeft: theme.inputBorder, | ||
25 | padding: '4px 20px 0', | ||
26 | outline: 'none', | ||
27 | |||
28 | '&:active': { | ||
29 | opacity: 0.5, | ||
30 | }, | ||
31 | |||
32 | '& svg': { | ||
33 | fill: theme.inputModifierColor, | ||
34 | }, | ||
35 | }, | ||
36 | input: { | ||
37 | background: 'none', | ||
38 | border: 0, | ||
39 | fontSize: theme.uiFontSize, | ||
40 | outline: 'none', | ||
41 | padding: 8, | ||
42 | width: '100%', | ||
43 | color: theme.inputColor, | ||
44 | |||
45 | '&::placeholder': { | ||
46 | color: theme.inputPlaceholderColor, | ||
47 | }, | ||
48 | }, | ||
49 | passwordScore: { | ||
50 | background: theme.inputScorePasswordBackground, | ||
51 | border: theme.inputBorder, | ||
52 | borderTopWidth: 0, | ||
53 | borderBottomLeftRadius: theme.borderRadiusSmall, | ||
54 | borderBottomRightRadius: theme.borderRadiusSmall, | ||
55 | display: 'block', | ||
56 | flexBasis: '100%', | ||
57 | height: 5, | ||
58 | overflow: 'hidden', | ||
59 | |||
60 | '& meter': { | ||
61 | display: 'block', | ||
62 | height: '100%', | ||
63 | width: '100%', | ||
64 | |||
65 | '&::-webkit-meter-bar': { | ||
66 | background: 'none', | ||
67 | }, | ||
68 | |||
69 | '&::-webkit-meter-even-less-good-value': { | ||
70 | background: theme.brandDanger, | ||
71 | }, | ||
72 | |||
73 | '&::-webkit-meter-suboptimum-value': { | ||
74 | background: theme.brandWarning, | ||
75 | }, | ||
76 | |||
77 | '&::-webkit-meter-optimum-value': { | ||
78 | background: theme.brandSuccess, | ||
79 | }, | ||
80 | }, | ||
81 | }, | ||
82 | prefix: prefixStyles(theme), | ||
83 | suffix: prefixStyles(theme), | ||
84 | wrapper: { | ||
85 | background: theme.inputBackground, | ||
86 | border: theme.inputBorder, | ||
87 | borderRadius: theme.borderRadiusSmall, | ||
88 | boxSizing: 'border-box' as CSS.BoxSizingProperty, | ||
89 | display: 'flex', | ||
90 | height: theme.inputHeight, | ||
91 | order: 1, | ||
92 | width: '100%', | ||
93 | }, | ||
94 | hasPasswordScore: { | ||
95 | borderBottomLeftRadius: 0, | ||
96 | borderBottomRightRadius: 0, | ||
97 | }, | ||
98 | hasError: { | ||
99 | borderColor: theme.brandDanger, | ||
100 | }, | ||
101 | }); | ||