@elacity-js/uikit
Version:
React / Material UI Design kit for Elacity project
147 lines (145 loc) • 5.42 kB
JavaScript
function MainLayout(theme) {
var _a, _b, _c, _d;
return {
MainLayout: {
styleOverrides: {
root: {
paddingTop: (((_a = theme.layoutSettings) === null || _a === void 0 ? void 0 : _a.appBarMobile) || 64) + 24,
// since we have footer, we will remove bottom padding
paddingBottom: theme.spacing(0),
[theme.breakpoints.up('lg')]: {
paddingTop: ((_b = theme.layoutSettings) === null || _b === void 0 ? void 0 : _b.appBarDesktop) || 56,
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
},
},
noPadding: {
paddingTop: (((_c = theme.layoutSettings) === null || _c === void 0 ? void 0 : _c.appBarMobile) || 64),
[theme.breakpoints.up('lg')]: {
paddingTop: ((_d = theme.layoutSettings) === null || _d === void 0 ? void 0 : _d.appBarDesktop) || 56,
paddingLeft: theme.spacing(0),
paddingRight: theme.spacing(0),
},
},
withBottomNav: {
paddingBottom: theme.spacing(6),
},
},
},
MuiCssBaseline: {
styleOverrides: {
body: {
// enforced background to be transparent as we will set the background
// color in MainLayout.Background component
// background: 'transparent',
// background: theme.palette.mode === 'light'
// ? `radial-gradient(circle at center, ${theme.palette.vivid.main} -450%, ${theme.palette.background.default} 50%)`
// : `radial-gradient(circle at center, ${theme.palette.vivid.main} -200%, ${theme.palette.background.default} 50%)`,
[theme.breakpoints.up('md')]: {
minHeight: 600,
},
},
// pulse effect
'@keyframes pulse': {
'0%': {
opacity: 0.8,
filter: 'grayscale(0.7) blur(5px)',
},
'50%': {
opacity: 0.95,
filter: 'grayscale(0.7) blur(7px)',
},
'100%': {
opacity: 0.8,
filter: 'grayscale(0.7) blur(5px)',
},
},
'@-webkit-keyframes pulse': {
'0%': {
opacity: 0.8,
webkitFilter: 'grayscale(0.7) blur(5px)',
},
'50%': {
opacity: 0.95,
filter: 'grayscale(0.7) blur(7px)',
},
'100%': {
opacity: 0.8,
webkitFilter: 'grayscale(0.7) blur(5px)',
},
},
// opacity animation
'@keyframes op': {
'0%': {
opacity: 1,
},
'50%': {
opacity: 0.7,
},
'100%': {
opacity: 1,
},
},
'@-webkit-keyframes op': {
'0%': {
opacity: 1,
},
'50%': {
opacity: 0.7,
},
'100%': {
opacity: 1,
},
},
// animate gradient
'@keyframes animatedgradient': {
'0%': {
backgroundPosition: '0% 50%',
},
'50%': {
backgroundPosition: '100% 50%',
},
'100%': {
backgroundPosition: '0% 50%',
},
},
// loading fade
'@-webkit-keyframes loadingFade': {
'0%': {
opacity: 0,
},
'50%': {
opacity: 0.8,
},
'100%': {
opacity: 0,
},
},
'@-moz-keyframes loadingFade': {
'0%': {
opacity: 0,
},
'50%': {
opacity: 0.8,
},
'100%': {
opacity: 0,
},
},
'@keyframes loadingFade': {
'0%': {
opacity: 0,
},
'50%': {
opacity: 0.8,
},
'100%': {
opacity: 0,
},
},
},
},
};
}
export { MainLayout as default };
//# sourceMappingURL=Layout.js.map