tntd/lib/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);
  }
  &-ai {
    .button-variant-ai(@btn-primary-color, @primary-color, @btn-ai-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);
}

// AI按钮
@ai-animation-duration: 0.3s;
@ai-animation-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
@ai-overlay-opacity: 0.2;

.ai-gradient-overlay(@overlay-color; @base-gradient) {
  background: linear-gradient(0deg, @overlay-color 0%, @overlay-color 100%), @base-gradient;
}

.generate-hover-in-animation(@name; @background) {
  @keyframes @name {
    0% {
      background: @background;
    }
    10% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.02), @background);
    }
    20% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.04), @background);
    }
    30% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.06), @background);
    }
    40% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.08), @background);
    }
    50% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.1), @background);
    }
    60% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.12), @background);
    }
    70% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.14), @background);
    }
    80% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.16), @background);
    }
    90% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.18), @background);
    }
    100% {
      .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background);
    }
  }
}

.generate-hover-out-animation(@name; @background) {
  @keyframes @name {
    0% {
      .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background);
    }
    10% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.18), @background);
    }
    20% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.16), @background);
    }
    30% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.14), @background);
    }
    40% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.12), @background);
    }
    50% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.1), @background);
    }
    60% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.08), @background);
    }
    70% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.06), @background);
    }
    80% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.04), @background);
    }
    90% {
      .ai-gradient-overlay(rgba(255, 255, 255, 0.02), @background);
    }
    100% {
      background: @background;
    }
  }
}

.generate-active-animation(@name; @background) {
  @keyframes @name {
    0% {
      background: @background;
    }
    10% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.02), @background);
    }
    20% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.04), @background);
    }
    30% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.06), @background);
    }
    40% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.08), @background);
    }
    50% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.1), @background);
    }
    60% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.12), @background);
    }
    70% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.14), @background);
    }
    80% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.16), @background);
    }
    90% {
      .ai-gradient-overlay(rgba(0, 0, 0, 0.18), @background);
    }
    100% {
      .ai-gradient-overlay(rgba(0, 0, 0, @ai-overlay-opacity), @background);
    }
  }
}

.button-variant-ai(@color; @hover-color; @background) {
  color: @color;
  background: @background;
  border: none;
  text-shadow: @btn-text-shadow;
  box-shadow: @btn-primary-shadow;

  animation: ai-hover-out @ai-animation-duration @ai-animation-easing;
  animation-fill-mode: both;

  &:hover,
  &:focus {
    color: @color;
    .ai-gradient-overlay(rgba(255, 255, 255, @ai-overlay-opacity), @background);
    animation: ai-hover-in @ai-animation-duration @ai-animation-easing;
    animation-fill-mode: both;
  }

  &:active,
  &.active {
    color: @color;
    .ai-gradient-overlay(rgba(0, 0, 0, @ai-overlay-opacity), @background);
    animation: ai-active-in @ai-animation-duration @ai-animation-easing;
    animation-fill-mode: both;
  }

  .button-disabled(@white; @disabled-color; transparent);

  // AI 按钮禁用状态的额外样式
  &[disabled],
  &.@{btn-prefix-cls}-disabled {
    background: @btn-disable-bg-ai !important;
    animation: none !important;
    cursor: not-allowed;

    &:hover,
    &:focus,
    &:active {
      background: @btn-disable-bg-ai !important;
      animation: none !important;
    }
  }

  // linear-gradient不支持 transition 动画，使用 animation模拟 transition 动画，目前10帧差不多可以很丝滑
  .generate-hover-in-animation(ai-hover-in; @background);
  .generate-hover-out-animation(ai-hover-out; @background);
  .generate-active-animation(ai-active-in; @background);
}