tdesign-react/esm/style/web/components/link/_index.less

TDesign Component for React

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

@import "./_var.less";

.link-attr-color(@theme) {
  // 状态 - 主题 颜色
  @theme-default: e("link-color-@{theme}");
  @theme-hover: e("link-color-@{theme}-hover");
  @theme-active: e("link-color-@{theme}-active");
  @theme-disabled: e("link-color-@{theme}-disabled");
  @theme-focus: e("link-color-@{theme}-focus");

  color: @@theme-default;
  // active 相关样式
  &:active {
    color: @@theme-active;
  }
  // hover - underline
  &.@{prefix}-link--hover-underline {
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid @@theme-default;
      // 下划线动画
      opacity: 0;
      transition: all @anim-duration-base linear;
    }

    &:hover::after {
      opacity: 1;
    }

    &:active::after {
      opacity: 1;
      border-color: @@theme-active;
    }
  }
  // hover - color
  &.@{prefix}-link--hover-color {
    &:hover {
      color: @@theme-hover;
    }
    // 下划线场景 hover active时 需要改动颜色
    &.@{prefix}-is-underline:hover::after {
      border-color: @@theme-hover;
    }
    &.@{prefix}-is-underline:active::after {
      border-color: @@theme-active;
    }

    &:active {
      color: @@theme-active;
    }
  }
  // 下划线样式 优先级高于 t-link--hover-underline 需要放在后面 否则opacity 被覆盖 无法显示下划线
  &.@{prefix}-is-underline {
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      opacity: 1;
      border-bottom: 1px solid @@theme-default;
      transition: all @anim-duration-base linear;
    }
  }
  // 禁用样式 优先级最高 所以放在最后
  &.@{prefix}-is-disabled {
    cursor: not-allowed;
    color: @@theme-disabled;

    &:hover,
    &:active {
      color: @@theme-disabled;
    }
    &.@{prefix}-is-underline::after {
      border-color: @@theme-disabled;
    }
  }
}
// size 相关样式
.link-attr-size(@size) {
  @font-size: e("link-font-@{size}");
  @icon-margin-size: e("link-icon-margin-@{size}");

  font: @@font-size;

  .@{prefix}-link__prefix-icon {
    margin-right: @@icon-margin-size;
    display: flex;
  }

  .@{prefix}-link__suffix-icon {
    margin-left: @@icon-margin-size;
    display: flex;
  }
}
.@{prefix}-link {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  position: relative;
  text-decoration: none;
  outline: none;
  padding: 0;
  transition: all @anim-duration-base linear;

  // size 相关样式
  .link-attr-size("default");
  &.@{prefix}-size-s {
    .link-attr-size("s");
  }
  &.@{prefix}-size-l {
    .link-attr-size("l");
  }

  &--theme-default {
    .link-attr-color("default");
  }

  &--theme-primary {
    .link-attr-color("primary");
  }

  &--theme-success {
    .link-attr-color("success");
  }

  &--theme-danger {
    .link-attr-color("danger");
  }

  &--theme-warning {
    .link-attr-color("warning");
  }
}