vexip-ui/css/divider.css

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

.vxp-divider-vars{--vxp-divider-b-color:var(--vxp-border-color-light-2);--vxp-divider-border:var(--vxp-border-shape) var(--vxp-divider-b-color);--vxp-divider-v-margin:24px;--vxp-divider-v-margin-text:14px;--vxp-divider-h-margin:8px;--vxp-divider-text-color:var(--vxp-content-color-base);--vxp-divider-text-v-padding:0;--vxp-divider-text-h-padding:14px;--vxp-divider-text-size-primary:var(--vxp-font-size-primary)}.vxp-divider{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);display:flex;padding:0;border-top:var(--vxp-divider-border)}.vxp-divider,.vxp-divider *,.vxp-divider ::after,.vxp-divider ::before{box-sizing:border-box}.vxp-divider--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-divider--inherit{color:inherit}.vxp-divider--horizontal{width:100%;margin:var(--vxp-divider-v-margin) 0;clear:both}.vxp-divider--vertical{position:relative;display:inline-block;height:14px;margin:0 var(--vxp-divider-h-margin);vertical-align:middle;border-inline-start:var(--vxp-divider-border);border-top:0}.vxp-divider--with-text{margin:var(--vxp-divider-v-margin-text) 0;text-align:center;white-space:nowrap;border-top:0}.vxp-divider--with-text::after,.vxp-divider--with-text::before{position:relative;top:50%;width:50%;content:"";border-top:var(--vxp-divider-border);transform:translateY(50%)}.vxp-divider--with-text-left::before{width:5%}.vxp-divider--with-text-left::after{width:95%}.vxp-divider--with-text-right::before{width:95%}.vxp-divider--with-text-right::after{width:5%}.vxp-divider--dashed,.vxp-divider--dashed::after,.vxp-divider--dashed::before{border-top-style:dashed}.vxp-divider__text{display:inline-block;padding:var(--vxp-divider-text-v-padding) var(--vxp-divider-text-h-padding);color:var(--vxp-divider-text-color);text-align:center;white-space:nowrap}.vxp-divider--primary .vxp-divider__text{font-size:var(--vxp-divider-text-size-primary);font-weight:500}