quasar-framework/src/components/layout/layout.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

$layout-transition = all .12s ease-in

.q-layout
  width 100%
  min-height 100vh

.q-layout-container
  .q-layout
    min-height 100%
  > div
    transform translate3d(0, 0, 0)
    > div
      min-height 0
      max-height 100%

.q-layout-header
  box-shadow $layout-header-shadow
  &-hidden
    transform translateY(-110%)

.q-layout-footer
  box-shadow $layout-footer-shadow
  &-hidden
    transform translateY(110%)

.q-layout-drawer
  position absolute
  top 0
  bottom 0
  background $layout-aside-background
  z-index $z-side
  &.on-top
    z-index $z-fixed-drawer
.q-layout-drawer-delimiter
  box-shadow $layout-aside-shadow
.q-layout-drawer-left
  left 0
  transform translateX(-100%)
.q-layout-drawer-right
  right 0
  transform translateX(100%)

.q-layout, .q-layout-header, .q-layout-footer, .q-layout-page
  position relative

.q-layout-header, .q-layout-footer
  z-index $z-marginals

.q-layout-backdrop
  z-index ($z-fixed-drawer - 1) !important
  will-change background-color


.q-layout-drawer-mini
  padding 0 !important
  .q-item, .q-item-side
    text-align center
    justify-content center
  .q-mini-drawer-hide,
  .q-collapsible-inner > div:last-of-type, .q-list-header, .q-item-main, .q-item-side-right
    display none

.q-layout-drawer-normal
  .q-mini-drawer-only
    display none

.q-layout-drawer-mobile
  .q-mini-drawer-only, .q-mini-drawer-hide
    display none


.q-layout-drawer-opener
  z-index ($z-marginals + 1)
  height 100%
  width 15px
  user-select none

.q-page-sticky-shrink
  pointer-events none
  > span
    pointer-events auto

body.q-ios-statusbar-padding
  .q-layout .q-layout-header > .q-toolbar:nth-child(2),
  .q-layout .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
  .q-layout .q-layout-drawer.top-padding,
  .modal:not(.minimized) .q-layout-header > .q-toolbar:nth-child(1)
    padding-top $ios-statusbar-height
    min-height ($toolbar-min-height + $ios-statusbar-height)

body.q-ios-statusbar-x
  .q-layout .q-layout-header > .q-toolbar:nth-child(2),
  .q-layout .q-layout-header > .q-tabs:nth-child(2) .q-tabs-head
  .q-layout .q-layout-drawer.top-padding,
  .modal:not(.minimized) .q-layout-header > .q-toolbar:nth-child(1)
    padding-top env(safe-area-inset-top)
  .q-layout .q-layout-footer > .q-toolbar:last-child,
  .q-layout .q-layout-footer > .q-tabs:last-child .q-tabs-head
  .q-layout .q-layout-drawer.top-padding,
  .modal:not(.minimized) .q-layout-footer > .q-toolbar:last-child
    padding-bottom env(safe-area-inset-bottom)
    min-height ($toolbar-min-height + $ios-statusbar-height)

/* body */
.q-layout-animate .q-layout-transition
  transition $layout-transition !important
.q-body-drawer-toggle
  overflow-x hidden !important
/* body - end */

.layout-padding
  @media (max-width $breakpoint-sm-max)
    padding 1.5rem .5rem
    &.horizontal
      padding 0 .5rem
  @media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
    padding 1.5rem 2rem
    margin auto
    &.horizontal
      padding 0 2rem
  @media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
    padding 2.5rem 3rem
    margin auto
    &.horizontal
      padding 0 3rem
  @media (min-width $breakpoint-xl-min)
    padding 3rem 4rem
    margin auto
    &.horizontal
      padding 0 4rem