@mantine/core/cjs/components/AppShell/AppShell.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"AppShell.module.cjs","names":[],"sources":["../../../src/components/AppShell/AppShell.module.css"],"sourcesContent":[".root {\n  &[data-resizing] {\n    --app-shell-transition-duration: 0ms !important;\n  }\n\n  &[data-disabled] {\n    --app-shell-header-offset: 0rem !important;\n    --app-shell-navbar-offset: 0rem !important;\n    --app-shell-aside-offset: 0rem !important;\n    --app-shell-footer-offset: 0rem !important;\n  }\n\n  &[data-mode='static'] {\n    display: grid;\n    grid-template-columns: var(--app-shell-navbar-width, 0) 1fr var(--app-shell-aside-width, 0);\n    grid-template-rows: auto 1fr auto;\n    position: relative;\n    height: 100%;\n    overflow: auto;\n  }\n\n  @mixin light {\n    --app-shell-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin dark {\n    --app-shell-border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.navbar,\n.aside,\n.header,\n.main,\n.footer {\n  transition-duration: var(--app-shell-transition-duration);\n  transition-timing-function: var(--app-shell-transition-timing-function);\n}\n\n.navbar,\n.aside {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  top: var(--app-shell-header-offset, 0rem);\n  height: calc(\n    100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem)\n  );\n  background-color: var(--mantine-color-body);\n  transition-property: transform, top, height;\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-navbar-position, fixed);\n    grid-row: var(--app-shell-navbar-grid-row, auto);\n    height: 100%;\n  }\n\n  :where([data-layout='alt']) & {\n    top: 0rem;\n    height: 100dvh;\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-row: 1 / -1;\n    height: 100%;\n  }\n}\n\n.navbar {\n  inset-inline-start: 0;\n  width: var(--app-shell-navbar-width);\n  transition-property: transform, top, height;\n  transform: var(--app-shell-navbar-transform);\n  z-index: var(--app-shell-navbar-z-index);\n\n  :where([data-mode='static']) & {\n    grid-column: var(--app-shell-navbar-grid-column, auto);\n    display: var(--app-shell-navbar-display, flex);\n  }\n\n  @mixin where-rtl {\n    transform: var(--app-shell-navbar-transform-rtl);\n  }\n\n  &:where([data-with-border]) {\n    border-inline-end: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.aside {\n  inset-inline-end: 0;\n  width: var(--app-shell-aside-width);\n  transform: var(--app-shell-aside-transform);\n  z-index: var(--app-shell-aside-z-index);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-aside-position, fixed);\n    grid-column: var(--app-shell-aside-grid-column, auto);\n    grid-row: var(--app-shell-aside-grid-row, auto);\n    display: var(--app-shell-aside-display, flex);\n  }\n\n  @mixin where-rtl {\n    transform: var(--app-shell-aside-transform-rtl);\n  }\n\n  &:where([data-with-border]) {\n    border-inline-start: 1px solid var(--app-shell-border-color);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-row: 1 / -1;\n  }\n\n  :where([data-scroll-locked]) & {\n    visibility: var(--app-shell-aside-scroll-locked-visibility);\n  }\n}\n\n.main {\n  padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));\n  padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));\n  padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));\n  padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));\n  min-height: 100dvh;\n  transition-property: padding;\n\n  :where([data-mode='static']) & {\n    padding-inline-start: var(--app-shell-padding);\n    padding-inline-end: var(--app-shell-padding);\n    padding-top: var(--app-shell-padding);\n    padding-bottom: var(--app-shell-padding);\n    min-height: auto;\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n    grid-row: var(--app-shell-main-grid-row, 2);\n  }\n}\n\n.header,\n.footer {\n  position: fixed;\n  inset-inline: 0;\n  transition-property: transform, margin-inline-start, margin-inline-end;\n  background-color: var(--mantine-color-body);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-header-position, fixed);\n    grid-column: var(--app-shell-header-grid-column, auto);\n  }\n\n  :where([data-layout='alt']) & {\n    margin-inline-start: var(--app-shell-navbar-offset, 0rem);\n    margin-inline-end: var(--app-shell-aside-offset, 0rem);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n    margin-inline-start: 0rem;\n    margin-inline-end: 0rem;\n  }\n}\n\n.header {\n  top: 0;\n  height: var(--app-shell-header-height);\n  background-color: var(--mantine-color-body);\n  transform: var(--app-shell-header-transform);\n  z-index: var(--app-shell-header-z-index);\n\n  :where([data-mode='static']) & {\n    grid-row: var(--app-shell-header-grid-row, auto);\n  }\n\n  &:where([data-with-border]) {\n    border-bottom: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.footer {\n  bottom: 0;\n  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));\n  padding-bottom: env(safe-area-inset-bottom);\n  transform: var(--app-shell-footer-transform);\n  z-index: var(--app-shell-footer-z-index);\n\n  :where([data-mode='static']) & {\n    position: var(--app-shell-footer-position, fixed);\n    grid-column: var(--app-shell-footer-grid-column, auto);\n    grid-row: var(--app-shell-footer-grid-row, auto);\n  }\n\n  :where([data-mode='static'][data-layout='alt']) & {\n    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);\n  }\n\n  &:where([data-with-border]) {\n    border-top: 1px solid var(--app-shell-border-color);\n  }\n}\n\n.section {\n  flex-grow: 0;\n\n  &:where([data-grow]) {\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}