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

tdesign-mobile-vue

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

@import "./_var.less";

.button-size(@size) {
  @fontSize: "button-@{size}-font-size";
  @padding: "button-@{size}-padding-horizontal";
  @height: "button-@{size}-height";
  @iconSize: "button-@{size}-icon-font-size";

  .@{button}--size-@{size} {
    font-size: @@fontSize;
    padding-left: @@padding;
    padding-right: @@padding;
    height: @@height;
    line-height: @@height;

    & .@{button}__icon {
      font-size: @@iconSize;
    }
  }
}

.button-theme(@theme) {
  @color: "button-@{theme}-color";
  @bgColor: "button-@{theme}-bg-color";
  @borderColor: "button-@{theme}-border-color";
  @disabledColor: "button-@{theme}-disabled-color";
  @disabledBorderColor: "button-@{theme}-disabled-border-color";
  @disabledBgColor: "button-@{theme}-disabled-bg";
  @activeBgColor: "button-@{theme}-active-bg-color";
  @activeBorderColor: "button-@{theme}-active-border-color";

  .@{button}--@{theme} {
    color: @@color;
    background-color: @@bgColor;

    &::after {
      border-width: @button-border-width;
      border-color: @@borderColor;
    }

    &.@{button}--hover {
      z-index: 0;

      &::after {
        background-color: @@activeBgColor;
        border-color: @@activeBorderColor;
      }
    }

    &.@{button}--disabled {
      color: @@disabledColor;
      background-color: @@disabledBgColor;

      &::after {
        border-color: @@disabledBorderColor;
      }
    }
  }
}

.ghost-theme(@theme) {
  @color: "button-ghost-@{theme}-color";
  @hoverColor: "button-ghost-@{theme}-hover-color";
  @borderColor: "button-ghost-@{theme}-border-color";

  &.@{button}--@{theme} when (@theme = primary), (@theme = danger) {
    color: @@color;

    &::after {
      border-color: @@borderColor;
    }

    &.@{button}--hover {
      color: @@hoverColor;

      &::after {
        background-color: transparent;
        border-color: @@hoverColor;
      }
    }
  }

  &.@{button}--@{theme} {

    &.@{button}--text.@{button}--hover,
    &.@{button}--text.@{button}--hover::after {
      background-color: @gray-color-10;
    }

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

      &::after {
        border-color: @button-ghost-disabled-color;
      }
    }
  }
}

.button-size(extra-small);
.button-size(small);
.button-size(medium);
.button-size(large);

.button-theme(default);
.button-theme(primary);
.button-theme(light);
.button-theme(danger);

