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

TDesign Component for React

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

@import './_var.less';

@import './_mixin.less';

@import '../../mixins/_reset.less';

.@{prefix}-anchor {
  .reset;

  --td-anchor-space-base: var(--td-size-6);

  position: relative;
  background: @anchor-bg-color;
  width: @anchor-width-default;
  color: @anchor-text-color-default;
  font: @anchor-font;

  //锚点 item 被选中
  .@{prefix}-is-active > a {
    color: @anchor-text-color-current;
  }

  //锚点组件左侧线条
  &__line {
    position: absolute;
    top: 0;
    left: 0;
    width: @anchor-point-width;
    height: 100%;
    background-color: @anchor-border-color;
    cursor: pointer;

    &-cursor-wrapper {
      position: absolute;
      display: block;
      height: 0;
      opacity: 0;
      transition: @anchor-point-transition;

      .@{prefix}-anchor__line-cursor {
        width: @anchor-point-width;
        height: 100%;
        background-color: @anchor-text-color-current;
      }
    }
  }

  //锚点item
  &__item {
    padding: @anchor-item-padding;

    --level: 1;

    padding-left: calc(var(--level) * var(--td-anchor-space-base));
    display: flex;
    flex-direction: column;

    &.@{prefix}-is-active {
      font-weight: 500;
    }
  }

  &__item-link {
    display: inline-block;
    position: relative;
    overflow: hidden;
    word-break: break-all;
    color: @anchor-text-color-default;
    text-decoration: none;
    text-align: justify;
  }

  a {
    transition: color @anim-duration-base linear;
  }

  a:hover {
    color: @anchor-text-color-hover;
    cursor: pointer;
  }

  a:active {
    color: @anchor-text-color-active;
  }

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

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

.@{prefix}-anchor__target {
  cursor: pointer;
  font: @anchor-font;
  color: @anchor-text-color-default;

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      display: none;
    }
  }

  //锚点hover样式
  //使用 t-popup组件包裹 <a class="t-icon t-icon-file-copy"></a>
  //默认隐藏
  .@{prefix}-anchor__copy {
    display: none;
    margin: @anchor-target-copy-margin;
  }
  //hover样式 展示
  &:hover .@{prefix}-anchor__copy {
    display: inline-block;
  }

  // 激活锚点 滚动到指定锚点 标题后边出现定位提示
  //target属性参考文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target
  &:target::after {
    display: inline-block;
    content: '';
    width: @anchor-target-width;
    height: @anchor-target-width;
    border-radius: @border-radius-circle;
    background-color: @anchor-text-color-hover;
    vertical-align: middle;
    animation: @anchor-target-animation;
    animation-fill-mode: forwards;
  }
}