vexip-ui/css/linker.css

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

.vxp-linker-vars{--vxp-linker-color:inherit;--vxp-linker-color-hover:var(--vxp-color-primary-light-1);--vxp-linker-color-active:var(--vxp-color-primary-dark-1);--vxp-linker-color-disabled:var(--vxp-content-color-disabled);--vxp-linker-series-span:8px;--vxp-linker-underline-height:1px}.vxp-linker{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:inline-flex;align-items:center;color:var(--vxp-linker-color);text-decoration:none;vertical-align:inherit;cursor:pointer;outline:0;transition:var(--vxp-transition-color)}.vxp-linker,.vxp-linker *,.vxp-linker ::after,.vxp-linker ::before{box-sizing:border-box}.vxp-linker--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-linker+.vxp-linker{margin-inline-start:var(--vxp-linker-series-span)}.vxp-linker:focus,.vxp-linker:hover{color:var(--vxp-linker-color-hover);text-decoration:none}.vxp-linker:active{color:var(--vxp-linker-color-active)}.vxp-linker--underline::after{position:absolute;inset-inline-start:0;right:0;bottom:0;height:var(--vxp-linker-underline-height);content:"";background-color:var(--vxp-linker-color-hover);opacity:0;transition:var(--vxp-transition-background),var(--vxp-transition-opacity)}.vxp-linker--underline:hover::after{opacity:100%}.vxp-linker--underline:active::after{background-color:var(--vxp-linker-color-active)}.vxp-linker--disabled{cursor:not-allowed}.vxp-linker--disabled,.vxp-linker--disabled:active,.vxp-linker--disabled:focus,.vxp-linker--disabled:hover{color:var(--vxp-linker-color-disabled)}.vxp-linker--disabled:hover::after{opacity:0}.vxp-linker__icon{margin-inline-end:3px}.vxp-linker--primary{--vxp-linker-color:var(--vxp-color-primary-base);--vxp-linker-color-hover:var(--vxp-color-primary-light-2);--vxp-linker-color-active:var(--vxp-color-primary-dark-1);--vxp-linker-color-disabled:var(--vxp-color-primary-opacity-5)}.vxp-linker--info{--vxp-linker-color:var(--vxp-color-info-base);--vxp-linker-color-hover:var(--vxp-color-info-light-2);--vxp-linker-color-active:var(--vxp-color-info-dark-1);--vxp-linker-color-disabled:var(--vxp-color-info-opacity-5)}.vxp-linker--success{--vxp-linker-color:var(--vxp-color-success-base);--vxp-linker-color-hover:var(--vxp-color-success-light-2);--vxp-linker-color-active:var(--vxp-color-success-dark-1);--vxp-linker-color-disabled:var(--vxp-color-success-opacity-5)}.vxp-linker--warning{--vxp-linker-color:var(--vxp-color-warning-base);--vxp-linker-color-hover:var(--vxp-color-warning-light-2);--vxp-linker-color-active:var(--vxp-color-warning-dark-1);--vxp-linker-color-disabled:var(--vxp-color-warning-opacity-5)}.vxp-linker--error{--vxp-linker-color:var(--vxp-color-error-base);--vxp-linker-color-hover:var(--vxp-color-error-light-2);--vxp-linker-color-active:var(--vxp-color-error-dark-1);--vxp-linker-color-disabled:var(--vxp-color-error-opacity-5)}