tt-mp/src/tab/index.less

一套组件化、可复用、易扩展的头条小程序 UI 组件库

@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.tab-style(@theme, @color) {
  &--@{theme} &-bar {
    background: @color;
  }

  &--@{theme}&--current {
    color: @color;
  }
}

.@{wux-prefix}-tabs {
  &__tab {
    flex: 1;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    font-size: @tabs-font-size;
    color: @tabs-color;

    &-bar {
      display: block;
      width: 100%;
      height: @tabs-bar-size;
      background: transparent;
      position: absolute;
      bottom: 0;
      left: 0;
      background: @tabs-bar-success-bg;
    }

    &--vertical {
      padding: 0 @tabs-scrolling-size;
    }

    &--vertical &-bar {
      width: @tabs-bar-size;
      height: 100%;
      right: 0;
      left: auto;
    }

    &--current {
      color: @tabs-bar-success-bg;
    }

    &--horizontal&--scroll {
      display: inline-flex;
      padding: 0 @tabs-scrolling-size;
      width: auto;
    }

    &--disabled {
      opacity: @disabled-opacity;
    }

    .tab-style(light, @tabs-bar-light-bg);
    .tab-style(stable, @tabs-bar-stable-bg);
    .tab-style(primary, @tabs-bar-primary-bg);
    .tab-style(info, @tabs-bar-info-bg);
    .tab-style(error, @tabs-bar-error-bg);
    .tab-style(success, @tabs-bar-success-bg);
    .tab-style(warning, @tabs-bar-warning-bg);
    .tab-style(royal, @tabs-bar-royal-bg);
    .tab-style(dark, @tabs-bar-dark-bg);
  }
}