Can you assist me in converting the following Material UI themes to its equivalent SCSS?
I am defining up("sm") as meaning above600px. I'm in the process of creating a @mixin contentShiftContainer so that I can use it wherever needed. However, I am having trouble understanding the transition part in materialUI. Any help would be greatly appreciated. Thank you.
contentShift: {
flexGrow: 1,
overflow: "auto",
display: "flex",
flexDirection: "column",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(7),
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
},
This is what I have attempted:
@mixin contentShiftContainer{
display: flex;
flex-grow: 1;
overflow: auto;
flex-direction: column;
}
@media screen and (min-width: 600px){
.contentShift{
@include contentShiftContainer;
margin-left: 7px;
z-index: 1501;
//transition for width and margin.
// -webkit-transition: width 1s ease-in-out; --> not sure.
}
}
.contentShift{
@include contentShiftContainer;
}