quasar-framework/src/components/tab/tabs.ios.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-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

  .q-tab-icon, .q-tab-label
    transition transform .2s
  .q-tab-icon-parent + .q-tab-label-parent
    margin-top 3px

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

  &.active
    .q-tab-icon, .q-tab-label
      transform scale(1.1)
      opacity 1
  &:active
    background rgba(255, 255, 255, .3)

.q-tab-label
  text-align center
  line-height 1.3

.q-tab-only-label
  font-size $tabs-big-font-size

.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
      font-size $tabs-big-font-size
      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-tab-label
    font-size $tabs-big-font-size
  .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-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-bottom .q-tabs-panes
  order -1

.q-tabs-inverted
  .q-tab
    &:active
      background rgba(0, 0, 0, .1)

  .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 ''