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

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.q-tabs
  flex-direction column

.q-tabs-scroller
  overflow hidden
  color $tabs-color

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

.q-tabs-no-pane-border .q-tab-pane
  border 0

.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
  text-transform $tabs-text-transform

  > .q-icon, .q-tab-label
    transition transform .2s
  > .q-icon + .q-tab-label
    margin-top 7px
  .q-tab-label
    text-align center

  &.icon-and-label:not(.hide-icon):not(.hide-label)
    padding $tabs-padding-with-icon
    min-height $tabs-min-height-with-icon

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

  .q-chip
    top 5px
    right 0
    left auto
    min-height auto
    padding 2px 6px
    color white
    background alpha($dot-color, .75)

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

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

@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, .q-tab.icon-and-label:not(.hide-icon):not(.hide-label)
    padding-left $tabs-big-screen-horiz-padding
    padding-right $tabs-big-screen-horiz-padding
  .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
  background $tabs-background
  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
.q-tabs-right-scroll
  right 0

.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
  background $tabs-inverted-background
  .q-tab
    &.active
      color $tabs-background
    &:active
      background rgba(0, 0, 0, .1)

  .q-tabs-scroller
    color $tabs-inverted-color

  .q-tabs-head
    background transparent

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