bulma/sass/components/tabs.scss

@import "../utilities/mixins";

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

$tabs-boxed-link-radius: getVar("radius") !default;
$tabs-boxed-link-hover-background-color: getVar("background") !default;
$tabs-boxed-link-hover-border-bottom-color: getVar("border") !default;

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

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

:root {
  @include register-vars(
    (
      tabs-border-bottom-color: #{$tabs-border-bottom-color},
      tabs-border-bottom-style: #{$tabs-border-bottom-style},
      tabs-border-bottom-width: #{$tabs-border-bottom-width},
      tabs-link-color: #{$tabs-link-color},
      tabs-link-hover-border-bottom-color: #{$tabs-link-hover-border-bottom-color},
      tabs-link-hover-color: #{$tabs-link-hover-color},
      tabs-link-active-border-bottom-color: #{$tabs-link-active-border-bottom-color},
      tabs-link-active-color: #{$tabs-link-active-color},
      tabs-link-padding: #{$tabs-link-padding},
      tabs-boxed-link-radius: #{$tabs-boxed-link-radius},
      tabs-boxed-link-hover-background-color: #{$tabs-boxed-link-hover-background-color},
      tabs-boxed-link-hover-border-bottom-color: #{$tabs-boxed-link-hover-border-bottom-color},
      tabs-boxed-link-active-background-color: #{$tabs-boxed-link-active-background-color},
      tabs-boxed-link-active-border-color: #{$tabs-boxed-link-active-border-color},
      tabs-boxed-link-active-border-bottom-color: #{$tabs-boxed-link-active-border-bottom-color},
      tabs-toggle-link-border-color: #{$tabs-toggle-link-border-color},
      tabs-toggle-link-border-style: #{$tabs-toggle-link-border-style},
      tabs-toggle-link-border-width: #{$tabs-toggle-link-border-width},
      tabs-toggle-link-hover-background-color: #{$tabs-toggle-link-hover-background-color},
      tabs-toggle-link-hover-border-color: #{$tabs-toggle-link-hover-border-color},
      tabs-toggle-link-radius: #{$tabs-toggle-link-radius},
      tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color},
      tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color},
      tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color},
    )
  );
}

.#{$class-prefix}tabs {
  @extend %block;
  @include overflow-touch;
  @extend %unselectable;

  align-items: stretch;
  display: flex;
  font-size: getVar("size-normal");
  justify-content: space-between;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;

  a {
    align-items: center;
    border-bottom-color: getVar("tabs-border-bottom-color");
    border-bottom-style: getVar("tabs-border-bottom-style");
    border-bottom-width: getVar("tabs-border-bottom-width");
    color: getVar("tabs-link-color");
    display: flex;
    justify-content: center;
    margin-bottom: calc(-1 * #{getVar("tabs-border-bottom-width")});
    padding: getVar("tabs-link-padding");
    vertical-align: top;

    &:hover {
      border-bottom-color: getVar("tabs-link-hover-border-bottom-color");
      color: getVar("tabs-link-hover-color");
    }
  }

  li {
    display: block;

    &.is-active {
      a {
        border-bottom-color: getVar("tabs-link-active-border-bottom-color");
        color: getVar("tabs-link-active-color");
      }
    }
  }

  ul {
    align-items: center;
    border-bottom-color: getVar("tabs-border-bottom-color");
    border-bottom-style: getVar("tabs-border-bottom-style");
    border-bottom-width: getVar("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: getVar("tabs-boxed-link-radius")
          getVar("tabs-boxed-link-radius") 0 0;
      }

      @include rtl {
        border-radius: 0 0 getVar("tabs-boxed-link-radius")
          getVar("tabs-boxed-link-radius");
      }

      &:hover {
        background-color: getVar("tabs-boxed-link-hover-background-color");
        border-bottom-color: getVar(
          "tabs-boxed-link-hover-border-bottom-color"
        );
      }
    }

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

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

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

      &:hover {
        background-color: getVar("tabs-toggle-link-hover-background-color");
        border-color: getVar("tabs-toggle-link-hover-border-color");
        z-index: 2;
      }
    }

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

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

        @include rtl {
          border-top-right-radius: getVar("tabs-toggle-link-radius");
          border-bottom-right-radius: getVar("tabs-toggle-link-radius");
        }
      }

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

        @include rtl {
          border-top-left-radius: getVar("tabs-toggle-link-radius");
          border-bottom-left-radius: getVar("tabs-toggle-link-radius");
        }
      }

      &.is-active {
        a {
          background-color: getVar("tabs-toggle-link-active-background-color");
          border-color: getVar("tabs-toggle-link-active-border-color");
          color: getVar("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: getVar("radius-rounded");
            border-top-left-radius: getVar("radius-rounded");
            padding-left: 1.25em;
          }

          @include rtl {
            border-bottom-right-radius: getVar("radius-rounded");
            border-top-right-radius: getVar("radius-rounded");
            padding-right: 1.25em;
          }
        }

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

          @include rtl {
            border-bottom-left-radius: getVar("radius-rounded");
            border-top-left-radius: getVar("radius-rounded");
            padding-left: 1.25em;
          }
        }
      }
    }
  }

  // Sizes
  &.is-small {
    font-size: getVar("size-small");
  }

  &.is-medium {
    font-size: getVar("size-medium");
  }

  &.is-large {
    font-size: getVar("size-large");
  }
}