107 lines
2.2 KiB
TypeScript
107 lines
2.2 KiB
TypeScript
import { makeStyles } from "@saleor/macaw-ui";
|
|
|
|
import { appLoaderHeight } from "./consts";
|
|
|
|
export const useStyles = makeStyles(
|
|
theme => ({
|
|
appAction: {
|
|
[theme.breakpoints.down("sm")]: {
|
|
left: 0,
|
|
width: "100%",
|
|
},
|
|
bottom: 0,
|
|
gridColumn: 2,
|
|
position: "sticky",
|
|
zIndex: 10,
|
|
},
|
|
appLoader: {
|
|
height: appLoaderHeight,
|
|
zIndex: 1201,
|
|
position: "fixed",
|
|
width: "100%",
|
|
top: 0,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
[theme.breakpoints.up("md")]: {
|
|
width: 0, // workaround for flex children width expansion affected by their contents
|
|
},
|
|
},
|
|
darkThemeSwitch: {
|
|
[theme.breakpoints.down("sm")]: {
|
|
marginRight: theme.spacing(1),
|
|
},
|
|
marginRight: theme.spacing(2),
|
|
},
|
|
header: {
|
|
display: "grid",
|
|
gridTemplateAreas: `"headerAnchor headerToolbar"`,
|
|
[theme.breakpoints.down("sm")]: {
|
|
gridTemplateAreas: `"headerToolbar"
|
|
"headerAnchor"`,
|
|
},
|
|
marginBottom: theme.spacing(6),
|
|
},
|
|
headerAnchor: {
|
|
gridArea: "headerAnchor",
|
|
},
|
|
headerToolbar: {
|
|
display: "flex",
|
|
gridArea: "headerToolbar",
|
|
height: 40,
|
|
[theme.breakpoints.down("sm")]: {
|
|
height: "auto",
|
|
},
|
|
},
|
|
root: {
|
|
isolation: "isolate",
|
|
[theme.breakpoints.up("md")]: {
|
|
display: "flex",
|
|
},
|
|
width: `100%`,
|
|
},
|
|
spacer: {
|
|
flex: 1,
|
|
},
|
|
userBar: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
},
|
|
|
|
view: {
|
|
marginLeft: 0,
|
|
},
|
|
viewMargins: {
|
|
paddingBottom: theme.spacing(),
|
|
[theme.breakpoints.up("sm")]: {
|
|
paddingBottom: theme.spacing(3),
|
|
},
|
|
},
|
|
viewContainer: {
|
|
minHeight: `calc(100vh - ${appLoaderHeight + 72}px - ${theme.spacing(
|
|
4,
|
|
)})`,
|
|
},
|
|
}),
|
|
{ name: "AppLayout" },
|
|
);
|
|
|
|
export const useFullSizeStyles = makeStyles(
|
|
() => ({
|
|
content: {
|
|
height: "100vh",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
},
|
|
viewContainer: {
|
|
flex: 1,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
},
|
|
view: {
|
|
flex: 1,
|
|
},
|
|
viewContainerWrapper: {},
|
|
}),
|
|
{ name: "AppLayoutFullSize" },
|
|
);
|