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
|
import { pink } from '@material-ui/core/colors';
const styles = theme => ({
card: {
display: 'flex',
justifyContent: 'space-between'
},
content: {
flex: '1 0 auto',
},
cover: {
width: 150,
height: 150,
},
avatar: {
width: 40,
height: 40
},
cardSocmed: {
[theme.breakpoints.up('md')]: {
marginLeft: 90,
minWidth: 400,
},
marginBottom: theme.spacing(3),
position: 'relative',
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
actions: {
display: 'flex',
},
expandOpen: {
transform: 'rotate(180deg)',
},
iconBullet: {},
icon: {},
timeline: {
position: 'relative',
'&:before': {
left: 39,
content: '""',
top: 40,
height: '101%',
border: `1px solid ${theme.palette.grey[300]}`,
position: 'absolute',
[theme.breakpoints.down('sm')]: {
display: 'none'
},
},
'& li': {
position: 'relative',
display: 'block'
},
'& time': {
top: 70,
left: 20,
position: 'absolute',
textAlign: 'center',
background: theme.palette.common.white,
boxShadow: theme.shadows[3],
padding: '4px 40px 4px 15px',
borderLeft: `3px solid ${theme.palette.secondary.main}`
},
'& $iconBullet': {
position: 'absolute',
borderRadius: '50%',
top: 20,
width: 40,
height: 40,
background: theme.palette.secondary.main,
boxShadow: theme.shadows[5],
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
left: 20,
'& $icon': {
color: theme.palette.common.white,
},
[theme.breakpoints.down('sm')]: {
display: 'none'
},
},
},
rightIcon: {
marginLeft: 'auto',
display: 'flex',
alignItems: 'center'
},
liked: {
color: pink[500]
}
});
export default styles;
|
