vuetify/src/stylus/components/_navigation-drawer.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../theme'

navigation-drawer($material)
  background-color: $material.cards

  &:not(.navigation-drawer--floating)
    .navigation-drawer__border
      background-color: $material.dividers

  .divider
    background-color: $material.dividers

theme(navigation-drawer, "navigation-drawer")

.navigation-drawer
  bootable()

  display: block
  left: 0
  max-width: 100%
  overflow-y: auto
  overflow-x: hidden
  padding: 0 0 100px
  pointer-events: auto
  top: 0
  will-change: transform
  z-index: 3
  -webkit-overflow-scrolling: touch

  &__border
    position: absolute
    right: 0
    top: 0
    height: 100%
    width: 1px

  &.navigation-drawer--right
    &:after
      left: 0
      right: initial
  
  &--right
    left: auto
    right: 0

    > .navigation-drawer__border
      right: auto
      left: 0

  &--absolute
    position: absolute

  &--fixed
    position: fixed

  &--floating:after
    display: none

  &--mini-variant
    overflow: hidden
    
    .list__group__header__prepend-icon
      flex: 1 0 auto
      justify-content: center
      width: 100%

    .list__tile__action,
    .list__tile__avatar
      justify-content: center
      min-width: 48px

    .list__tile__content,
    .list__tile:after
      opacity: 0

    .subheader,
    .divider,
    .list--group
      display: none !important

  &--temporary,
  &--is-mobile
    z-index: 6

    &:not(.navigation-drawer--close)
      elevation(16)

  .list
    background: inherit

  > .list
    .list__tile
      transition: none
      font-weight: $navigation-drawer-item-font-weight

      &--active
        .list__tile__title
          color: inherit

    .list--group
      .list__tile
        font-weight: $navigation-drawer-group-item-font-weight

      &__header--active
        &:after
          background: transparent

  > .list:not(.list--dense)
    .list__tile
      font-size: $navigation-drawer-item-font-size