ten-design-vue/lib/style/anchor.css

ten-vue

/**
 * 文字部分
 * size 大小，line 行高， color 颜色
 */
/* button */
/* input */
/* transfer */
/* alert */
/* menu */
/* message */
/* modal */
/* badge */
/* tag */
/* progress */
/* popup */
/* tooltip */
/* loading */
/* tabs */
/* check */
/* mention */
/* popup */
/* steps */
/* tabs */
/* modal */
/* form */
/* table */
/* pagination */
/* upload */
/* collapse */
/* anchor */
/* list */
.ten-anchor {
  position: relative;
  padding-left: 2px;
}
.ten-anchor-wrapper {
  margin-left: -4px;
  padding-left: 4px;
  overflow: auto;
  background-color: #FFF;
}
.ten-anchor__prefix {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.ten-anchor__prefix::before {
  position: relative;
  display: block;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  background-color: #F0F0F0;
  content: ' ';
}
.ten-anchor__prefix-dot {
  position: absolute;
  left: 50%;
  display: none;
  width: 1px;
  height: 24px;
  border: 2px solid #0052D9;
  -webkit-transform: translate(-50%, -30%);
  transform: translate(-50%, -30%);
  transition: top 0.3s ease-in-out;
}
.ten-anchor__prefix-dot.visible {
  display: inline-block;
}
.ten-anchor-link {
  padding: 7px 0 7px 16px;
  line-height: 1.143;
}
.ten-anchor-link-title {
  position: relative;
  display: block;
  margin-bottom: 6px;
  overflow: hidden;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all 0.3s;
}
.ten-anchor-link-title:only-child {
  margin-bottom: 0;
}
.ten-anchor-link--active > .ten-anchor-link-title {
  color: #0052D9;
}
.ten-anchor-link .ten-anchor-link {
  padding-top: 5px;
  padding-bottom: 5px;
}