@varlet/ui/es/divider/divider.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --divider-color: var(--color-outline); --divider-text-color: #888; --divider-text-margin: 8px 0; --divider-text-padding: 0 8px; --divider-inset: 72px;}.var-divider { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid var(--divider-color); margin: var(--divider-text-margin); font-size: var(--font-size-md); color: var(--divider-text-color);}.var-divider--vertical { width: 0; height: auto; align-self: stretch; margin: 0 var(--divider-text-margin); border-top: none; border-left: 1px solid var(--divider-color);}.var-divider--inset { width: calc(100% - var(--divider-inset)); left: var(--divider-inset);}.var-divider__text { display: inline-block; padding: var(--divider-text-padding);}.var-divider--with-text { background-color: transparent; height: fit-content; display: flex; align-items: center; justify-content: center; border: none;}.var-divider--with-text::before,.var-divider--with-text::after { display: inline-block; content: ''; flex: 1; height: 0; border-top: 1px solid var(--divider-color);}.var-divider--dashed { border-top-style: dashed;}.var-divider--dashed.var-divider--vertical { border-top: none; border-left-style: dashed;}.var-divider--hairline { transform: scaleY(0.5);}.var-divider--hairline.var-divider--with-text { transform: none;}.var-divider--hairline.var-divider--with-text::before,.var-divider--hairline.var-divider--with-text::after { transform: scaleY(0.5);}.var-divider--hairline.var-divider--vertical { transform: scaleX(0.5);}