public/vendors/bulma/sass/components/tabs.sass

   1 $tabs-border-bottom-color: $border !default
   2 $tabs-border-bottom-style: solid !default
   3 $tabs-border-bottom-width: 1px !default
   4 $tabs-link-color: $text !default
   5 $tabs-link-hover-border-bottom-color: $text-strong !default
   6 $tabs-link-hover-color: $text-strong !default
   7 $tabs-link-active-border-bottom-color: $link !default
   8 $tabs-link-active-color: $link !default
   9 $tabs-link-padding: 0.5em 1em !default
  10
  11 $tabs-boxed-link-radius: $radius !default
  12 $tabs-boxed-link-hover-background-color: $background !default
  13 $tabs-boxed-link-hover-border-bottom-color: $border !default
  14
  15 $tabs-boxed-link-active-background-color: $scheme-main !default
  16 $tabs-boxed-link-active-border-color: $border !default
  17 $tabs-boxed-link-active-border-bottom-color: transparent !default
  18
  19 $tabs-toggle-link-border-color: $border !default
  20 $tabs-toggle-link-border-style: solid !default
  21 $tabs-toggle-link-border-width: 1px !default
  22 $tabs-toggle-link-hover-background-color: $background !default
  23 $tabs-toggle-link-hover-border-color: $border-hover !default
  24 $tabs-toggle-link-radius: $radius !default
  25 $tabs-toggle-link-active-background-color: $link !default
  26 $tabs-toggle-link-active-border-color: $link !default
  27 $tabs-toggle-link-active-color: $link-invert !default
  28
  29 .tabs
  30   @extend %block
  31   +overflow-touch
  32   @extend %unselectable
  33   align-items: stretch
  34   display: flex
  35   font-size: $size-normal
  36   justify-content: space-between
  37   overflow: hidden
  38   overflow-x: auto
  39   white-space: nowrap
  40   a
  41     align-items: center
  42     border-bottom-color: $tabs-border-bottom-color
  43     border-bottom-style: $tabs-border-bottom-style
  44     border-bottom-width: $tabs-border-bottom-width
  45     color: $tabs-link-color
  46     display: flex
  47     justify-content: center
  48     margin-bottom: -#{$tabs-border-bottom-width}
  49     padding: $tabs-link-padding
  50     vertical-align: top
  51     &:hover
  52       border-bottom-color: $tabs-link-hover-border-bottom-color
  53       color: $tabs-link-hover-color
  54   li
  55     display: block
  56     &.is-active
  57       a
  58         border-bottom-color: $tabs-link-active-border-bottom-color
  59         color: $tabs-link-active-color
  60   ul
  61     align-items: center
  62     border-bottom-color: $tabs-border-bottom-color
  63     border-bottom-style: $tabs-border-bottom-style
  64     border-bottom-width: $tabs-border-bottom-width
  65     display: flex
  66     flex-grow: 1
  67     flex-shrink: 0
  68     justify-content: flex-start
  69     &.is-left
  70       padding-right: 0.75em
  71     &.is-center
  72       flex: none
  73       justify-content: center
  74       padding-left: 0.75em
  75       padding-right: 0.75em
  76     &.is-right
  77       justify-content: flex-end
  78       padding-left: 0.75em
  79   .icon
  80     &:first-child
  81       margin-right: 0.5em
  82     &:last-child
  83       margin-left: 0.5em
  84   // Alignment
  85   &.is-centered
  86     ul
  87       justify-content: center
  88   &.is-right
  89     ul
  90       justify-content: flex-end
  91   // Styles
  92   &.is-boxed
  93     a
  94       border: 1px solid transparent
  95       border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
  96       &:hover
  97         background-color: $tabs-boxed-link-hover-background-color
  98         border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
  99     li
 100       &.is-active
 101         a
 102           background-color: $tabs-boxed-link-active-background-color
 103           border-color: $tabs-boxed-link-active-border-color
 104           border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
 105   &.is-fullwidth
 106     li
 107       flex-grow: 1
 108       flex-shrink: 0
 109   &.is-toggle
 110     a
 111       border-color: $tabs-toggle-link-border-color
 112       border-style: $tabs-toggle-link-border-style
 113       border-width: $tabs-toggle-link-border-width
 114       margin-bottom: 0
 115       position: relative
 116       &:hover
 117         background-color: $tabs-toggle-link-hover-background-color
 118         border-color: $tabs-toggle-link-hover-border-color
 119         z-index: 2
 120     li
 121       & + li
 122         margin-left: -#{$tabs-toggle-link-border-width}
 123       &:first-child a
 124         border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
 125       &:last-child a
 126         border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
 127       &.is-active
 128         a
 129           background-color: $tabs-toggle-link-active-background-color
 130           border-color: $tabs-toggle-link-active-border-color
 131           color: $tabs-toggle-link-active-color
 132           z-index: 1
 133     ul
 134       border-bottom: none
 135     &.is-toggle-rounded
 136       li
 137         &:first-child a
 138           border-bottom-left-radius: $radius-rounded
 139           border-top-left-radius: $radius-rounded
 140           padding-left: 1.25em
 141         &:last-child a
 142           border-bottom-right-radius: $radius-rounded
 143           border-top-right-radius: $radius-rounded
 144           padding-right: 1.25em
 145   // Sizes
 146   &.is-small
 147     font-size: $size-small
 148   &.is-medium
 149     font-size: $size-medium
 150   &.is-large
 151     font-size: $size-large