xdesign-vue-next/es/anchor/style/index.css

XDesign Component for vue-next

.x-anchor {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  background: var(--td-bg-color-container);
  width: 200px;
  color: var(--td-text-color-primary);
  font: var(--td-font-body-medium);
}
.x-anchor .x-is-active > a {
  color: var(--td-brand-color);
}
.x-anchor__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: var(--td-component-stroke);
  cursor: pointer;
}
.x-anchor__line-cursor-wrapper {
  position: absolute;
  display: block;
  height: 0;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9);
}
.x-anchor__line-cursor-wrapper .x-anchor__line-cursor {
  width: 1px;
  height: 100%;
  background-color: var(--td-brand-color);
}
.x-anchor__item {
  padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l);
  display: flex;
  flex-direction: column;
}
.x-anchor__item.x-is-active {
  font-weight: 500;
}
.x-anchor__item .x-anchor__item {
  padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l);
}
.x-anchor__item-link {
  display: inline-block;
  position: relative;
  overflow: hidden;
  word-break: break-all;
  color: var(--td-text-color-primary);
  text-decoration: none;
  text-align: justify;
}
.x-anchor a {
  transition: color 0.2s linear;
}
.x-anchor a:hover {
  color: var(--td-brand-color);
  cursor: pointer;
}
.x-anchor a:active {
  color: var(--td-brand-color-active);
}
.x-anchor.x-size-s {
  width: 120px;
}
.x-anchor.x-size-l {
  width: 320px;
}
.x-anchor__target {
  cursor: pointer;
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
.x-anchor__target .x-anchor__copy {
  display: none;
  margin: 0 0 0 var(--td-comp-margin-xs);
}
.x-anchor__target:hover .x-anchor__copy {
  display: inline-block;
}
.x-anchor__target:target::after {
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--td-radius-circle);
  background-color: var(--td-brand-color);
  vertical-align: middle;
  animation: fadeOut 2s 2s linear 1;
  animation-fill-mode: forwards;
}