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

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

$drawer-width            ?= 280px
$drawer-font-size        ?= 1rem
$drawer-icon-font-size   ?= 1.8rem
$drawer-background       ?= white
$drawer-header-font-size ?= .9rem

.drawer
  position relative
  .list
    margin 0

.drawer-backdrop
  display none
  z-index $z-drawer
  &.active
    display block

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

.drawer-content
  background $drawer-background
  top 0
  bottom 0
  width $drawer-width
  font-size $drawer-font-size
  overflow-y auto
  -webkit-overflow-scrolling touch
  will-change scroll-position, transform

  &.left-side
    left 0
  &.right-side
    right 0

.drawer-header
  overflow hidden
  position relative
  margin-bottom 8px
  padding 16px
  font-size $drawer-header-font-size

  > img
    position absolute
    top 0
    bottom 0
    left -50%
    width 100%
    height 100%
    transform translateX(50%)
    z-index -1

  > div
    color white

  .avatar img
    height 64px
    width 64px
    margin-bottom 25px
    border-radius 50%

swipe-behavior()
  .drawer-content
    z-index $z-drawer
    position fixed
    &.left-side
      transform translateX(- $drawer-width)
    &.right-side
      transform translateX($drawer-width)

@media screen and (max-width: $layout-small-max)
  swipe-behavior()

@media screen and (min-width: $layout-medium-min)
  .hide-on-drawer-visible
    display none !important
  .drawer
    &.swipe-only
      swipe-behavior()
    &:not(.swipe-only)
      flex 0 0 $drawer-width

      .drawer-content
        left 0
        right 0
        position absolute !important
        transform translateX(0) !important