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

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

$layout-navbar-order       ?= -9
$layout-toolbar-min-height ?= 56px
$layout-header-shadow      ?= $shadow-2
$layout-footer-shadow      ?= $shadow-up-2
$toolbar-title-font-size   ?= 1.25rem

.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-radius 0 !important

.layout-header
  order -10
  box-shadow $layout-header-shadow

.layout-footer
  order 10
  box-shadow $layout-footer-shadow

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

  for $name, $color in $colors
    if $name != 'light' && $name != 'white'
      &.{$name}
        color white
        background $color
        &.inverted
          color $color
    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-content
  flex 1
  min-width 0
  max-width 100%
.toolbar-title
  flex 1
  align-items center
  font-size $toolbar-title-font-size
  font-weight 500
  > div
    padding 0 12px
    width 100%
    text-overflow ellipsis
    white-space nowrap
    overflow hidden

.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