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

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

$layout-navbar-order       ?= 9
$layout-border             ?= 1px solid $toolbar-faded-color
$layout-toolbar-min-height ?= 50px
$toolbar-title-font-size   ?= 1.2rem

.layout
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  height 100vh
  width 100vw
  display flex
  flex-direction column

  > .quasar-tabs
    z-index $z-marginals
    order $layout-navbar-order
    border-top $layout-border
    border-radius 0 !important

.layout-header
  order -10
  .toolbar
    border-bottom $layout-border

.layout-footer
  order 10
  .toolbar
    border-top $layout-border

body.desktop
  .layout-header, .layout-footer
    button:hover i
      animation quasar-rotate .25s ease-out

.layout-content
  display flex
  flex 1 1 auto
  overflow hidden
  position relative

.layout-view
  overflow auto
  width 100%
  -webkit-overflow-scrolling touch
  will-change scroll-position

.layout-header, .layout-footer
  color $toolbar-color
  background $toolbar-background

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

.toolbar
  padding 4px
  min-height $layout-toolbar-min-height
  display flex
  overflow hidden
  flex-direction row
  align-items center
  justify-content space-between
  width 100%
  position relative
  color $toolbar-color
  background $toolbar-background

  &.border-bottom
    border-bottom $layout-border
  &.border-top
    border-top $layout-border

  for $name, $color in $colors
    if $name != 'light' && $name != 'white'
      &.{$name}
        color white
        background $color
        &.inverted
          color $color
        if luminosity($color) < .3
          &:not(.inverted)
            border 0
    if $name == 'light' || $name == 'white'
      &.{$name}
        color composite-color($color)
        background $color
        &.inverted
          color $color
          background composite-color($color)


  &.inverted
    background white

  button
    margin 0 .2rem
    padding .2rem
    text-shadow none
    &:active:not(.disabled)
      color $toolbar-active-color

.toolbar-title
  pointer-events none
  position absolute
  top 0
  left 0
  padding 0 90px 1px
  width 100%
  height 100%
  display flex
  align-items center
  justify-content center
  &.padding-0
    padding 0
  &.padding-1
    padding 0 45px
  &.padding-2
    padding 0 85px
  &.padding-3
    padding 0 125px
  &.padding-4
    padding 0 165px
  > div
    flex 1
    font-weight 600
    text-overflow ellipsis
    white-space nowrap
    overflow hidden
    font-size $toolbar-title-font-size
    text-align center
.toolbar-content
  flex 1
  min-width 0
  max-width 100%
  &.text-left .toolbar-title
    position relative
    padding 0 7px
    > div
      text-align left
  &.text-right .toolbar-title
    position relative
    padding 0 7px
    > div
      text-align right

.layout-padding
  @media only screen and (max-width $layout-small-max)
    padding 1.5rem .5rem
    &.horizontal
      padding 0 .5rem
  @media only screen and (min-width $layout-medium-min) and (max-width $layout-medium-max)
    max-width (.75 * $layout-medium-max)
    padding 1.5rem 2rem
    &.horizontal
      padding 0 2rem
  @media only screen and (min-width $layout-big-min) and (max-width $layout-big-max)
    max-width (.75 * $layout-big-max)
    padding 2.5rem 3rem
    &.horizontal
      padding 0 3rem
  @media only screen and (min-width $layout-large-min)
    max-width $layout-big-max
    padding 3rem 4rem
    &.horizontal
      padding 0 4rem