#AppShell CSS Variables missing in Mantine 7

3 messages · Page 1 of 1 (latest)

pure compass
#

Heya, I'm currently working on v6->v7 upgrade process 😅

In V6 we had var(--mantine-navbar-width) and var(--mantine-header-height).
These variables seem to removed in V7, and I cannot find a replacement variable anywhere in https://mantine.dev/styles/css-variables-list/ or https://mantine.dev/core/app-shell/#appshell-components.
Am I missing something?
If they're intentionally removed, would maintainers consider adding these back? Or should I recreate these variables myself?
Cheers,

CSS variables list | Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

AppShell | Mantine

Responsive shell for your application with header, navbar, aside and footer

#

My MantineProvider has the following props:

<MantineProvider
  withCssVariables
  withGlobalClasses
>
slow finch
#

Variables are still there, you can find them in dev tools:

:root{--app-shell-navbar-width:calc(18.75rem * var(--mantine-scale));--app-shell-navbar-offset:calc(18.75rem * var(--mantine-scale));--app-shell-header-height:calc(3.75rem * var(--mantine-scale));--app-shell-header-offset:calc(3.75rem * var(--mantine-scale));--app-shell-padding:var(--mantine-spacing-md);}@media(max-width: 47.99375em){:root{--app-shell-navbar-width:100%;--app-shell-navbar-offset:0px;--app-shell-navbar-transform:translateX(calc(var(--app-shell-navbar-width) * -1));--app-shell-navbar-transform-rtl:translateX(var(--app-shell-navbar-width));}}