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

  &[data-booted="true"]
    // Work around for Safari bug. See https://github.com/vuetifyjs/vuetify/issues/2773
    // We really want transition-property: all but must exclude max-height.
    transition-property: background,background-color,border,border-bottom,border-bottom-color,border-bottom-width,border-color,border-left,border-left-color,border-left-width,border-right,border-right-color,border-right-width,border-top,border-top-color,border-top-width,border-width,bottom,box-shadow,color,height,left,margin,margin-bottom,margin-left,margin-right,margin-top,max-width,min-height,min-width,opacity,padding,padding-bottom,padding-left,padding-right,padding-top,right,top,transform,transform-origin,width;

  &__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