.@{button} {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  white-space: nowrap;
  text-align: center;
  border: none;
  background-image: none;
  transition: all .3s;
  border-radius: @button-border-radius;
  outline: none;
  /* stylelint-disable-next-line */
  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
  font-weight: @button-font-weight;
  vertical-align: top;

  .cursor-pointer();

  /* stylelint-disable-next-line */
  -ms-touch-action: manipulation;
  touch-action: manipulation;

  /* stylelint-disable-next-line */
  -webkit-appearance: none;

  &::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    border-radius: calc(@button-border-radius * 2);
    border-style: solid;
    box-sizing: border-box;
  }

  &--text {
    color: @button-default-color;
    background: none;

    &::after {
      border: 0;
    }

    &.@{button}--hover::after {
      background-color: @button-default-text-active-bg-color;
    }

    &.@{button}--primary {
      color: @button-primary-text-color;
      background: none;

      &.@{button}--hover::after {
        background-color: @button-primary-text-active-bg-color;
      }

      &.@{button}--disabled {
        color: @button-primary-text-disabled-color;
        background: none;
      }
    }

    &.@{button}--danger {
      color: @button-danger-text-color;
      background: none;

      &.@{button}--hover::after {
        background-color: @button-danger-text-active-bg-color;
      }

      &.@{button}--disabled {
        color: @button-danger-text-disabled-color;
        background: none;
      }
    }

    &.@{button}--light {
      color: @button-light-text-color;
      background: none;

      &.@{button}--hover::after {
        background-color: @button-light-text-active-bg-color;
      }
    }

    &.@{button}--disabled {
      color: @button-default-disabled-color;
    }
  }

  &--dashed,
  &--outline {
    color: @button-default-outline-color;
    background-color: transparent;

    &::after {
      border-color: @button-default-outline-border-color;
    }

    &.@{button}--hover::after {
      background-color: @button-default-outline-active-bg-color;
      border-color: @button-default-outline-active-border-color;
    }

    &.@{button}--disabled {
      color: @button-default-outline-disabled-color;

      &::after {
        border-color: @button-default-outline-disabled-color;
      }
    }

    &.@{button}--primary {
      color: @button-primary-outline-color;

      &::after {
        border-color: @button-primary-outline-border-color;
      }

      &.@{button}--hover {
        color: @button-primary-outline-active-border-color;

        &::after {
          background-color: @button-primary-outline-active-bg-color;
          border-color: @button-primary-outline-active-border-color;
        }
      }

      &.@{button}--disabled {
        background-color: transparent;
        color: @button-primary-outline-disabled-color;

        &::after {
          border-color: @button-primary-outline-disabled-color;
        }
      }
    }

    &.@{button}--danger {
      color: @button-danger-outline-color;

      &::after {
        border-color: @button-danger-outline-border-color;
      }

      &.@{button}--hover {
        color: @button-danger-outline-active-border-color;

        &::after {
          background-color: @button-danger-outline-active-bg-color;
          border-color: @button-danger-outline-active-border-color;
        }
      }

      &.@{button}--disabled {
        background-color: transparent;
        color: @button-danger-outline-disabled-color;

        &::after {
          border-color: @button-danger-outline-disabled-color;
        }
      }
    }

    &.@{button}--light {
      color: @button-light-outline-color;
      background-color: @button-light-outline-bg-color;

      &::after {
        border-color: @button-light-outline-border-color;
      }

      &.@{button}--hover {
        color: @button-light-outline-active-border-color;

        &::after {
          background-color: @button-light-outline-active-bg-color;
          border-color: @button-light-outline-active-border-color;
        }
      }

      &.@{button}--disabled {
        background-color: transparent;
        color: @button-light-outline-disabled-color;

        &::after {
          border-color: @button-light-outline-disabled-color;
        }
      }
    }
  }

  &--dashed {
    &::after {
      border-style: dashed;
    }
  }

  &--ghost {
    background-color: transparent;
    color: @button-ghost-color;

    &::after {
      border-color: @button-ghost-border-color;
    }

    &.@{button}--default.@{button}--hover {
      color: @button-ghost-hover-color;

      &::after {
        background-color: transparent;
        border-color: @button-ghost-hover-color;
      }
    }

    // 不考虑 ghost + light 场景
    .ghost-theme(primary);
    .ghost-theme(danger);
    .ghost-theme(default);
  }

  .@{prefix}-loading + &__content:not(:empty),
  .@{prefix}-icon + &__content:not(:empty),
  &__content:not(:empty) + .@{prefix}-icon {
    margin-left: 4px;
  }

  // &__icon {
  //   border-radius: @button-icon-border-radius;
  // }

  // 圆角长方形
  &--round {
    &.@{button}--size-large {
      border-radius: calc(@button-large-height / 2);

      &::after {
        border-radius: @button-large-height;
      }
    }

    &.@{button}--size-medium {
      border-radius: calc(@button-medium-height / 2);

      &::after {
        border-radius: @button-medium-height;
      }
    }

    &.@{button}--size-small {
      border-radius: calc(@button-small-height / 2);

      &::after {
        border-radius: @button-small-height;
      }
    }

    &.@{button}--size-extra-small {
      border-radius: calc(@button-extra-small-height / 2);

      &::after {
        border-radius: @button-extra-small-height;
      }
    }
  }

  // 正方形
  &--square {
    padding: 0;

    &.@{button}--size-large {
      width: @button-large-height;
    }

    &.@{button}--size-medium {
      width: @button-medium-height;
    }

    &.@{button}--size-small {
      width: @button-small-height;
    }

    &.@{button}--size-extra-small {
      width: @button-extra-small-height;
    }
  }

  // 圆形
  &--circle {
    padding: 0;
    border-radius: 50%;

    &.@{button}--size-large {
      width: @button-large-height;

      &::after {
        border-radius: 50%;
      }
    }

    &.@{button}--size-medium {
      width: @button-medium-height;

      &::after {
        border-radius: 50%;
      }
    }

    &.@{button}--size-small {
      width: @button-small-height;

      &::after {
        border-radius: 50%;
      }
    }

    &.@{button}--size-extra-small {
      width: @button-extra-small-height;

      &::after {
        border-radius: 50%;
      }
    }
  }

  &--block {
    display: flex;
    width: 100%;
  }

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

  &__loading {
    &--wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &--indicator {
      color: @font-white-1;
    }
  }

  &.@{button}--hover::after {
    z-index: -1;
  }
}