UNPKG

ten-design-vue

Version:

ten-vue

72 lines (63 loc) 1.28 kB
@import "../vars.less"; .ten-anchor { position: relative; padding-left: 2px; &-wrapper { margin-left: -4px; padding-left: 4px; overflow: auto; background-color: @anchor-bg; } &__prefix { position: absolute; top: 0; left: 0; height: 100%; &::before { position: relative; display: block; width: 2px; height: 100%; margin: 0 auto; background-color: @anchor-prefix-bg-color; content: ' '; } &-dot { position: absolute; left: 50%; display: none; width: 1px; height: 24px; border: 2px solid @anchor-active-color; transform: translate(-50%, -30%); transition: top 0.3s ease-in-out; &.visible { display: inline-block; } } } &-link { padding: 7px 0 7px 16px; line-height: 1.143; &-title { position: relative; display: block; margin-bottom: 6px; overflow: hidden; color: @text-color; white-space: nowrap; text-overflow: ellipsis; transition: all 0.3s; &:only-child { margin-bottom: 0; } } &--active > &-title { color: @anchor-active-color; } } &-link &-link { padding-top: 5px; padding-bottom: 5px; } }