package.lib.components.VBottomNavigation.VBottomNavigation.sass Maven / Gradle / Ivy

Go to download
@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-bottom-navigation
    display: flex
    max-width: 100%
    overflow: hidden
    position: absolute
    transition: $bottom-navigation-transition

    @include tools.border($bottom-navigation-border...)
    @include tools.rounded($bottom-navigation-border-radius)
    @include tools.theme($bottom-navigation-theme...)

    &--active
      @include tools.elevation($bottom-navigation-elevation)

  .v-bottom-navigation__content
    display: flex
    flex: none
    font-size: $bottom-navigation-content-font-size
    justify-content: center
    transition: inherit
    width: 100%

    .v-bottom-navigation &
      > .v-btn
        font-size: inherit
        height: $bottom-navigation-height
        max-width: $bottom-navigation-max-width
        min-width: $bottom-navigation-min-width
        text-transform: $bottom-navigation-text-transform
        transition: inherit
        width: auto

        @include tools.rounded(0)

        .v-btn__content,
        .v-btn__icon
          transition: inherit

        .v-btn__icon
          font-size: $bottom-navigation-icon-font-size

    .v-bottom-navigation--grow &
      > .v-btn
        flex-grow: 1

    .v-bottom-navigation--shift &
      .v-btn
        &:not(.v-btn--selected)
          .v-btn__content > span
            transition: inherit
            opacity: 0

          .v-btn__content
            transform: $bottom-navigation-shift-icon-transform