unity/resources/sass/user/elements/_tabs.scss

// TABS

.nav-pills,
.nav-tabs {
  margin-bottom: $spacer;
}

.nav-link {
  font-weight: bold;

  &:hover {
    cursor: pointer;
  }
}

.nav-tabs {
  .nav-link {

    &:hover {
      color: $primary !important;
    }

    &.active {
      color: $primary;
    }
  }
}

.nav-pills {
  .nav-link {

    &:hover {
      color: $primary !important;
    }

    &.active {
      background: $primary;

      &:hover {
        color: $white !important;
      }
    }
  }
}

.popover,
.dropdown-menu {
  //tabs
}

// Tabs alternate

.tabs-lg-alternate {
  &.card-header {
    padding: 0;
    height: auto;

    .widget-number {
      font-size: $h2-font-size;
      font-weight: 300;
    }

    .tab-subheading {
      padding: 5px 0 0;
      opacity: .6;
      transition: all .2s;
    }

    & > .nav {
      margin: 0;

      .nav-link {
        padding: $layout-spacer-x 0;
        border-right: $gray-200 solid 1px;
        background: $gray-100;

        &:hover {
          background: $white;
          .tab-subheading {
            color: $black;
            opacity: .9;
          }
        }

        &::before {
          background: $white;
          border-radius: 0;
        }

        &.active {
          background: $white;

          .tab-subheading {
            color: $black;
            opacity: .9;
          }
        }
      }

      .nav-item:last-child {
        .nav-link {
          border-right: 0;
        }
      }
    }
  }
}

// Tabs animated

.tabs-animated {
  .card-header > .nav {
    .nav-link {
      position: relative;
      padding: ($layout-spacer-x / 1.5);
      margin: 0 ($layout-spacer-x / 2) 0 0;
      color: $body-color;

      &::before {
        transform: scale(0);
        opacity: 1;
        width: 100%;
        left: 0;
        bottom: -2px;
        content: "";
        position: absolute;
        display: block;
        @include border-radius($border-radius);
        background: $primary;
        transition: all .2s;
        height: 4px;
      }

      &.active,
      &:hover {
        color: $primary;

        &::before {
          transform: scale(1);
        }
      }
    }
  }
}

.shadow-tabs {
  position: relative;

  .tab-item {
    padding: $nav-link-padding-y $nav-link-padding-x;
    background: none;
    border: 0;
    position: relative;
    z-index: 7;
    transition: all .2s;
    cursor: pointer;

    &:hover {
      color: $primary;
    }
  }

  .tab-item-active:hover,
  .tab-item-active {
    color: $white;
  }

  .tab-item-line {
    height: 35px;
    bottom: 0;
    left: 0;
    @include border-radius($border-radius);
    box-shadow: 0 16px 26px -10px rgba($primary, 0.56),
    0 4px 25px 0px rgba(0, 0, 0, 0.12),
    0 8px 10px -5px rgba($primary, 0.2);
    position: absolute;
    background: $primary;
    z-index: 5;
    transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1) 0s;

    width: 114px;
    transform: translateX(12px);
  }
}

.scroll-gradient {
  position: relative;

  &::after,
  &::before {
    width: 100%;
    bottom: auto;
    top: 0;
    left: 0;
    height: 20px;
    position: absolute;
    z-index: 10;
    content: '';
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  }

  &::after {
    bottom: 0;
    top: auto;

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
  }
}

.inline-tabs {
  padding: $layout-spacer-x / 2;
  border-bottom: $gray-300 solid 1px;

  .tab-item {
    padding: $nav-link-padding-y ($nav-link-padding-x * 1.5);
  }

  .tab-item-line {
    bottom: ($layout-spacer-x / 2);
  }
}

.tabs-animated-shadow {
  .nav-link {
    position: relative;
    padding: ($layout-spacer-x / 1.5);
    margin: 0 ($layout-spacer-x / 2) 0 0;
    color: $body-color;

    span {
      position: relative;
      z-index: 5;
      display: inline-block;
      width: 100%;
    }

    &::before {
      transform: scale(0);
      width: 100%;
      left: 0;
      content: "";
      position: absolute;
      display: block;
      @include border-radius($border-radius);
      background: $primary;
      transition: all .2s;
      height: 100%;
      top: 0;
      z-index: 4;
      bottom: auto;
      box-shadow: 0 16px 26px -10px rgba($primary, 0.56),
      0 4px 25px 0px rgba(0, 0, 0, 0.12),
      0 8px 10px -5px rgba($primary, 0.2);
      @include border-radius(100%);
      opacity: .5;
    }

    &.active,
    &:hover {
      color: $white;

      &::before {
        transform: scale(1);
        @include border-radius($border-radius);
        opacity: 1;
      }
    }
  }

  .nav-item:last-child {
    .nav-link {
      margin-right: 0;
    }
  }

  &.tabs-shadow-bordered {
    border-bottom: $card-border-color solid 1px;

    .nav-link {
      margin-bottom: 0;
    }
  }
}

.tabs-rounded-lg {
  @include border-radius(120px);
  background: $white;
  padding: $layout-spacer-x / 2;
  margin-bottom: $layout-spacer-x;

  .nav-link {
    margin-bottom: 0;
    font-size: $font-size-lg;
    padding: ($layout-spacer-x / 2) ($layout-spacer-x / 3);

    &::before {
      @include border-radius(120px !important);
      box-shadow: 0 0 0 0 transparent;
    }
  }
}