@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 3.37 kB
Source Map (JSON)
{"version":3,"file":"assign-header-variables.cjs","names":["isPrimitiveSize","rem","getBaseSize","isResponsiveSize"],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-header-variables/assign-header-variables.ts"],"sourcesContent":["import { keys, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignHeaderVariablesInput {\n baseStyles: CSSVariables;\n minMediaStyles: MediaQueryVariables;\n header: AppShellProps['header'] | undefined;\n mode: 'fixed' | 'static';\n}\n\nexport function assignHeaderVariables({\n baseStyles,\n minMediaStyles,\n header,\n mode,\n}: AssignHeaderVariablesInput) {\n const headerHeight = header?.height;\n const collapsedHeaderTransform = 'translateY(calc(var(--app-shell-header-height) * -1))';\n const shouldOffset = mode === 'static' ? true : (header?.offset ?? true);\n\n if (mode === 'static' && header) {\n baseStyles['--app-shell-header-position'] = 'sticky';\n baseStyles['--app-shell-header-grid-column'] = '1 / -1';\n baseStyles['--app-shell-header-grid-row'] = '1';\n }\n\n if (isPrimitiveSize(headerHeight)) {\n const baseSize = rem(getBaseSize(headerHeight));\n baseStyles['--app-shell-header-height'] = baseSize;\n if (shouldOffset) {\n baseStyles['--app-shell-header-offset'] = baseSize;\n }\n }\n\n if (isResponsiveSize(headerHeight)) {\n if (typeof headerHeight.base !== 'undefined') {\n baseStyles['--app-shell-header-height'] = rem(headerHeight.base);\n\n if (shouldOffset) {\n baseStyles['--app-shell-header-offset'] = rem(headerHeight.base);\n }\n }\n\n keys(headerHeight).forEach((key) => {\n if (key !== 'base') {\n minMediaStyles[key] = minMediaStyles[key] || {};\n minMediaStyles[key]['--app-shell-header-height'] = rem(headerHeight[key]);\n\n if (shouldOffset) {\n minMediaStyles[key]['--app-shell-header-offset'] = rem(headerHeight[key]);\n }\n }\n });\n }\n\n if (header?.collapsed) {\n baseStyles['--app-shell-header-transform'] = collapsedHeaderTransform;\n if (mode === 'fixed') {\n baseStyles['--app-shell-header-offset'] = '0px !important';\n }\n }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,sBAAsB,EACpC,YACA,gBACA,QACA,QAC6B;CAC7B,MAAM,eAAe,QAAQ;CAC7B,MAAM,2BAA2B;CACjC,MAAM,eAAe,SAAS,WAAW,OAAQ,QAAQ,UAAU;CAEnE,IAAI,SAAS,YAAY,QAAQ;EAC/B,WAAW,iCAAiC;EAC5C,WAAW,oCAAoC;EAC/C,WAAW,iCAAiC;CAC9C;CAEA,IAAIA,0BAAAA,gBAAgB,YAAY,GAAG;EACjC,MAAM,WAAWC,YAAAA,IAAIC,sBAAAA,YAAY,YAAY,CAAC;EAC9C,WAAW,+BAA+B;EAC1C,IAAI,cACF,WAAW,+BAA+B;CAE9C;CAEA,IAAIC,2BAAAA,iBAAiB,YAAY,GAAG;EAClC,IAAI,OAAO,aAAa,SAAS,aAAa;GAC5C,WAAW,+BAA+BF,YAAAA,IAAI,aAAa,IAAI;GAE/D,IAAI,cACF,WAAW,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;EAEnE;EAEA,aAAA,KAAK,YAAY,EAAE,SAAS,QAAQ;GAClC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,KAAK,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;IAExE,IAAI,cACF,eAAe,KAAK,+BAA+BA,YAAAA,IAAI,aAAa,IAAI;GAE5E;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,WAAW;EACrB,WAAW,kCAAkC;EAC7C,IAAI,SAAS,SACX,WAAW,+BAA+B;CAE9C;AACF"}