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

tdesign-mobile-vue

@import '../../base.less';

@import './_var.less';

.link-size(@size) {
  @contentFont: 'link-content-@{size}-font';
  @iconSize: 'link-icon-@{size}-font-size';

  .@{link}--@{size} {
    .@{link}__content {
      font: @@contentFont;
    }
    .@{link}__prefix-icon,
    .@{link}__suffix-icon {
      font-size: @@iconSize;
    }
  }
}

.link-theme(@theme) {
  @color: 'link-@{theme}-color';
  @activeColor: 'link-@{theme}-active-color';
  @disabledColor: 'link-@{theme}-disabled-color';

  .@{link}--@{theme} {
    color: @@color;

    &.@{link}--underline::after {
      border-color: @@color;
    }

    &.@{link}--disabled {
      color: @@disabledColor;
    }

    &:active {
      &.@{link}--hover {
        color: @@activeColor;

        &.@{link}--underline::after {
          border-color: @@activeColor;
        }
      }
    }
  }
}

.link-size(small);
.link-size(medium);
.link-size(large);

.link-theme(primary);
.link-theme(success);
.link-theme(warning);
.link-theme(default);
.link-theme(danger);

.@{link} {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  text-decoration: none;

  &--underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 2px;
    opacity: 1;
    border-bottom: 1px solid rgb(205, 11, 231);
  }

  &__prefix-icon:not(:empty) + &__content:not(:empty) {
    padding-left: 4px;
    display: inherit;
  }

  &__content:not(:empty) + &__suffix-icon:not(:empty) {
    padding-left: 4px;
    display: inherit;
  }
}