vui-design/src/style/components/anchor.less

A high quality UI Toolkit based on Vue.js

@vui-anchor: ~"@{vui}-anchor";
@anchor-wrapper-padding-left: (@anchor-ink-thumb-size - @anchor-ink-track-size) / 2;

.@{vui-anchor} {
  position:relative;
  display:block;
  box-sizing:border-box;
  margin:0;
  padding:0 0 0 @anchor-ink-track-size;
  color:@anchor-font-color;
  font-size:@anchor-font-size;
  line-height:@anchor-line-height;

  &-wrapper {
    display:block;
    box-sizing:border-box;
    margin-left:-@anchor-wrapper-padding-left;
    padding-left:@anchor-wrapper-padding-left;
    overflow:auto;
  }

  &-ink {
    position:absolute;
    top:0;
    left:0;
    display:block;
    box-sizing:border-box;
    height:100%;

    & > &-track {
      position:relative;
      display:block;
      box-sizing:border-box;
      width:@anchor-ink-track-size;
      height:100%;
      margin:0 auto;
      background-color:@anchor-ink-track-color;
    }

    & > &-thumb {
      position:absolute;
      left:50%;
      display:none;
      box-sizing:border-box;
      width:@anchor-ink-thumb-size;
      height:@anchor-ink-thumb-size;
      background-color:@anchor-ink-thumb-color;
      border:@anchor-ink-thumb-border-width solid @anchor-ink-thumb-border-color;
      border-radius:50%;
      transform:translateX(-50%);
      transition:top @transition-duration @transition-timing-function;
    }

    &-active > &-thumb {
      display:block;
    }
  }

  &-link {
    display:block;
    box-sizing:border-box;
    padding:@anchor-link-padding-vertical 0 @anchor-link-padding-vertical @anchor-link-padding-horizontal;

    & > &-title {
      position:relative;
      display:block;
      box-sizing:border-box;
      margin-bottom:@anchor-link-padding-vertical;
      overflow:hidden;
      color:@anchor-link-title-font-color;
      white-space:nowrap;
      text-overflow:ellipsis;
      transition:all @transition-duration @transition-timing-function;

      &:only-child {
        margin-bottom:0;
      }

      &:hover {
        color:@anchor-link-title-hover-font-color;
      }
      &:active {
        color:@anchor-link-title-active-font-color;
      }
    }

    &-active > &-title {
      color:@anchor-link-title-on-font-color;

      &:hover {
        color:@anchor-link-title-on-font-color;
      }
      &:active {
        color:@anchor-link-title-on-font-color;
      }
    }
  }
}