vuetify/src/stylus/components/_tabs.styl

Vue.js 2 Semantic Component Framework

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

/* Theme */
v-tabs__bar($material)
  background-color: $material.cards

  .v-tabs__div
    color: $material.tabs.active

  .v-tabs__item--disabled
    color: $material.buttons.disabled

theme(v-tabs__bar, "v-tabs__bar")

.v-tabs
  position: relative

.v-tabs__bar
  position: relative

.v-tabs__icon
  align-items: center
  cursor: pointer
  display: inline-flex
  height: 100%
  position: absolute
  top: 0
  user-select: none
  width: 32px

  &--prev
    left: 4px

  &--next
    right: 4px

.v-tabs__wrapper
  overflow: hidden
  contain: content
  display: flex

  &--show-arrows
    margin-left: 40px
    margin-right: 40px

    .v-tabs__container--align-with-title
      padding-left: 16px

      @media $display-breakpoints.xs-only
        padding-left: 24px

.v-tabs__container
  flex: 1 0 auto
  display: flex
  height: 48px
  list-style-type: none
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1)
  white-space: nowrap
  position: relative

  &--overflow
    .v-tabs__div
      flex: 1 0 auto

  &--grow
    .v-tabs__div
      flex: 1 0 auto
      max-width: none

  &--icons-and-text
    height: 72px

  &--align-with-title
    padding-left: 56px

  &--fixed-tabs,
  &--icons-and-text
    .v-tabs__div
      min-width: 72px

      @media $display-breakpoints.sm-and-up
          min-width: 160px

  &--fixed-tabs
    .v-tabs__div
      @media $display-breakpoints.xs-only
        flex: 1 0 auto

  &--centered,
  &--fixed-tabs,
  &--right
    > .v-tabs__div:first-child
      margin-left: auto

    .v-tabs__slider-wrapper + .v-tabs__div
      margin-left: auto

  &--centered,
  &--fixed-tabs
    > .v-tabs__div:last-child
      margin-right: auto

  &--icons-and-text
    .v-tabs__item
      flex-direction: column-reverse

      .v-icon
        margin-bottom: 6px

.v-tabs__div
  align-items: center
  display: inline-flex
  flex: 0 1 auto
  font-size: 14px
  font-weight: 500
  line-height: normal
  height: inherit
  max-width: 264px
  text-align: center
  text-transform: $tab-text-transform
  vertical-align: middle

.v-tabs__item
  align-items: center
  color: inherit
  display: flex
  flex: 1 1 auto
  height: 100%
  justify-content: center
  max-width: inherit
  padding: 6px 12px
  text-decoration: none
  transition: $primary-transition
  user-select: none
  white-space: normal

  &:not(.v-tabs__item--active)
    opacity: .7

  &--disabled
    pointer-events: none

.v-tabs__slider
  height: 2px
  width: 100%

  &-wrapper
    bottom: 0
    margin: 0 !important
    position: absolute
    transition: $primary-transition