@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
68 lines (67 loc) • 2.13 kB
JavaScript
"use client";
import { keys } from "../../../../core/utils/keys/keys.mjs";
import { em } from "../../../../core/utils/units-converters/rem.mjs";
import { getSortedBreakpoints } from "../../../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.mjs";
import { assignAsideVariables } from "../assign-aside-variables/assign-aside-variables.mjs";
import { assignFooterVariables } from "../assign-footer-variables/assign-footer-variables.mjs";
import { assignHeaderVariables } from "../assign-header-variables/assign-header-variables.mjs";
import { assignNavbarVariables } from "../assign-navbar-variables/assign-navbar-variables.mjs";
import { assignPaddingVariables } from "../assign-padding-variables/assign-padding-variables.mjs";
//#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/get-variables/get-variables.ts
function getVariables({ navbar, header, footer, aside, padding, theme, mode }) {
const minMediaStyles = {};
const maxMediaStyles = {};
const baseStyles = {};
if (mode === "static") {
baseStyles["--app-shell-main-grid-column"] = "1 / -1";
baseStyles["--app-shell-main-grid-row"] = "2";
}
assignNavbarVariables({
baseStyles,
minMediaStyles,
maxMediaStyles,
navbar,
theme,
mode
});
assignAsideVariables({
baseStyles,
minMediaStyles,
maxMediaStyles,
aside,
theme,
mode
});
assignHeaderVariables({
baseStyles,
minMediaStyles,
header,
mode
});
assignFooterVariables({
baseStyles,
minMediaStyles,
footer,
mode
});
assignPaddingVariables({
baseStyles,
minMediaStyles,
padding
});
const minMedia = getSortedBreakpoints(keys(minMediaStyles), theme.breakpoints).map((breakpoint) => ({
query: `(min-width: ${em(breakpoint.px)})`,
styles: minMediaStyles[breakpoint.value]
}));
const maxMedia = getSortedBreakpoints(keys(maxMediaStyles), theme.breakpoints).map((breakpoint) => ({
query: `(max-width: ${em(breakpoint.px)})`,
styles: maxMediaStyles[breakpoint.value]
}));
return {
baseStyles,
media: [...minMedia, ...maxMedia]
};
}
//#endregion
export { getVariables };
//# sourceMappingURL=get-variables.mjs.map