1 files changed, 294 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Widget/widget-jss.js b/front/odiparpack/app/components/Widget/widget-jss.js
new file mode 100644
index 0000000..d553eaa
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/widget-jss.js
@@ -0,0 +1,294 @@
+import colorfull from 'ba-api/colorfull';
+
+const styles = theme => ({
+  rootCounter: {
+    flexGrow: 1,
+    padding: theme.spacing(1.5),
+    [theme.breakpoints.up('lg')]: {
+      padding: `${theme.spacing(1.5)}px ${theme.spacing(1)}px`,
+    },
+    [theme.breakpoints.down('xs')]: {
+      margin: `0 ${theme.spacing(1) * -1.5}px`,
+    }
+  },
+  rootCounterFull: {
+    flexGrow: 1,
+  },
+  divider: {
+    margin: `${theme.spacing(3)}px 0`
+  },
+  dividerBig: {
+    margin: `${theme.spacing(2)}px 0`
+  },
+  centerItem: {},
+  secondaryWrap: {
+    background: theme.palette.grey[100],
+    padding: 20,
+    borderRadius: 4,
+    justifyContent: 'space-around',
+    '& > $centerItem': {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    '& li': {
+      marginBottom: 30
+    },
+    '& $chip': {
+      top: 70,
+      position: 'absolute',
+      fontSize: 11,
+      fontWeight: 400,
+    }
+  },
+  bigResume: {
+    marginBottom: 20,
+    justifyContent: 'space-between',
+    display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+      height: 160,
+      display: 'block',
+    },
+    '& li': {
+      paddingRight: 20,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      [theme.breakpoints.down('sm')]: {
+        width: '50%',
+        float: 'left'
+      },
+    },
+  },
+  avatar: {
+    width: 50,
+    height: 50,
+    marginRight: 10,
+    '& svg': {
+      fontSize: 32
+    }
+  },
+  pinkAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[0],
+  },
+  purpleAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[1],
+  },
+  blueAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[2],
+  },
+  tealAvatar: {
+    margin: 10,
+    color: '#fff',
+    backgroundColor: colorfull[3],
+  },
+  pinkProgress: {
+    color: colorfull[0],
+    '& div': {
+      backgroundColor: colorfull[0],
+    }
+  },
+  greenProgress: {
+    color: colorfull[5],
+    '& div': {
+      backgroundColor: colorfull[5],
+    }
+  },
+  orangeProgress: {
+    color: colorfull[4],
+    '& div': {
+      backgroundColor: colorfull[4],
+    }
+  },
+  purpleProgress: {
+    color: colorfull[1],
+    '& div': {
+      backgroundColor: colorfull[1],
+    }
+  },
+  blueProgress: {
+    color: colorfull[2],
+    '& div': {
+      backgroundColor: colorfull[2],
+    }
+  },
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  chip: {
+    margin: '8px 0 8px auto',
+    color: '#FFF'
+  },
+  table: {
+    minWidth: 500,
+    '& td': {
+      padding: 10,
+    }
+  },
+  user: {
+    display: 'flex',
+  },
+  textCenter: {
+    textAlign: 'center'
+  },
+  red: {},
+  orange: {},
+  indigo: {},
+  purple: {},
+  lime: {},
+  taskIcon: {
+    display: 'block',
+    textAlign: 'center',
+    margin: '0 10px',
+    '&$red': {
+      color: colorfull[0],
+    },
+    '&$orange': {
+      color: colorfull[2],
+    },
+    '&$purple': {
+      color: colorfull[1],
+    },
+    '&$lime': {
+      color: colorfull[3],
+    },
+    '&$indigo': {
+      color: colorfull[4],
+    }
+  },
+  done: {},
+  listItem: {
+    padding: 5,
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[3],
+    '&:hover': {
+      backgroundColor: theme.palette.grey[200]
+    },
+    '&$done': {
+      textDecoration: 'line-through'
+    }
+  },
+  title: {},
+  subtitle: {},
+  styledPaper: {
+    backgroundColor: theme.palette.secondary.main,
+    padding: 20,
+    '& $title, & $subtitle': {
+      color: theme.palette.common.white
+    }
+  },
+  progressWidget: {
+    marginTop: 20,
+    background: theme.palette.secondary.dark,
+    '& div': {
+      background: theme.palette.primary.light,
+    }
+  },
+  chipProgress: {
+    marginTop: 20,
+    background: theme.palette.primary.light,
+    color: theme.palette.secondary.main,
+    '& div': {
+      background: colorfull[4],
+      color: theme.palette.common.white
+    }
+  },
+  taskStatus: {
+    display: 'flex',
+    alignItems: 'center',
+    '& a': {
+      textDecoration: 'none',
+      color: theme.palette.primary.main
+    }
+  },
+  counterIcon: {
+    color: theme.palette.common.white,
+    opacity: 0.7,
+    fontSize: 84
+  },
+  progressCircle: {
+    margin: 20
+  },
+  itemCarousel: {
+    textAlign: 'center',
+    '& img': {
+      margin: '10px auto'
+    }
+  },
+  albumRoot: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    overflow: 'hidden',
+    backgroundColor: theme.palette.background.paper,
+  },
+  gridList: {
+    height: 'auto',
+    [theme.breakpoints.up('sm')]: {
+      width: 500,
+    },
+  },
+  icon: {
+    color: 'rgba(255, 255, 255, 0.54)',
+  },
+  img: {
+    maxWidth: 'none'
+  },
+  mapWrap: {
+    position: 'relative'
+  },
+  address: {
+    [theme.breakpoints.up('md')]: {
+      top: '50%',
+      right: 60,
+      position: 'absolute',
+      transform: 'translate(0, -50%)'
+    },
+  },
+  carouselItem: {
+    margin: '0 5px',
+    boxShadow: theme.shadows[3],
+    borderRadius: 4,
+    overflow: 'hidden',
+    height: 250,
+    padding: '60px 20px',
+    position: 'relative'
+  },
+  iconBg: {
+    color: theme.palette.common.white,
+    opacity: 0.25,
+    position: 'absolute',
+    bottom: 10,
+    right: 10,
+    fontSize: 96
+  },
+  carouselTitle: {
+    color: theme.palette.common.white,
+    display: 'flex',
+    flexDirection: 'column',
+    fontWeight: 500,
+    fontSize: 20
+  },
+  carouselDesc: {
+    color: theme.palette.common.white
+  },
+  chartWrap: {
+    overflow: 'auto',
+  },
+  chartFluid: {
+    width: '100%',
+    minWidth: 400,
+    height: 300,
+  }
+});
+
+export default styles;