sass/components/tabs.sass

.tabs
  +block
  +overflow-touch
  +unselectable
  align-items: stretch
  display: flex
  font-size: $size-normal
  justify-content: space-between
  overflow: hidden
  overflow-x: auto
  white-space: nowrap
  a
    align-items: center
    border-bottom: 1px solid $border
    color: $text
    display: flex
    justify-content: center
    margin-bottom: -1px
    padding: 0.5em 1em
    vertical-align: top
    &:hover
      border-bottom-color: $text-strong
      color: $text-strong
  li
    display: block
    &.is-active
      a
        border-bottom-color: $primary
        color: $primary
  ul
    align-items: center
    border-bottom: 1px solid $border
    display: flex
    flex-grow: 1
    flex-shrink: 0
    justify-content: flex-start
    &.is-left
      padding-right: 0.75em
    &.is-center
      flex: none
      justify-content: center
      padding-left: 0.75em
      padding-right: 0.75em
    &.is-right
      justify-content: flex-end
      padding-left: 0.75em
  .icon
    &:first-child
      margin-right: 0.5em
    &:last-child
      margin-left: 0.5em
  // Alignment
  &.is-centered
    ul
      justify-content: center
  &.is-right
    ul
      justify-content: flex-end
  // Styles
  &.is-boxed
    a
      border: 1px solid transparent
      border-radius: $radius $radius 0 0
      &:hover
        background-color: $background
        border-bottom-color: $border
    li
      &.is-active
        a
          background-color: $white
          border-color: $border
          border-bottom-color: transparent !important
  &.is-fullwidth
    li
      flex-grow: 1
      flex-shrink: 0
  &.is-toggle
    a
      border: 1px solid $border
      margin-bottom: 0
      position: relative
      &:hover
        background-color: $background
        border-color: $border-hover
        z-index: 2
    li
      & + li
        margin-left: -1px
      &:first-child a
        border-radius: $radius 0 0 $radius
      &:last-child a
        border-radius: 0 $radius $radius 0
      &.is-active
        a
          background-color: $primary
          border-color: $primary
          color: $primary-invert
          z-index: 1
    ul
      border-bottom: none
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large
Init 2016-01-24 00:03:43 +00:00			`.tabs`
Add minireset, Fix color luminance 2016-09-22 23:14:18 +01:00			`+block`
Fix nav overflow 2017-04-15 17:54:47 +01:00			`+overflow-touch`
Add minireset, Fix color luminance 2016-09-22 23:14:18 +01:00			`+unselectable`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`align-items: stretch`
			`display: flex`
Fix tabs 2016-10-30 22:52:04 +00:00			`font-size: $size-normal`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`justify-content: space-between`
Init 2016-01-24 00:03:43 +00:00			`overflow: hidden`
			`overflow-x: auto`
			`white-space: nowrap`
			`a`
Use icon for tabs 2016-05-05 22:23:08 +01:00			`align-items: center`
Init 2016-01-24 00:03:43 +00:00			`border-bottom: 1px solid $border`
			`color: $text`
Use icon for tabs 2016-05-05 22:23:08 +01:00			`display: flex`
			`justify-content: center`
Init 2016-01-24 00:03:43 +00:00			`margin-bottom: -1px`
Fix tabs 2016-10-30 22:52:04 +00:00			`padding: 0.5em 1em`
Init 2016-01-24 00:03:43 +00:00			`vertical-align: top`
			`&:hover`
			`border-bottom-color: $text-strong`
			`color: $text-strong`
			`li`
Use flex for all tabs, Add flat input, Fix hero tabs 2016-01-26 00:02:38 +00:00			`display: block`
Init 2016-01-24 00:03:43 +00:00			`&.is-active`
			`a`
Fix button spacing, Add image placeholders 2016-12-22 18:17:26 +00:00			`border-bottom-color: $primary`
			`color: $primary`
Init 2016-01-24 00:03:43 +00:00			`ul`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`align-items: center`
Init 2016-01-24 00:03:43 +00:00			`border-bottom: 1px solid $border`
Use flex for all tabs, Add flat input, Fix hero tabs 2016-01-26 00:02:38 +00:00			`display: flex`
Remove flex shorthand 2016-07-31 11:45:56 +01:00			`flex-grow: 1`
Move docs to bulma repo (#299) * Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder 2016-09-11 12:00:49 +01:00			`flex-shrink: 0`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`justify-content: flex-start`
			`&.is-left`
Fix tabs 2016-10-30 22:52:04 +00:00			`padding-right: 0.75em`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`&.is-center`
			`flex: none`
			`justify-content: center`
Fix tabs 2016-10-30 22:52:04 +00:00			`padding-left: 0.75em`
			`padding-right: 0.75em`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`&.is-right`
			`justify-content: flex-end`
Fix tabs 2016-10-30 22:52:04 +00:00			`padding-left: 0.75em`
Use icon for tabs 2016-05-05 22:23:08 +01:00			`.icon`
			`&:first-child`
Fix tabs 2016-10-30 22:52:04 +00:00			`margin-right: 0.5em`
Use icon for tabs 2016-05-05 22:23:08 +01:00			`&:last-child`
Fix tabs 2016-10-30 22:52:04 +00:00			`margin-left: 0.5em`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`// Alignment`
			`&.is-centered`
			`ul`
			`justify-content: center`
			`&.is-right`
			`ul`
			`justify-content: flex-end`
			`// Styles`
Init 2016-01-24 00:03:43 +00:00			`&.is-boxed`
			`a`
			`border: 1px solid transparent`
			`border-radius: $radius $radius 0 0`
			`&:hover`
Fix #242 2016-06-29 23:59:48 +01:00			`background-color: $background`
Init 2016-01-24 00:03:43 +00:00			`border-bottom-color: $border`
			`li`
			`&.is-active`
			`a`
Fix #242 2016-06-29 23:59:48 +01:00			`background-color: $white`
Init 2016-01-24 00:03:43 +00:00			`border-color: $border`
Add level, Finish nav, Fix hero 2016-05-08 01:35:43 +01:00			`border-bottom-color: transparent !important`
Fix components code style 2016-04-10 16:27:27 +01:00			`&.is-fullwidth`
			`li`
Remove flex shorthand 2016-07-31 11:45:56 +01:00			`flex-grow: 1`
Move docs to bulma repo (#299) * Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder 2016-09-11 12:00:49 +01:00			`flex-shrink: 0`
Init 2016-01-24 00:03:43 +00:00			`&.is-toggle`
			`a`
			`border: 1px solid $border`
			`margin-bottom: 0`
			`position: relative`
			`&:hover`
Fix #242 2016-06-29 23:59:48 +01:00			`background-color: $background`
Init 2016-01-24 00:03:43 +00:00			`border-color: $border-hover`
			`z-index: 2`
			`li`
			`& + li`
			`margin-left: -1px`
			`&:first-child a`
			`border-radius: $radius 0 0 $radius`
			`&:last-child a`
			`border-radius: 0 $radius $radius 0`
			`&.is-active`
			`a`
Fix #242 2016-06-29 23:59:48 +01:00			`background-color: $primary`
Init 2016-01-24 00:03:43 +00:00			`border-color: $primary`
			`color: $primary-invert`
			`z-index: 1`
Use flex for all tabs, Add flat input, Fix hero tabs 2016-01-26 00:02:38 +00:00			`ul`
			`border-bottom: none`
Add nav, Enhance tabs 2016-05-07 23:40:06 +01:00			`// Sizes`
			`&.is-small`
			`font-size: $size-small`
			`&.is-medium`
			`font-size: $size-medium`
			`&.is-large`
			`font-size: $size-large`