bulma/sass/components/tabs.scss

@import "../utilities/mixins";

$tabs-border-bottom-color: $border !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 1px !default;
$tabs-link-color: $text !default;
$tabs-link-hover-border-bottom-color: $text-strong !default;
$tabs-link-hover-color: $text-strong !default;
$tabs-link-active-border-bottom-color: $link !default;
$tabs-link-active-color: $link !default;
$tabs-link-padding: 0.5em 1em !default;

$tabs-boxed-link-radius: $radius !default;
$tabs-boxed-link-hover-background-color: $background !default;
$tabs-boxed-link-hover-border-bottom-color: $border !default;

$tabs-boxed-link-active-background-color: $scheme-main !default;
$tabs-boxed-link-active-border-color: $border !default;
$tabs-boxed-link-active-border-bottom-color: transparent !default;

$tabs-toggle-link-border-color: $border !default;
$tabs-toggle-link-border-style: solid !default;
$tabs-toggle-link-border-width: 1px !default;
$tabs-toggle-link-hover-background-color: $background !default;
$tabs-toggle-link-hover-border-color: $border-hover !default;
$tabs-toggle-link-radius: $radius !default;
$tabs-toggle-link-active-background-color: $link !default;
$tabs-toggle-link-active-border-color: $link !default;
$tabs-toggle-link-active-color: $link-invert !default;

.#{$class-prefix}tabs {
  @extend %block;

  @include overflow-touch;

  @extend %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-color: $tabs-border-bottom-color;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    color: $tabs-link-color;
    display: flex;
    justify-content: center;
    margin-bottom: -#{$tabs-border-bottom-width};
    padding: $tabs-link-padding;
    vertical-align: top;

    &:hover {
      border-bottom-color: $tabs-link-hover-border-bottom-color;
      color: $tabs-link-hover-color;
    }
  }

  li {
    display: block;

    &.is-active {
      a {
        border-bottom-color: $tabs-link-active-border-bottom-color;
        color: $tabs-link-active-color;
      }
    }
  }

  ul {
    align-items: center;
    border-bottom-color: $tabs-border-bottom-color;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    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;
    }
  }

  .#{$class-prefix}icon {
    &:first-child {
      @include ltr-property("margin", 0.5em);
    }

    &:last-child {
      @include ltr-property("margin", 0.5em, false);
    }
  }

  // Alignment
  &.is-centered {
    ul {
      justify-content: center;
    }
  }

  &.is-right {
    ul {
      justify-content: flex-end;
    }
  }

  // Styles
  &.is-boxed {
    a {
      border: 1px solid transparent;

      @include ltr {
        border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
      }

      @include rtl {
        border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius;
      }

      &:hover {
        background-color: $tabs-boxed-link-hover-background-color;
        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color;
      }
    }

    li {
      &.is-active {
        a {
          background-color: $tabs-boxed-link-active-background-color;
          border-color: $tabs-boxed-link-active-border-color;
          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important;
        }
      }
    }
  }

  &.is-fullwidth {
    li {
      flex-grow: 1;
      flex-shrink: 0;
    }
  }

  &.is-toggle {
    a {
      border-color: $tabs-toggle-link-border-color;
      border-style: $tabs-toggle-link-border-style;
      border-width: $tabs-toggle-link-border-width;
      margin-bottom: 0;
      position: relative;

      &:hover {
        background-color: $tabs-toggle-link-hover-background-color;
        border-color: $tabs-toggle-link-hover-border-color;
        z-index: 2;
      }
    }

    li {
      & + li {
        @include ltr-property(
          "margin",
          -#{$tabs-toggle-link-border-width},
          false
        );
      }

      &:first-child a {
        @include ltr {
          border-top-left-radius: $tabs-toggle-link-radius;
          border-bottom-left-radius: $tabs-toggle-link-radius;
        }

        @include rtl {
          border-top-right-radius: $tabs-toggle-link-radius;
          border-bottom-right-radius: $tabs-toggle-link-radius;
        }
      }

      &:last-child a {
        @include ltr {
          border-top-right-radius: $tabs-toggle-link-radius;
          border-bottom-right-radius: $tabs-toggle-link-radius;
        }

        @include rtl {
          border-top-left-radius: $tabs-toggle-link-radius;
          border-bottom-left-radius: $tabs-toggle-link-radius;
        }
      }

      &.is-active {
        a {
          background-color: $tabs-toggle-link-active-background-color;
          border-color: $tabs-toggle-link-active-border-color;
          color: $tabs-toggle-link-active-color;
          z-index: 1;
        }
      }
    }

    ul {
      border-bottom: none;
    }

    &.is-toggle-rounded {
      li {
        &:first-child a {
          @include ltr {
            border-bottom-left-radius: $radius-rounded;
            border-top-left-radius: $radius-rounded;
            padding-left: 1.25em;
          }

          @include rtl {
            border-bottom-right-radius: $radius-rounded;
            border-top-right-radius: $radius-rounded;
            padding-right: 1.25em;
          }
        }

        &:last-child a {
          @include ltr {
            border-bottom-right-radius: $radius-rounded;
            border-top-right-radius: $radius-rounded;
            padding-right: 1.25em;
          }

          @include rtl {
            border-bottom-left-radius: $radius-rounded;
            border-top-left-radius: $radius-rounded;
            padding-left: 1.25em;
          }
        }
      }
    }
  }

  // Sizes
  &.is-small {
    font-size: $size-small;
  }

  &.is-medium {
    font-size: $size-medium;
  }

  &.is-large {
    font-size: $size-large;
  }
}