quasar/src/components/tabs/QTabs.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-tab
  padding 0 16px
  min-height 48px
  transition color .3s, background-color .3s

  text-transform uppercase
  white-space nowrap

  // for route tabs
  color inherit
  text-decoration none

  &--full
    min-height 72px

  &--no-caps
    text-transform none

  &__content
    height inherit
    padding 4px 0
    min-width 40px

    &--inline
      .q-tab__icon + .q-tab__label
        padding-left 8px

    .q-chip--floating
      top 0
      right -16px

  &__icon
    width 24px
    height 24px
    font-size 24px

  &__label
    font-size $button-font-size
    line-height $button-line-height
    font-weight $button-font-weight

  .q-badge
    top 3px
    right -12px

  &__alert
    position absolute
    top 7px
    right -9px
    height 10px
    width 10px
    border-radius 50%
    background currentColor

  &__indicator
    opacity 0
    height 2px
    background currentColor

  &--active .q-tab__indicator
    opacity 1
    transform-origin left

  &--inactive
    opacity .85

.q-tabs
  position relative
  transition color .3s, background-color .3s

  &--not-scrollable
    .q-tabs__arrow
      display none
    .q-tabs__content
      border-radius inherit

  &__arrow
    cursor pointer
    font-size 32px
    min-width 36px
    text-shadow 0 0 3px #fff, 0 0 1px #fff, 0 0 1px #000

    &--faded
      display none

  &__content
    overflow hidden
    flex 1 1 auto

    &--align

      &-center
        justify-content center

      &-right
        justify-content flex-end

      &-justify .q-tab
        flex 1 1 auto

  &__offset
    display none

  &--horizontal .q-tabs__arrow
    height 100%

    &--left
      top 0
      left 0
      bottom 0

    &--right
      top 0
      right 0
      bottom 0

  &--vertical
    display block !important
    height 100%

    .q-tabs__content
      display block !important
      height 100%

    .q-tabs__arrow
      width 100%
      height 36px
      text-align center

      &--left
        top 0
        left 0
        right 0

      &--right
        left 0
        right 0
        bottom 0

    .q-tab
      padding 0 8px

    .q-tab__indicator
      height unset
      width 2px

  &--vertical.q-tabs--not-scrollable
    .q-tabs__content
      height 100%

  &--vertical.q-tabs--dense
    .q-tab__content
      min-width 24px


  &--dense
    .q-tab
      min-height 36px
      &--full
        min-height 52px

body.mobile
  .q-tabs

    &__content
      overflow auto

    &__arrow
      display none

@media (min-width $breakpoint-lg-min)
  .q-header, .q-footer
    .q-tab__content
      min-width 128px