tdesign-mobile-vue/esm/_common/style/mobile/components/button/_index.less

tdesign-mobile-vue

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

@import "./_var.less";

@import "./_mixin.less";

.button-attr-color(@theme, @attr, @attr-prepend: "", @ghost: false) {
  &:active {
    @{attr}: e(@attr-prepend) @@theme-active;
  }

  &.@{prefix}-is-disabled {
    @{attr}: e(@attr-prepend) @@theme-disabled;
  }

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

  @{attr}: e(@attr-prepend) @@theme-default;
}

.@{prefix}-button {
  border-radius: 4px;
  .button();

  .@{prefix}-button__text,
  .@{prefix}-icon {
    position: relative;
    z-index: 1;
    line-height: @btn-line-height-default;
  }

  .@{prefix}-icon + .@{prefix}-button__text:not(:empty),
  .@{prefix}-loading + .@{prefix}-button__text:not(:empty) {
    margin-left: calc(@spacer / 2);
  }

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

    &.@{prefix}-button--primary {
      color: @text-color-anti;
      .button-attr-color("primary", background-color);
    }

    &.@{prefix}-button--success {
      color: @text-color-anti;
      .button-attr-color("success", background-color);
    }

    &.@{prefix}-button--warning {
      color: @text-color-anti;
      .button-attr-color("warning", background-color);
    }

    &.@{prefix}-button--danger {
      color: @text-color-anti;
      .button-attr-color("danger", background-color);
    }

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

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

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

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

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

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

    .button-attr-color("text-bg", background-color);
    .button-attr-color("border-gray", border, "1px solid");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  &.@{prefix}-is {
    &-block {
      display: block;
      width: 100%;
    }

    &-disabled {
      cursor: not-allowed;
    }
  }

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

  &.@{prefix}-size-l {
    // width: 100%;
    line-height: @btn-line-height-l;
    .button-size(@btn-height-l , @btn-font-large, @btn-icon-size-large, @btn-padding-horizontal, 0);
  }

  &--icon-only:not(&--round) {
    width: @btn-height-default;
    padding: 0;

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

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

  &--shape {
    // 正方形
    &-square {
      padding: 0;
      width: @btn-height-default;
      &.@{prefix}-size-s {
        padding: 0;
        width: @btn-height-s;
      }
      &.@{prefix}-size-l {
        padding: 0;
        width: @btn-height-l;
      }
    }

    // 圆角长方形
    &-round {
      border-radius: @btn-shape-border-radius-default;

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

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

    // 圆形
    &-circle {
      border-radius: 50%;
      padding: 0;
      width: @btn-height-default;

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