<commit_before><template>
  <div class="vuestic-tabs">
    <nav class="nav nav-pills justify-content-around">
      <div class="nav-item" v-on:click="setActive(name)"
           :class="{active: name === currentActive}" v-for="name in names">
        <span class="nav-link"><h5>{{name}}</h5></span>
        <div class="underscore"></div>
      </div>
    </nav>
    <div class="tab-content d-flex justify-content-center">
      <div class="tab-pane"
           :class="{active: name === currentActive}" v-for="name in names">
        <slot :name="name" class="test"></slot>
      </div>
    </div>
  </div>
</template>

<script>

  import Widget from 'components/common/widget/Widget.vue'

  export default {
    components: {Widget},
    name: 'vuestic-tabs',
    props: ['names'],
    methods: {
      setActive (name) {
        this.currentActive = name
      }
    },
    data () {
      return {
        currentActive: this.names[0]
      }
    }
  }
</script>

<style lang="scss">
  @import "../../../sass/variables";

  .vuestic-tabs {
    background-color: white;
    .nav {
      padding-top: 2.25rem;
      .nav-item {
        text-align: center;
        .underscore {
          width: 100%;
          background-color: $brand-primary;
          height: .125rem;
          opacity: 0;
          transition: all .3s ease;
        }
        .nav-link {
          padding: 0;
          color: $gray;
          transition: all .3s ease;
        }
        &:hover {
          cursor: pointer;
          .nav-link {
            color: lighten($vue-darkest-blue, 20%);
          }
          .underscore {
            opacity: .3;
          }
        }
        &.active {
          .underscore {
            opacity: 1;
          }
          .nav-link {
            color: $vue-darkest-blue;
          }
        }
      }
    }
    .tab-content {
      padding-top: 3.125rem;
      padding-bottom: 1.5rem;
    }
  }
</style>
<commit_msg>fix(vuestic-tabs): fixed animations<commit_after><template>
  <div class="vuestic-tabs">
    <nav class="nav nav-pills row">
      <div class="nav-item col" v-on:click="setActive(name)"
           :class="{active: name === currentActive}" v-for="name in names">
        <span class="nav-link"><h5>{{name}}</h5></span>
      </div>
    </nav>
    <div class="track"><div :class="underscoreClass"></div></div>
    <div class="tab-content d-flex justify-content-center">
      <div class="tab-pane"
           :class="{active: name === currentActive}" v-for="name in names">
        <slot :name="name" class="test"></slot>
      </div>
    </div>
  </div>
</template>

<script>

  import Widget from 'components/common/widget/Widget.vue'

  export default {
    components: {Widget},
    name: 'vuestic-tabs',
    props: ['names'],
    computed: {
      underscoreClass () {
        return 'underscore-' + this.names.length + '-' + this.names.indexOf(this.currentActive)
      }
    },
    methods: {
      setActive (name) {
        this.currentActive = name
      }
    },
    data () {
      return {
        currentActive: this.names[0]
      }
    }
  }
</script>

<style lang="scss">
  @import "../../../sass/variables";

  .vuestic-tabs {
    background-color: white;
    .nav {
      margin: 0;
      padding-top: 2.25rem;
      .nav-item {
        flex-grow: 1;
        text-align: center;
        padding: 0;
        .nav-link {
          padding: 0;
          color: $gray;
          transition: all .3s ease;
        }
        &:hover {
          cursor: pointer;
          .nav-link {
            color: $vue-darkest-blue;
          }
        }
        &.active {
          .nav-link {
            color: $vue-darkest-blue;
          }
        }
      }
    }
    .track {
      overflow: hidden;
      width: 100%;
      height: .125rem;
      position: relative;
      div[class^='underscore-']{
        background-color: $brand-primary;
        height: .125rem;
        position: absolute;
      }
      $koeff: 0.8;
      @for $all from 1 through 10 {
        $width: 1/$all;
        div[class^='underscore-#{$all}'] {
          width: $width * $koeff * 100%;
          transition: left .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        @for $place from 0 through $all {
          .underscore-#{$all}-#{$place} {
            left: ($place + (1 - $koeff)/2) * $width * 100%;
          }
        }
      }
    }
    .tab-content {
      padding-top: 3.125rem;
      padding-bottom: 1.5rem;
    }
  }
</style>

{'fraction_non_alphanumeric': 0.16457960644007155, 'fraction_numerical': 0.018112701252236137, 'mean_word_length': 1.6483126110124333, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6534906', 'n_tokens_mistral': 1533, 'n_tokens_neox': 1447, 'n_words': 291}