quasar-framework/src/components/tab/tabs.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-tabs
  flex-direction column
  border-radius $generic-border-radius

.q-layout-marginal .q-tabs
  border-radius 0

.q-tabs-scroller
  overflow hidden

.q-tab-pane
  padding $tabs-pane-padding

.q-tabs-panes:empty
  display none

.q-tabs-normal
  .q-tab-icon, .q-tab-label
    opacity $tabs-unselected-opacity

.q-tab
  cursor pointer
  transition color .3s, background .3s
  white-space nowrap
  user-select none
  padding $tabs-padding
  min-height $tabs-min-height
  text-transform $tabs-text-transform

  .q-tab-icon-parent + .q-tab-label-parent
    margin-top 4px

  .q-chip
    top -8px
    right -10px
    left auto
    min-height auto
    color white
    background alpha($dot-color, .75)

  &.active
    .q-tab-icon, .q-tab-label
      opacity 1

.q-tab-label
  text-align center

.q-tab-icon
  font-size $tabs-icon-font-size

.q-tab-focus-helper
  z-index -1
  outline 0
  &:focus
    z-index unset
    background currentColor
    opacity .1

@media (max-width $breakpoint-sm-max)
  .q-tab
    &.hide-icon .q-tab-icon-parent,
    &.hide-label .q-tab-label-parent
      display none !important
    &.hide-icon .q-tab-label
      margin-top 0
  .q-tab-full.hide-none .q-tab-label-parent .q-tab-meta
    display none

@media (min-width $breakpoint-md-min)
  .q-tab-full .q-tab-label-parent .q-tab-meta
    display none

@media (max-width $breakpoint-md-max)
  .q-tabs-head:not(.scrollable)
    .q-tabs-scroller, .q-tab
      flex 1 1 auto

@media (min-width $breakpoint-lg-min)
  .q-tab
    padding-left $tabs-big-screen-horiz-padding
    padding-right $tabs-big-screen-horiz-padding
  .q-layout-marginal .q-tabs-head:not(.scrollable)
    padding-left $tabs-big-screen-side-padding
    padding-right $tabs-big-screen-side-padding

.q-tabs-head
  min-height $tabs-min-height
  overflow hidden
  font-size $tabs-font-size
  font-weight $tabs-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in
  position relative

  &:not(.scrollable)
    .q-tabs-left-scroll, .q-tabs-right-scroll
      display none !important

.q-tabs-left-scroll, .q-tabs-right-scroll
  position absolute
  height 100%
  cursor pointer
  color white
  top 0
  .q-icon
    text-shadow 0 0 10px black
    font-size (1.2 * $tabs-icon-font-size)
    visibility hidden
  &.disabled
    display none
.q-tabs:hover
  .q-tabs-left-scroll, .q-tabs-right-scroll
    .q-icon
      visibility visible

.q-tabs-left-scroll
  left 0 /* rtl:ignore */
.q-tabs-right-scroll
  right 0 /* rtl:ignore */

.q-tabs-align-justify
  .q-tabs-scroller, .q-tab
    flex 1 1 auto
.q-tabs-align-center
  justify-content center
.q-tabs-align-right
  justify-content flex-end

.q-tabs-bar
  border $tabs-border-width solid currentColor
  border-width 0
  position absolute
  height 0
  left 0
  right 0
.q-tabs-global-bar
  width 1px
  transform scale(0)
  transform-origin left center
  transition transform
  transition-duration .15s
  transition-timing-function cubic-bezier(.4, .0, 1, 1)
  &.contract
    transition-duration .18s
    transition-timing-function cubic-bezier(.0, .0, .2, 1)

.q-tabs-global-bar-container.highlight > .q-tabs-global-bar
  display none

.q-tabs-two-lines .q-tab
  white-space normal
  .q-tab-label
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2

.q-tabs-position-top
  > .q-tabs-head
    .q-tabs-bar
      bottom 0
      border-bottom-width $tabs-border-width
.q-tabs-position-bottom
  > .q-tabs-head
    .q-tabs-bar
      top 0
      border-top-width $tabs-border-width
  > .q-tabs-panes
    order -1
.q-tabs-inverted
  .q-tabs-head
    background white
  &.q-tabs-position-top
    > .q-tabs-panes
      border-top $tabs-pane-border
    > .q-tab-pane
      border-top 0
  &.q-tabs-position-bottom
    > .q-tabs-panes
      border-bottom $tabs-pane-border
    > .q-tab-pane
      border-bottom 0

body.mobile .q-tabs-scroller
  overflow-y hidden
  overflow-x auto
  will-change scroll-position
  -webkit-overflow-scrolling touch

body.desktop .q-tab
  &:before
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    opacity .1
    background currentColor
  &:hover:before
    content ''