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
90
91
92
93
94
95
96
97
98
99
100
101
|
import { Property } from 'csstype';
import { Theme } from '../../../themes';
const prefixStyles = (theme: Theme) => ({
background: theme.inputPrefixBackground,
color: theme.inputPrefixColor,
lineHeight: `${theme.inputHeight}px`,
padding: '0 10px',
fontSize: theme.uiFontSize,
});
export default (theme: Theme) => ({
label: {
'& > div': {
marginTop: 5,
},
},
disabled: {
opacity: theme.inputDisabledOpacity,
},
formModifier: {
background: 'none',
border: 0,
borderLeft: theme.inputBorder,
padding: '4px 20px 0',
outline: 'none',
'&:active': {
opacity: 0.5,
},
'& svg': {
fill: theme.inputModifierColor,
},
},
input: {
background: 'none',
border: 0,
fontSize: theme.uiFontSize,
outline: 'none',
padding: 8,
width: '100%',
color: theme.inputColor,
'&::placeholder': {
color: theme.inputPlaceholderColor,
},
},
passwordScore: {
background: theme.inputScorePasswordBackground,
borderTopWidth: 0,
borderBottomLeftRadius: theme.borderRadiusSmall,
borderBottomRightRadius: theme.borderRadiusSmall,
display: 'block',
flexBasis: '100%',
height: 5,
overflow: 'hidden',
'& meter': {
display: 'block',
height: '100%',
width: '100%',
'&::-webkit-meter-bar': {
background: 'none',
},
'&::-webkit-meter-even-less-good-value': {
background: theme.brandDanger,
},
'&::-webkit-meter-suboptimum-value': {
background: theme.brandWarning,
},
'&::-webkit-meter-optimum-value': {
background: theme.brandSuccess,
},
},
},
prefix: prefixStyles(theme),
suffix: prefixStyles(theme),
wrapper: {
background: theme.inputBackground,
border: theme.inputBorder,
borderRadius: theme.borderRadiusSmall,
boxSizing: 'border-box' as Property.BoxSizing,
display: 'flex',
height: theme.inputHeight,
order: 1,
width: '100%',
},
hasPasswordScore: {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
},
hasError: {
borderColor: theme.brandDanger,
},
});
|
