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

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

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

@tab-prefix-cls: ~'@{wd-prefix}-tabs';

.@{tab-prefix-cls} {
  .@{tab-prefix-cls}&-extra-small {
    > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        padding: @tabs-extra-small-tab-padding;
        font-size: @font-size-sm;

        .@{tab-prefix-cls}-tab-btn {
          line-height: @tabs-extra-small-tab-btn-line-height;
        }
      }

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

      .@{tab-prefix-cls}-ink-bar {
        height: @tabs-extra-small-ink-bar-height !important;
      }
    }

    &:not(.@{tab-prefix-cls}-button):not(.@{tab-prefix-cls}-card) {
      .@{tab-prefix-cls}-nav-wrap {
        &::before,
        &::after {
          top: @tabs-extra-small-tab-after-padding;
          height: @tabs-extra-small-nav-more-height;
        }
      }
    }

    &.@{tab-prefix-cls}-button {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-extra-small-button-tab-padding;
          font-size: @font-size-sm;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-extra-small-tab-btn-line-height;
          }
        }
        .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
          margin-left: @tabs-extra-small-button-tab-margin-left;
        }

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

    &.@{tab-prefix-cls}-text {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-extra-small-text-tab-padding;
          font-size: @tabs-extra-small-text-font-size;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-extra-small-text-line-height;
          }

          &-active {
            .@{tab-prefix-cls}-tab-btn {
              color: @text-tab;
            }
          }
        }

        .@{tab-prefix-cls}-nav-operations,
        .@{tab-prefix-cls}-nav-add-wrapper {
          .@{tab-prefix-cls}-nav-add,
          .@{tab-prefix-cls}-nav-more {
            font-size: @tabs-extra-small-text-nav-more-font-size;
            width: @tabs-extra-small-text-nav-more-width;
            height: @tabs-extra-small-text-nav-more-height;
          }
        }
      }
    }

    &.@{tab-prefix-cls}-card {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-extra-small-card-padding;
          font-size: @font-size-sm;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-extra-small-tab-btn-line-height;
          }
        }

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

    &.@{tab-prefix-cls}-left,
    &.@{tab-prefix-cls}-right {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab,
        .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
          margin: @tabs-card-gutter;
        }
      }
    }
  }

  .@{tab-prefix-cls}&-small {
    > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        padding: @tabs-small-tab-padding;
        font-size: @font-size-sm;

        .@{tab-prefix-cls}-tab-btn {
          line-height: @line-height-base;
        }
      }

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

      .@{tab-prefix-cls}-ink-bar {
        height: @tabs-small-ink-bar-height !important;
      }
    }

    &:not(.@{tab-prefix-cls}-button):not(.@{tab-prefix-cls}-card) {
      .@{tab-prefix-cls}-nav-wrap {
        &::before,
        &::after {
          top: @tabs-small-tab-after-padding;
          height: @tabs-small-nav-more-height;
        }
      }
    }

    &.@{tab-prefix-cls}-button {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-small-button-tab-padding;
          font-size: @font-size-sm;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @line-height-base;
          }
        }
        .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
          margin-left: @tabs-small-button-tab-margin-left;
        }

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

    &.@{tab-prefix-cls}-text {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-small-text-tab-padding;
          font-size: @font-size-sm;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @line-height-base;
          }
        }

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

    &.@{tab-prefix-cls}-card {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-extra-small-card-padding;
          font-size: @font-size-sm;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @line-height-base;
          }
        }

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

    &.@{tab-prefix-cls}-left,
    &.@{tab-prefix-cls}-right {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab,
        .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
          margin: @tabs-card-gutter;
        }
      }
    }
  }

  .@{tab-prefix-cls}&-big {
    > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        padding: @tabs-big-tab-padding;
        font-size: @tabs-big-nav-tab-font-size;

        .@{tab-prefix-cls}-tab-btn {
          line-height: @tabs-big-tab-btn-line-height;
        }
      }

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

    &:not(.@{tab-prefix-cls}-button):not(.@{tab-prefix-cls}-card) {
      .@{tab-prefix-cls}-nav-wrap {
        &::before,
        &::after {
          top: @tabs-big-tab-after-padding;
          height: @tabs-big-nav-more-height;
        }
      }
    }

    &.@{tab-prefix-cls}-button {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-big-button-tab-padding;
          font-size: @font-size-base-15;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-big-button-tab-btn-line-height;
          }
        }

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

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

    &.@{tab-prefix-cls}-text {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-big-text-tab-padding;
          font-size: @tabs-big-text-font-size;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-big-button-tab-btn-line-height;
          }
        }

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

    &.@{tab-prefix-cls}-card {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-big-card-padding;
          font-size: @tabs-big-card-font-size;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-big-card-tab-btn-line-height;
          }
        }

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

  .@{tab-prefix-cls}&-large {
    > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-tab {
        padding: @tabs-large-tab-padding;
        font-size: @tabs-large-nav-tab-font-size;

        .@{tab-prefix-cls}-tab-btn {
          line-height: @tabs-large-tab-btn-line-height;
        }
      }

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

    &:not(.@{tab-prefix-cls}-button):not(.@{tab-prefix-cls}-card) {
      .@{tab-prefix-cls}-nav-wrap {
        &::before,
        &::after {
          top: @tabs-large-tab-after-padding;
          height: @tabs-large-nav-more-height;
        }
      }
    }

    &.@{tab-prefix-cls}-button {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-large-button-tab-padding;
          font-size: @tabs-large-nav-tab-font-size;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-large-button-tab-btn-line-height;
          }
        }

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

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

    &.@{tab-prefix-cls}-text {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-large-text-tab-padding;
          font-size: @tabs-large-text-font-size;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-large-tab-btn-line-height;
          }
        }

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

    &.@{tab-prefix-cls}-card {
      .@{tab-prefix-cls}-nav {
        .@{tab-prefix-cls}-tab {
          padding: @tabs-large-card-padding;
          font-size: @tabs-large-card-font-size;

          .@{tab-prefix-cls}-tab-btn {
            line-height: @tabs-large-card-tab-btn-line-height;
          }
        }

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