complete frontend restyling

2019-01-29 20:30:43 +01:00
parent c7aa9ca499
commit 2559afc1e8
34 changed files with 1235 additions and 145 deletions
--- a/frontend-react/src/assets/sidebarStyle.js
+++ b/frontend-react/src/assets/sidebarStyle.js
@@ -0,0 +1,171 @@
+import {
+  boxShadow,
+  defaultFont,
+  primaryColor,
+  primaryBoxShadow
+} from "./globalStyle";
+
+const sidebarStyle = theme => ({
+  drawerPaper: {
+    border: "none",
+    position: "relative",
+    "overflow-y": "auto",
+    "overflow-x": "none",
+    zIndex: "1",
+    ...boxShadow,
+    "grid-area": "sidebar",
+    [theme.breakpoints.down("sm")]: {
+      position: "relative"
+    }
+  },
+  logo: {
+    position: "relative",
+    padding: "15px 15px",
+    zIndex: "4",
+    "&:after": {
+      content: '""',
+      position: "absolute",
+      bottom: "0",
+
+      height: "1px",
+      right: "15px",
+      width: "calc(100% - 30px)",
+      backgroundColor: "rgba(180, 180, 180, 0.3)"
+    }
+  },
+  logoLink: {
+    ...defaultFont,
+    textTransform: "uppercase",
+    padding: "5px 0",
+    display: "block",
+    fontSize: "18px",
+    textAlign: "left",
+    fontWeight: "400",
+    lineHeight: "30px",
+    textDecoration: "none",
+    backgroundColor: "transparent",
+    "&,&:hover": {
+      color: "#FFFFFF"
+    }
+  },
+  logoImage: {
+    width: "30px",
+    display: "inline-block",
+    maxHeight: "30px",
+    marginLeft: "10px",
+    marginRight: "15px"
+  },
+  img: {
+    width: "35px",
+    top: "22px",
+    position: "absolute",
+    verticalAlign: "middle",
+    border: "0"
+  },
+  background: {
+    position: "absolute",
+    zIndex: "1",
+    height: "100%",
+    width: "100%",
+    display: "block",
+    top: "0",
+    left: "0",
+    backgroundSize: "cover",
+    backgroundPosition: "center center",
+    "&:after": {
+      position: "absolute",
+      zIndex: "3",
+      width: "100%",
+      height: "100%",
+      content: '""',
+      display: "block",
+      background: "#000",
+      opacity: ".8"
+    }
+  },
+  list: {
+    marginTop: "20px",
+    paddingLeft: "0",
+    paddingTop: "0",
+    paddingBottom: "0",
+    marginBottom: "0",
+    listStyle: "none",
+    position: "unset"
+  },
+  item: {
+    position: "relative",
+    display: "block",
+    textDecoration: "none",
+    "&:hover,&:focus,&:visited,&": {
+      color: "#FFFFFF"
+    }
+  },
+  itemLink: {
+    width: "auto",
+    transition: "all 300ms linear",
+    margin: "10px 15px 0",
+    borderRadius: "3px",
+    position: "relative",
+    display: "block",
+    padding: "10px 15px",
+    backgroundColor: "transparent",
+    ...defaultFont
+  },
+  itemIcon: {
+    width: "24px",
+    height: "30px",
+    fontSize: "24px",
+    lineHeight: "30px",
+    float: "left",
+    marginRight: "15px",
+    textAlign: "center",
+    verticalAlign: "middle",
+    color: "rgba(255, 255, 255, 0.8)"
+  },
+  itemText: {
+    ...defaultFont,
+    margin: "0",
+    lineHeight: "30px",
+    fontSize: "14px",
+    color: "#FFFFFF"
+  },
+  whiteFont: {
+    color: "#FFFFFF"
+  },
+
+  sidebarWrapper: {
+    width: "360px",
+    position: "relative",
+    overflow: "auto",
+    zIndex: "4",
+    overflowScrolling: "touch"
+  },
+  whiteText: {
+    zIndex: "5000",
+    color: "white"
+  },
+  collapsedItemStyle: {
+    zIndex: "5000",
+    color: "white",
+    "&:hover": {
+      backgroundColor: primaryColor,
+      color: "#FFFFFF",
+      ...primaryBoxShadow
+    },
+    cursor: "pointer"
+  },
+  collapse: {
+    width: "80%",
+    margin: "0 auto"
+  },
+  checkedItem: {
+    backgroundColor: primaryColor,
+    color: "#FFFFFF",
+    ...primaryBoxShadow
+  },
+  subOptionIndent: {
+    paddingLeft: "20px"
+  }
+});
+
+export default sidebarStyle;