tdesign-react/esm/common/style/web/components/button/_index.less

TDesign Component for React

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.button-attr-color(@theme, @attr, @ghost: false) {
  &:hover,
  &:focus-visible {
    @{attr}: @@theme-hover;
  }

  &:active when (@ghost = true) {
    @{attr}: @@theme-active;
  }

  &.@{prefix}-is-loading when (@ghost = true) {
    @{attr}: @@theme-default;
  }

  &.@{prefix}-is-loading when (@ghost = false) {
    @{attr}: @@theme-disabled;
  }

  // ghost disabled 强制统一色
  &.@{prefix}-is-disabled when (@ghost = true) {
    @{attr}: @btn-color-ghost-disabled;
    background-color: transparent;
  }

  &.@{prefix}-is-disabled when (@ghost = false) {
    @{attr}: @@theme-disabled;
  }

  @theme-default: e("btn-color-@{theme}");
  @theme-hover: e("btn-color-@{theme}-hover");
  @theme-active: e("btn-color-@{theme}-active");
  @theme-disabled: e("btn-color-@{theme}-disabled");
  @theme-focus: e("btn-color-@{theme}-focus");

  @{attr}: @@theme-default;
}

.@{prefix}-button {
  .reset;
  .button;

  text-decoration: none;

  .@{prefix}-button__text,
  .t-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
  }

  .t-icon {
    font-size: @btn-icon-size-default;
  }

  .@{prefix}-loading {
    font-size: @btn-loading-size;
  }

  .t-icon + .@{prefix}-button__text:not(:empty) {
    margin-left: @btn-icon-text-margin-left;
  }

  .@{prefix}-loading + .@{prefix}-button__text:not(:empty) {
    margin-left: @btn-icon-text-margin-left;
  }

  .@{prefix}-button__suffix:not(:empty) {
    display: inline-flex;
    margin-left: @btn-icon-text-margin-left;
  }

  // 主要按钮
  &--variant-base {
    color: @btn-text-variant-base-color;
    .button-size(@btn-height-default, @btn-font-default, @btn-icon-size-default, @btn-padding-horizontal-default);
    .button-attr-color("gray-bg", background-color);
    .button-attr-color("gray-bg", border-color);
    .button-attr-color("text-gray", color);

    &.@{prefix}-button--theme-primary {
      color: @btn-text-variant-base-color;
      .button-attr-color("primary", background-color);
      .button-attr-color("primary", border-color);
    }

    &.@{prefix}-button--theme-success {
      color: @btn-text-variant-base-color;
      .button-attr-color("success", background-color);
      .button-attr-color("success", border-color);
    }

    &.@{prefix}-button--theme-warning {
      color: @btn-text-variant-base-color;
      .button-attr-color("warning", background-color);
      .button-attr-color("warning", border-color);
    }

    &.@{prefix}-button--theme-danger {
      color: @btn-text-variant-base-color;
      .button-attr-color("danger", background-color);
      .button-attr-color("danger", border-color);
    }

    &.@{prefix}-button--ghost {
      .button-attr-color("none", background-color, true);
      .button-attr-color("white-ghost", color, true);
      .button-attr-color("white-ghost", border-color, true);

      &.@{prefix}-button--theme-primary {
        .button-attr-color("primary", color, true);
        .button-attr-color("primary", border-color, true);
      }

      &.@{prefix}-button--theme-success {
        .button-attr-color("success", color, true);
        .button-attr-color("success", border-color, true);
      }

      &.@{prefix}-button--theme-warning {
        .button-attr-color("warning", color, true);
        .button-attr-color("warning", border-color, true);
      }

      &.@{prefix}-button--theme-danger {
        .button-attr-color("danger", color, true);
        .button-attr-color("danger", border-color, true);
      }
    }

    &.@{prefix}-is-loading:not(&.@{prefix}-button--ghost) {
      &.@{prefix}-button--theme-default {
        color: @btn-color-text;
      }
    }
  }

  // 次要按钮
  &--variant-outline {
    .button-size(@btn-height-default, @btn-font-default, @btn-icon-size-default, @btn-padding-horizontal-default);
    .button-attr-color("text", color);

    .button-attr-color("white-bg", background-color);
    .button-attr-color("border-gray", border-color);

    &.@{prefix}-button--theme-primary {
      .button-attr-color("primary", color);
      .button-attr-color("primary", border-color);
    }

    &.@{prefix}-button--theme-success {
      .button-attr-color("success", color);
      .button-attr-color("success", border-color);
    }

    &.@{prefix}-button--theme-warning {
      .button-attr-color("warning", color);
      .button-attr-color("warning", border-color);
    }

    &.@{prefix}-button--theme-danger {
      .button-attr-color("danger", color);
      .button-attr-color("danger", border-color);
    }

    &.@{prefix}-button--ghost {
      .button-attr-color("none", background-color, true);
      .button-attr-color("white-ghost", color, true);
      .button-attr-color("white-ghost", border-color, true);

      &.@{prefix}-button--theme-primary {
        .button-attr-color("primary", color, true);
        .button-attr-color("primary", border-color, true);
      }

      &.@{prefix}-button--theme-success {
        .button-attr-color("success", color, true);
        .button-attr-color("success", border-color, true);
      }

      &.@{prefix}-button--theme-warning {
        .button-attr-color("warning", color, true);
        .button-attr-color("warning", border-color, true);
      }

      &.@{prefix}-button--theme-danger {
        .button-attr-color("danger", color, true);
        .button-attr-color("danger", border-color, true);
      }
    }

    &.@{prefix}-is-loading:not(&.@{prefix}-button--ghost) {
      color: @btn-color-text;

      &.@{prefix}-button--theme-primary {
        color: @btn-color-primary;
        background-color: @btn-color-text-bg;
      }

      &.@{prefix}-button--theme-success {
        color: @btn-color-success;
        background-color: @btn-color-text-bg;
      }

      &.@{prefix}-button--theme-warning {
        color: @btn-color-warning;
        background-color: @btn-color-text-bg;
      }

      &.@{prefix}-button--theme-danger {
        color: @btn-color-danger;
        background-color: @btn-color-text-bg;
      }
    }
  }

  // 虚线按钮
  &--variant-dashed {
    .button-size(@btn-height-default, @btn-font-default, @btn-icon-size-default, @btn-padding-horizontal-default);
    .button-attr-color("text", color);
    .button-attr-color("white-bg", background-color);
    .button-attr-color("border-gray", border-color);

    border-style: dashed;

    &.@{prefix}-button--theme-primary {
      .button-attr-color("primary", color);
      .button-attr-color("primary", border-color);
    }

    &.@{prefix}-button--theme-success {
      .button-attr-color("success", color);
      .button-attr-color("success", border-color);
    }

    &.@{prefix}-button--theme-warning {
      .button-attr-color("warning", color);
      .button-attr-color("warning", border-color);
    }

    &.@{prefix}-button--theme-danger {
      .button-attr-color("danger", color);
      .button-attr-color("danger", border-color);
    }

    &.@{prefix}-button--ghost {
      .button-attr-color("none", background-color, true);
      .button-attr-color("white-ghost", color, true);
      .button-attr-color("white-ghost", border-color, true);

      &.@{prefix}-button--theme-primary {
        .button-attr-color("primary", color, true);
        .button-attr-color("primary", border-color, true);
      }

      &.@{prefix}-button--theme-success {
        .button-attr-color("success", color, true);
        .button-attr-color("success", border-color, true);
      }

      &.@{prefix}-button--theme-warning {
        .button-attr-color("warning", color, true);
        .button-attr-color("warning", border-color, true);
      }

      &.@{prefix}-button--theme-danger {
        .button-attr-color("danger", color, true);
        .button-attr-color("danger", border-color, true);
      }
    }
    &.@{prefix}-is-loading:not(&.@{prefix}-button--ghost) {
      color: @btn-color-text;

      &.@{prefix}-button--theme-primary {
        color: @btn-color-primary;
        background-color: @btn-color-text-bg;
      }

      &.@{prefix}-button--theme-success {
        color: @btn-color-success;
        background-color: @btn-color-text-bg;
      }

      &.@{prefix}-button--theme-warning {
        color: @btn-color-warning;
        background-color: @btn-color-text-bg;
      }

      &.@{prefix}-button--theme-danger {
        color: @btn-color-danger;
        background-color: @btn-color-text-bg;
      }
    }
  }

  // 文字按钮
  &--variant-text {
    .button-size(@btn-height-default, @btn-font-default, @btn-icon-size-default, @btn-padding-horizontal-default);
    .button-attr-color("text-gray", color);
    .button-attr-color("text-bg", background-color);
    .button-attr-color("text-bg", border-color);

    &.@{prefix}-button--theme-primary {
      .button-attr-color("primary", color);
    }

    &.@{prefix}-button--theme-success {
      .button-attr-color("success", color);
    }

    &.@{prefix}-button--theme-warning {
      .button-attr-color("warning", color);
    }

    &.@{prefix}-button--theme-danger {
      .button-attr-color("danger", color);
    }

    &.@{prefix}-button--ghost {
      background: none;

      .button-attr-color("white-ghost", color, true);

      &.@{prefix}-button--theme-primary {
        .button-attr-color("primary", color, true);
      }

      &.@{prefix}-button--theme-success {
        .button-attr-color("success", color, true);
      }

      &.@{prefix}-button--theme-warning {
        .button-attr-color("warning", color, true);
      }

      &.@{prefix}-button--theme-danger {
        .button-attr-color("danger", color, true);
      }
    }

    &.@{prefix}-is-loading:not(&.@{prefix}-button--ghost) {
      color: @btn-color-text;

      &.@{prefix}-button--theme-primary {
        color: @btn-color-primary;
      }

      &.@{prefix}-button--theme-success {
        color: @btn-color-success;
      }

      &.@{prefix}-button--theme-warning {
        color: @btn-color-warning;
      }

      &.@{prefix}-button--theme-danger {
        color: @btn-color-danger;
      }
    }
  }

  &.@{prefix}-is-loading,
  &.@{prefix}-is-disabled {
    cursor: not-allowed;
  }

  &.@{prefix}-size-s {
    .button-size(@btn-height-s, @btn-font-s, @btn-icon-size-s, @btn-padding-horizontal-s);
  }

  &.@{prefix}-size-l {
    .button-size(@btn-height-l , @btn-font-l, @btn-icon-size-l, @btn-padding-horizontal-l);
  }

  &--shape-square {
    width: @btn-height-default;
    padding: 0;

    &.@{prefix}-size-s {
      width: @btn-height-s;
      padding: 0;
    }

    &.@{prefix}-size-l {
      width: @btn-height-l;
      padding: 0;
    }
  }

  &--shape-round {
    border-radius: @border-radius-round;

    &.@{prefix}-size-s {
      border-radius: @btn-shape-border-radius-s;
    }

    &.@{prefix}-size-l {
      border-radius: @btn-shape-border-radius-l;
    }
  }

  &--shape-circle {
    width: @btn-height-default;
    padding: 0;
    text-align: center;
    border-radius: @btn-shape-border-radius-default;

    .t-icon {
      font-size: @btn-icon-size-default;
    }

    .@{prefix}-loading {
      font-size: @btn-loading-size;
    }

    &.@{prefix}-size-s {
      width: @btn-height-s;
      border-radius: @btn-shape-border-radius-s;
    }

    &.@{prefix}-size-l {
      width: @btn-height-l;
      padding: 0;
      border-radius: @btn-shape-border-radius-l;
    }
  }

  &.@{prefix}-size-full-width {
    display: flex;
    width: 100%;
  }
}

.@{prefix}-button--ghost {
  --ripple-color: @gray-color-10; // 幽灵按钮相当于按钮深色模式，因此固定为深色模式 token
}

.@{prefix}-button:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
  --ripple-color: @btn-color-white-bg-active;
}

.@{prefix}-button--variant-base:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
  --ripple-color: @btn-color-gray-bg-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-primary:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
  --ripple-color: @btn-color-primary-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-success:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
  --ripple-color: @btn-color-success-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-warning:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
  --ripple-color: @btn-color-warning-active;
}

.@{prefix}-button--variant-base.@{prefix}-button--theme-danger:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
  --ripple-color: @btn-color-danger-active;
}