172 lines
3.3 KiB
JavaScript
172 lines
3.3 KiB
JavaScript
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;
|