vuetify/src/stylus/components/_bottom-navs.styl

Vue.js 2 Semantic Component Framework

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

v-bottom-nav($material)
  background-color: $material.cards

theme(v-bottom-nav, "v-bottom-nav")

.v-item-group.v-bottom-nav
  bottom: 0
  box-shadow: 0 3px 14px 2px rgba(#000, .12)
  display: flex
  left: 0
  justify-content: center
  transform: translate(0, 60px)
  transition: all .4s $transition.swing
  width: 100%

  &--absolute
    position: absolute

  &--active
    transform: translate(0, 0)

  &--fixed
    position: fixed
    z-index: 4

  .v-btn
    background: transparent !important
    border-radius: 0
    box-shadow: none !important
    font-weight: 400
    height: 100%
    margin: 0
    max-width: 168px
    min-width: 80px
    padding: 8px 12px 10px
    text-transform: none
    opacity: .5
    width: 100%
    // https://github.com/vuetifyjs/vuetify/issues/4643
    flex-shrink: 1

    .v-btn__content
      flex-direction: column-reverse
      font-size: 12px
      white-space: nowrap
      will-change: font-size

      i.v-icon
        color: inherit
        margin-bottom: 4px
        transition: all .4s cubic-bezier(.25, .8, .50, 1)

      span
        line-height: 1

    &--active
      opacity: 1
      padding-top: 6px

      &:before
        background-color: transparent

      .v-btn__content
        font-size: 14px

        .v-icon
          transform: none

    &:not(.v-btn--active)
      filter: grayscale(100%)

  &--shift
    .v-btn__content
      font-size: 14px

    .v-btn
      transition: all .3s
      min-width: 56px
      max-width: 96px

      &--active
        min-width: 96px
        max-width: 168px

.v-bottom-nav--shift
  .v-btn:not(.v-btn--active) .v-btn__content
    .v-icon
      transform: scale(1, 1) translate(0, 8px)

    span
      color: transparent