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
|
// ========== Desktop ==========
const desktopTitle = {
fontWeight: 500,
};
const desktopPaper = classColor => ({
width: '100%',
borderTop: `5px solid ${classColor}`,
padding: '30px',
});
const desktopTabs = {
marginLeft: '-20px',
marginRight: '-20px',
marginBottom: '-30px',
marginTop: '30px',
};
const desktopAvatar = {
width: 30,
height: 30,
};
const desktopTooltip = {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
};
const desktop = {
title: desktopTitle,
paper: desktopPaper,
tabs: desktopTabs,
avatar: desktopAvatar,
tooltip: desktopTooltip,
};
// ========== Mobile ==========
const mobileTitle = {
fontWeight: 500,
fontSize: '25px',
};
const mobilePaper = classColor => ({
width: '100%',
borderTop: `5px solid ${classColor}`,
padding: '20px',
});
const mobileTabs = {
marginLeft: '-10px',
marginRight: '-10px',
marginBottom: '-20px',
marginTop: '30px',
};
const mobileAvatar = {
width: 30,
height: 30,
};
const mobileTooltip = {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
};
const mobile = {
title: mobileTitle,
paper: mobilePaper,
tabs: mobileTabs,
avatar: mobileAvatar,
tooltip: mobileTooltip,
};
// ========== Unset ==========
const unset = {
title: null,
paper: null,
tabs: null,
avatar: null,
tooltip: null,
};
const styles = { desktop, mobile, unset };
export default styles;
|
