tntd/lib/anchor/anchor.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

// 使用 Less 变量管理层级参数
@anchor-level: 10;
@anchor-indent-step: 12px; // 每级递进步长
@anchor-active-line-left: 2px; // 激活线基准位置


.tnt-td-anchor{
  background: #fff;
  border-radius: calc(@border-radius-base * 2);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .05);
  padding: 16px 16px 8px 16px;
  right:0;
  position: absolute;
  
  .ant-anchor-ink-ball {
    display: none !important;
  }
  .ant-anchor-link {
    padding: 0 0 0 8px;
    position: relative;
    max-width: calc(220px - 8px);
  
    // 通用激活线样式
    &-active::before {
      content: " ";
      position: absolute;
      left: -@anchor-active-line-left;
      top: 0;
      bottom: 0;
      height: 24px;
      width: @anchor-active-line-left;
      background: @primary-color;
      transition: top 0.3s ease-in-out;
    }
  
    // 文字样式统一管理
    &-title {
      color: @text-color-secondary;
      transition: none !important;
      margin-bottom: 0;
      padding-top: 4px;
      padding-bottom: 4px;
      margin-bottom: 10px;
      // 激活状态文字样式
      &.ant-anchor-link-title-active{
        color: @text-color;
        font-weight: 600;
        transition: none !important;
      }
    }
  
    // 层级递进生成器
    .level-indent(@level) when (@level < @anchor-level) { // 生成最多10级
      .ant-anchor-link {
        padding-left: @anchor-indent-step;
        max-width: calc(220px - @anchor-indent-step * @level - 8px);
        min-width: 0;

        // 激活线递进算法
        &.ant-anchor-link-active::before {
          left: calc(-@anchor-active-line-left - @anchor-indent-step * @level);
        }
        // 递归生成下一级
        .level-indent(@level + 1);
      }
    }
  
    // 初始化递归生成
    .level-indent(1);
  }
}

.tnt-td-anchor-styles() {
  max-width: 278px; // 220+24+32+2
  .ant-anchor {
    padding-right: 24px;
  }
  .tnt-anchor-icon {
    opacity: 1;
    transition: all 0.1s linear 0.1s; 
  }
}

.ant-affix:hover .tnt-td-anchor {
  .tnt-td-anchor-styles();
}

.tnt-anchor.tnt-td-anchor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32px;
  transition: all 0.1s linear;
  &.tnt-anchor-show,
  &:hover {
    .tnt-td-anchor-styles();
  }
  .ant-anchor{
      overflow: hidden;
  }
  .tnt-anchor-icon{
      opacity: 0;
      position: absolute;
      right: 0;
      top: 2px;
      height: 18px;
      width: 18px;
      cursor: pointer;
      transition: all 0.1s linear; 
      .tntd-anticon{
        font-size: 18px;
      }
  }
}