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

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

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

.q-layout-header
  border-bottom $layout-border
  &-hidden
    transform translateY(-110%)

.q-layout-footer
  border-top $layout-border
  &-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-left
  left 0
  width $layout-aside-left-width
  &.off-screen
    transform translateX(-100%)
  &.on-screen
    transform translateX(0)
  &.fixed
    border-right $layout-border
.q-layout-drawer-right
  right 0
  width $layout-aside-right-width
  &.off-screen
    transform translateX(100%)
  &.on-screen
    transform translateX(0)
  &.fixed
    border-left $layout-border

.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-backdrop-transition
  transition background .12s

.q-layout-drawer-opener
  z-index ($z-marginals + 1)
  height 100vh
  width 15px

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

body
  &.q-layout-animate .q-layout-transition
    transition all .12s ease-in

  &.with-layout-drawer-opened
    overflow hidden
  &.with-layout-drawer-opened-above
    overflow-x hidden

  &.cordova.platform-ios
    .q-layout-header > .q-toolbar:first-child,
    .q-layout-header > .q-tabs:first-child .q-tabs-head
    .q-layout-drawer.top-padding
      padding-top $ios-statusbar-height
      min-height ($toolbar-min-height + $ios-statusbar-height)

.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