-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
85 lines (84 loc) · 2.44 KB
/
index.js
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
const white = '#ffffff';
const bsBorderBlue = '#66afe9';
const bsBorderGrey = '#cccccc';
const bsBoxShadowBlue = 'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);';
const bsBoxShadowGrey = 'inset 0 1px 1px rgba(0,0,0,.075);';
const bsBackgroundGrey = '#eeeeee';
const bsBackgroundOption = '#f8f9fa';
const bsBackgroundOptionSelected = '#eeeeee';
const bsControlTextColor = '#555555';
const bsControlPlaceholderColor = '#999999';
export const styles = {
control: base => ({
...base,
height: 34,
minHeight: 34,
backgroundColor: white,
borderWidth: 0,
boxShadow: 'none',
color: bsControlTextColor,
}),
valueContainer: (base, state) => ({
...base,
borderWidth: 1,
borderStyle: 'solid',
borderColor: state.selectProps.menuIsOpen ? bsBorderBlue : bsBorderGrey,
borderTopLeftRadius: 4,
borderBottomLeftRadius: 4,
boxShadow: state.selectProps.menuIsOpen ? bsBoxShadowBlue : bsBoxShadowGrey,
paddingLeft: 10,
}),
input: base => ({
...base,
color: bsControlTextColor,
}),
singleValue: base => ({
...base,
color: bsControlTextColor,
}),
placeholder: (base, state) => ({
display: state.selectProps.menuIsOpen ? 'none' : 'inline',
color: bsControlPlaceholderColor,
paddingLeft: 3,
}),
indicatorSeparator: base => ({
display: 'none',
}),
clearIndicator: base => ({
...base,
borderWidth: 1,
borderLeftWidth: 0,
borderStyle: 'solid',
borderColor: bsBorderGrey,
backgroundColor: bsBackgroundGrey,
height: 34,
width: 39,
color: bsControlTextColor,
':hover': {
color: bsControlTextColor,
},
}),
dropdownIndicator: base => ({
...base,
borderWidth: 1,
borderLeftWidth: 0,
borderStyle: 'solid',
borderColor: bsBorderGrey,
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
backgroundColor: bsBackgroundGrey,
height: 34,
width: 39,
color: bsControlTextColor,
':hover': {
color: bsControlTextColor,
},
}),
option: (base, state) => ({
...base,
color: bsControlTextColor,
backgroundColor: state.isSelected
? bsBackgroundOptionSelected
: state.isFocused ? bsBackgroundOption : white,
}),
};