wetrade-design/lib/tabs/style/button.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@import '../../style/mixins/index';

@tab-prefix-cls: ~'@{wd-prefix}-tabs';
@btn-prefix-cls: ~'@{wd-prefix}-btn';
// tab按钮样式
.@{tab-prefix-cls}-button {
  > .@{tab-prefix-cls}-nav,
  > div > .@{tab-prefix-cls}-nav {
    .@{tab-prefix-cls}-tab {
      margin: 0;
      transition: all @animation-duration-slow @ease-in-out;
      background-color: @fill-fill;
      color: @text-secondary;
      padding: @tabs-tab-padding;
      font-size: @font-size-sm;

      &-active {
        background: @brand-extra-light;
        .@{tab-prefix-cls}-tab-btn {
          color: @text-tab;
        }
      }

      &-btn {
        line-height: @line-height-base;
      }

      &-disabled {
        background-color: @fill-fill;
        .@{tab-prefix-cls}-tab-btn {
          color: @text-disable;
        }
      }

      &:not(.@{tab-prefix-cls}-tab-active):not(.@{tab-prefix-cls}-tab-disabled) {
        &:hover {
          background: @fill-fill-deep;
          .@{tab-prefix-cls}-tab-btn {
            color: @text-primary;

            &::before {
              display: none;
            }
          }
        }
      }
    }

    .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
      margin-left: @tabs-tab-margin-left;
    }

    .@{btn-prefix-cls}.@{tab-prefix-cls}-nav-more,
    .@{btn-prefix-cls}.@{tab-prefix-cls}-nav-add {
      width: @tabs-button-nav-operations-nav-more-width;
      height: @tabs-button-nav-operations-nav-more-height;
      font-size: @tabs-button-nav-operations-nav-more-font-size;
    }

    .@{tab-prefix-cls}-ink-bar {
      visibility: hidden;
    }

    &::before {
      display: none;
    }
  }

  // ========================== Top & Bottom ==========================
  &.@{tab-prefix-cls}-top {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: @border-radius-sm;

        &:first-of-type {
          margin-left: 0;
        }
      }
    }
  }
  &.@{tab-prefix-cls}-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: @border-radius-base;
      }
    }
  }

  // ========================== Left & Right ==========================
  &.@{tab-prefix-cls}-left,
  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        justify-content: center;
        border-radius: @border-radius-base;
      }
    }
    > .@{tab-prefix-cls}-content-holder {
      border-left: 0;
      border-right: 0;
    }
  }
}