<commit_before>@import '../../../style/import';

.tabs {
  overflow: hidden;

  &__bar {
    position: relative;
    display: flex;

    &__container {
      width: 100%;
      
      &:before,
      &:after {
        pointer-events: none;
        position: absolute;
        top: 0;
        display: block;
        width: px2rem(120px);
        height: 100%;
        content: "";
        z-index: 999;
      }
      &:before {
        left: 0;
        background: -webkit-linear-gradient(left,#fff,rgba(255, 255, 255, 0));
        background: linear-gradient(90deg,#fff,rgba(255, 255, 255, 0));
      }
      &:after {
          right: 0;
          background: -webkit-linear-gradient(left,rgba(216, 15, 15, 0),#fff);
          background: linear-gradient(90deg,rgba(255, 255, 255, 0),#fff);
      }
    }

    &__swipe {
      position: relative;
      left: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transform: translate3d(0px, 0px, 0px);
      transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    }

    &__nav {
      flex: 1;
      width: 100%;
      display: flex;

      .tabs__tab {
        display: flex;
        flex: 0 0 25%;
        justify-content: center;
      }
    }
  }
  
  // 高亮项目
  &__ink__bar {
    position: absolute;
    bottom: 0;
    height: px2rem(4px);
    background-color: $primary-color;

    // 运动模式
    &--animated {
      transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    }
  }

  &__tab {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    flex: 1;
    align-items: center;
    border-bottom: 1px solid #ddd;
    font-size: px2rem(30px);
    height: px2rem(88px);
    line-height: px2rem(88px);
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;

    // 不可用
    &--disabled {
      cursor: default;
      color: #ccc;
    }
    
    // 选中
    &--active {
      color: $primary-color;
    }
  }

  // pane content
  &__content {
    // 运动
    &--animated {
      display: flex;
      transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
      zoom: 1;
      width: 100%;
      height: 100%;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

      .tab__pane {
        flex-shrink: 0;
        width: 100%;
        will-change: transform;
      }
    }

    // 没有运动
    &--no--animated {

      .tab__pane {
        &--inactive {
          display: none;
        }
      }
    }    
  }

  .tab__pane {
    overflow: auto;

    &--inactive {
      height: 0;
      overflow: visible;
    }
  }
}<commit_msg>优化 tabBar 的滚动效果与样式<commit_after>@import '../../../style/import';

.tabs {
  overflow: hidden;

  &__bar {
    position: relative;
    display: flex;

    &__container {
      width: 100%;
      background-color: #fff;
      
      &:before,
      &:after {
        pointer-events: none;
        position: absolute;
        top: 0;
        display: block;
        width: px2rem(60px);
        height: 100%;
        content: "";
        z-index: 999;
      }
      &:before {
        left: 0;
        background: -webkit-linear-gradient(left,#fff,rgba(255, 255, 255, 0));
        background: linear-gradient(90deg,#fff,rgba(255, 255, 255, 0));
      }
      &:after {
          right: 0;
          background: -webkit-linear-gradient(left,rgba(216, 15, 15, 0),#fff);
          background: linear-gradient(90deg,rgba(255, 255, 255, 0),#fff);
      }
    }

    &__swipe {
      position: relative;
      left: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transform: translate3d(0px, 0px, 0px);
      // transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
      transition: transform 0.3s;
    }

    &__nav {
      flex: 1;
      width: 100%;
      display: flex;

      .tabs__tab {
        display: flex;
        flex: 0 0 25%;
        justify-content: center;
      }
    }
  }
  
  // 高亮项目
  &__ink__bar {
    position: absolute;
    bottom: 0;
    height: px2rem(4px);
    background-color: $primary-color;

    // 运动模式
    &--animated {
      transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    }
  }

  &__tab {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    flex: 1;
    align-items: center;
    border-bottom: 1px solid #ddd;
    font-size: px2rem(30px);
    height: px2rem(88px);
    line-height: px2rem(88px);
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;

    // 不可用
    &--disabled {
      cursor: default;
      color: #ccc;
    }
    
    // 选中
    &--active {
      color: $primary-color;
    }
  }

  // pane content
  &__content {
    // 运动
    &--animated {
      display: flex;
      transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
      zoom: 1;
      width: 100%;
      height: 100%;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

      .tab__pane {
        flex-shrink: 0;
        width: 100%;
        will-change: transform;
      }
    }

    // 没有运动
    &--no--animated {

      .tab__pane {
        &--inactive {
          display: none;
        }
      }
    }    
  }

  .tab__pane {
    overflow: auto;

    &--inactive {
      height: 0;
      overflow: visible;
    }
  }
}
{'fraction_non_alphanumeric': 0.15045227985970094, 'fraction_numerical': 0.05150452279859701, 'mean_word_length': 1.6702809265648102, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '7039610', 'n_tokens_mistral': 2251, 'n_tokens_neox': 1983, 'n_words': 419}