vexip-ui/css/anchor.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-anchor-vars{--vxp-anchor-link-color:var(--vxp-content-color-base);--vxp-anchor-link-color-hover:var(--vxp-color-primary-light-1);--vxp-anchor-link-color-active:var(--vxp-color-primary-base);--vxp-anchor-track-width:2px;--vxp-anchor-track-style:solid;--vxp-anchor-track-color:var(--vxp-border-color-light-2);--vxp-anchor-track:var(--vxp-anchor-track-width) var(--vxp-anchor-track-style) var(--vxp-anchor-track-color);--vxp-anchor-track-color-active:var(--vxp-anchor-link-color-active);--vxp-anchor-pointer-size:8px;--vxp-anchor-pointer-bg-color:var(--vxp-color-white);--vxp-anchor-pointer-b-color:var(--vxp-anchor-link-color-active);--vxp-anchor-pointer-border:var(--vxp-border-shape) var(--vxp-anchor-pointer-b-color)}.vxp-anchor{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:flex;flex-direction:column;padding-inline-start:calc(var(--vxp-anchor-pointer-size) * .5);vertical-align:middle}.vxp-anchor,.vxp-anchor *,.vxp-anchor ::after,.vxp-anchor ::before{box-sizing:border-box}.vxp-anchor--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-anchor__list{padding:0}.vxp-anchor__item{display:flex;flex-direction:column}.vxp-anchor__link{padding:4px 14px;margin-inline-start:calc(var(--vxp-anchor-track-width) * -1);color:var(--vxp-anchor-link-color);text-decoration:none;cursor:pointer;border-inline-start:var(--vxp-anchor-track);transition:var(--vxp-transition-color),var(--vxp-transition-border)}.vxp-anchor__link:hover{color:var(--vxp-anchor-link-color-hover)}.vxp-anchor__link--active{color:var(--vxp-anchor-link-color-active)}.vxp-anchor--no-marker .vxp-anchor__link--active{border-inline-start-color:var(--vxp-track-color-active)}.vxp-anchor__marker{position:absolute;inset-inline-start:calc(var(--vxp-anchor-pointer-size) * .5 - 1px);display:flex;align-items:center;justify-content:center;transition:top var(--vxp-transition-base);transform:translate3d(-50%,-50%,0);will-change:top}html.rtl .vxp-anchor__marker,html[dir=rtl] .vxp-anchor__marker{transform:translate3d(50%,-50%,0)}.vxp-anchor__pointer{width:var(--vxp-anchor-pointer-size);height:var(--vxp-anchor-pointer-size);background-color:var(--vxp-anchor-pointer-bg-color);border:var(--vxp-anchor-pointer-border);border-radius:var(--vxp-anchor-pointer-size)}