@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
43 lines (42 loc) • 2.05 kB
JavaScript
"use client";
import { keys } from "../../../../core/utils/keys/keys.mjs";
import { rem } from "../../../../core/utils/units-converters/rem.mjs";
import { getBaseSize } from "../get-base-size/get-base-size.mjs";
import { isPrimitiveSize } from "../is-primitive-size/is-primitive-size.mjs";
import { isResponsiveSize } from "../is-responsive-size/is-responsive-size.mjs";
//#region packages/@mantine/core/src/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.ts
function assignHeaderVariables({ baseStyles, minMediaStyles, header, mode }) {
const headerHeight = header?.height;
const collapsedHeaderTransform = "translateY(calc(var(--app-shell-header-height) * -1))";
const shouldOffset = mode === "static" ? true : header?.offset ?? true;
if (mode === "static" && header) {
baseStyles["--app-shell-header-position"] = "sticky";
baseStyles["--app-shell-header-grid-column"] = "1 / -1";
baseStyles["--app-shell-header-grid-row"] = "1";
}
if (isPrimitiveSize(headerHeight)) {
const baseSize = rem(getBaseSize(headerHeight));
baseStyles["--app-shell-header-height"] = baseSize;
if (shouldOffset) baseStyles["--app-shell-header-offset"] = baseSize;
}
if (isResponsiveSize(headerHeight)) {
if (typeof headerHeight.base !== "undefined") {
baseStyles["--app-shell-header-height"] = rem(headerHeight.base);
if (shouldOffset) baseStyles["--app-shell-header-offset"] = rem(headerHeight.base);
}
keys(headerHeight).forEach((key) => {
if (key !== "base") {
minMediaStyles[key] = minMediaStyles[key] || {};
minMediaStyles[key]["--app-shell-header-height"] = rem(headerHeight[key]);
if (shouldOffset) minMediaStyles[key]["--app-shell-header-offset"] = rem(headerHeight[key]);
}
});
}
if (header?.collapsed) {
baseStyles["--app-shell-header-transform"] = collapsedHeaderTransform;
if (mode === "fixed") baseStyles["--app-shell-header-offset"] = "0px !important";
}
}
//#endregion
export { assignHeaderVariables };
//# sourceMappingURL=assign-header-variables.mjs.map