wetrade-design/es/tabs/style/card.less

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

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

@tab-prefix-cls: ~'@{wd-prefix}-tabs';
// tab卡片样式
.@{tab-prefix-cls}-card {
  > .@{tab-prefix-cls}-nav,
  > div > .@{tab-prefix-cls}-nav {
    .@{tab-prefix-cls}-tab {
      margin: 0;
      background: @tabs-card-head-background;
      border: @border-width-base @border-style-base @border-color-split;
      transition: all @animation-duration-slow @ease-in-out;
      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: @tabs-tab-btn-line-height;
      }

      &-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}-ink-bar {
      visibility: hidden;
    }
  }

  // ========================== Top & Bottom ==========================
  &.@{tab-prefix-cls}-top,
  &.@{tab-prefix-cls}-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
        margin-left: @tabs-card-gutter;
      }
    }
  }

  &.@{tab-prefix-cls}-top {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: @border-radius-base @border-radius-base 0 0;

        &-active {
          border-bottom-color: @component-background;
        }
      }
    }
  }
  &.@{tab-prefix-cls}-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 0 0 @border-radius-base @border-radius-base;

        &-active {
          border-top-color: @component-background;
        }
      }
    }
  }

  // ========================== Left & Right ==========================
  &.@{tab-prefix-cls}-left,
  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
        margin-top: @tabs-card-gutter;
      }
    }
  }

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

        &-active {
          border-right-color: @component-background;
        }
      }
    }
  }
  &.@{tab-prefix-cls}-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        border-radius: 0 @border-radius-base @border-radius-base 0;

        &-active {
          border-left-color: @component-background;
        }
      }
    }
  }
}