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
|
const styles = theme => ({
masonry: { /* Masonry container */
[theme.breakpoints.up('sm')]: {
columnCount: 2,
},
[theme.breakpoints.up('md')]: {
columnCount: 3,
},
columnGap: '1em',
columnFill: 'initial',
marginTop: 20
},
item: {
display: 'inline-table',
margin: `0 0 ${theme.spacing(2)}px`,
width: '100%',
boxShadow: theme.shadows[4],
overflow: 'hidden',
borderRadius: 2,
transition: 'box-shadow .3s',
'&:hover': {
cursor: 'pointer',
boxShadow: theme.shadows[7],
},
'& img': {
marginBottom: -7
}
},
image: {
position: 'relative',
[theme.breakpoints.down('xs')]: {
width: '100% !important', // Overrides inline-style
},
'&:hover, &$focusVisible': {
zIndex: 1,
'& $imageBackdrop': {
opacity: 0.15,
},
},
},
focusVisible: {},
imageButton: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center',
color: theme.palette.common.white,
paddingBottom: 10
},
imageBackdrop: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0,
transition: theme.transitions.create('opacity'),
},
imageTitle: {
position: 'relative',
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
},
imageMarked: {
height: 3,
width: 18,
backgroundColor: theme.palette.common.white,
position: 'absolute',
bottom: -2,
left: 'calc(50% - 9px)',
transition: theme.transitions.create('opacity'),
},
});
export default styles;
|
