1 files changed, 79 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Gallery/photo-jss.js b/front/odiparpack/app/components/Gallery/photo-jss.js
new file mode 100644
index 0000000..61a6961
--- /dev/null
+++ b/front/odiparpack/app/components/Gallery/photo-jss.js
@@ -0,0 +1,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;