tntd/es/button/button.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@import './style/mixin.less';
@import '../style/mixins/size.less';

@btn-prefix-cls: ~'@{ant-prefix}-btn';

.tnt-btn {
  &.tnt-btn-mini {
    .button-size(@btn-height-mini; @btn-padding-mini; @btn-font-size-mini; @btn-border-radius-sm);
    &.@{btn-prefix-cls}-icon-only {
      .square(@btn-height-mini);
      padding-right: 0;
      padding-left: 0;
    }
    &.@{btn-prefix-cls}-circle {
      min-width: @btn-height-mini;
      border-radius: 50%;
    }
    &.@{btn-prefix-cls}-round {
      .button-size(@btn-circle-size-mini; 0 @btn-circle-size-mini / 2; @btn-font-size-mini; @btn-circle-size-mini);
      &.@{btn-prefix-cls}-icon-only {
        width: auto;
      }
    }
  }
  &-group-mini {
    & > .@{btn-prefix-cls},
    & > span > .@{btn-prefix-cls} {
      .button-size(@btn-height-mini; @btn-padding-mini; @btn-font-size-mini; 0);
      line-height: calc(@btn-height-mini - 2px);
    }
    & > .@{btn-prefix-cls}.@{btn-prefix-cls}-icon-only {
      .square(@btn-height-mini);
      padding-right: 0;
      padding-left: 0;
    }
  }
  &-tertiary {
    .button-variant-tertiary(@btn-default-color, @primary-color, @btn-tertiary-bg);
  }
  &.@{btn-prefix-cls}-primary {
    .button-disabled(@btn-primary-color, @blue-3, @blue-3);
  }
  &.@{btn-prefix-cls}-danger {
    .button-disabled(@btn-primary-color, @red-3, @red-3);
  }
  &.@{btn-prefix-cls}-link {
    .button-disabled(@blue-3, transparent, transparent);
    padding: 0;
  }
  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    margin-left: 4px;
  }
}

.button-variant-tertiary(@color; @hover-color; @background) {
  .button-color(@color; @background; @background);

  text-shadow: @btn-text-shadow;
  box-shadow: @btn-primary-shadow;

  &:hover,
  &:focus {
    .button-color(
      @hover-color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
    );
  }

  &:active,
  &.active {
    .button-color(
      @hover-color; ~`colorPalette('@{background}', 6) `; ~`colorPalette('@{background}', 6) `
    );
  }

  .button-disabled(@btn-disable-color; @btn-disable-bg; transparent);
}