@arco-design/web-vue/lib/link/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';

@link-prefix-cls: ~'@{prefix}-link';

.@{link-prefix-cls} {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: @link-padding-vertical @link-padding-horizontal;
  color: @link-color-text;
  font-size: @link-font-size;
  line-height: @link-line-height;
  text-decoration: none;
  background-color: @color-transparent;
  border-radius: @link-border-radius;
  cursor: pointer;
  transition: all @transition-duration-1 @transition-timing-function-linear;

  &:hover {
    color: @link-color-text_hover;
    background-color: @link-color-bg_hover;
  }

  &:active {
    color: @link-color-text_active;
    background-color: @link-color-bg_active;
    transition: none;
  }

  &&-hoverless {
    display: inline;
    padding: 0;
    background-color: unset;

    &:active,
    &:hover {
      background-color: unset;
    }
  }

  &&-disabled {
    color: @link-color-text_disabled;
    background: none;
    cursor: not-allowed;
  }

  &&-loading {
    color: @link-color-text_loading;
    background: none;
    cursor: default;
  }

  // 不同状态
  &-status-success {
    color: @link-color-text_success;

    &:hover {
      color: @link-color-text_success_hover;
    }

    &:active {
      color: @link-color-text_success_active;
    }
  }

  &-status-success&-disabled {
    color: @link-color-text_success_disabled;
  }

  &-status-success&-loading {
    color: @link-color-text_success_loading;
  }

  &-status-danger {
    color: @link-color-text_error;

    &:hover {
      color: @link-color-text_error_hover;
    }

    &:active {
      color: @link-color-text_error_active;
    }
  }

  &-status-danger&-disabled {
    color: @link-color-text_error_disabled;
  }

  &-status-danger&-loading {
    color: @link-color-text_error_loading;
  }

  &-status-warning {
    color: @link-color-text_warning;

    &:hover {
      color: @link-color-text_warning_hover;
    }

    &:active {
      color: @link-color-text_warning_active;
    }
  }

  &-status-warning&-disabled {
    color: @link-color-text_warning_disabled;
  }

  &-status-warning&-loading {
    color: @link-color-text_warning_loading;
  }

  // 链接图标
  &-icon {
    margin-right: @link-margin-icon-right;
    font-size: @link-size-icon;
    vertical-align: middle;
  }
}