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