vuestic-ui/dist/esm-node/VaDivider.css

Vue 3 UI Framework

:root,
:host {
  --va-divider-display: flex;
  /* Margin around divider, not the same as CSS margin. Should be one value. */
  --va-divider-margin: 0.5rem;
  --va-divider-line-width: 1px;
  --va-divider-border-style: solid;
  --va-divider-text-font-size: 0.875rem;
  --va-divider-text-line-height: 0;
  --va-divider-text-height: 0;
  --va-divider-text-vertical-align: middle;
  --va-divider-text-transform: translateY(-50%);
  /* This one adds offsets at the right and left for the given text orientation only for horizontal divider */
  --va-divider-text-horizontal-offset: 1.25rem;
  /* Vertical */
  --va-divider-vertical-display: inline-flex;
  /* Inset */
  --va-divider-inset-horizontal-margin: 1rem;
  --va-divider-inset-margin: 0.5rem var(--va-divider-inset-horizontal-margin);
  /* Dashed */
  --va-divider-dashed-border-top-style: dashed;
}
.va-divider {
  display: var(--va-divider-display);
  margin: var(--va-divider-margin) 0;
  font-family: var(--va-font-family);
}
.va-divider--vertical {
  margin: 0 var(--va-divider-margin);
  border-top: 0;
  border-right-width: var(--va-divider-line-width);
  border-right-style: var(--va-divider-border-style);
  border-right-color: var(--va-color-computed);
  display: var(--va-divider-vertical-display);
  vertical-align: top;
}
.va-divider--vertical.va-divider--dashed {
  border-right-style: dashed;
}
.va-divider--inset {
  margin: var(--va-divider-inset-margin);
}
.va-divider--inset.va-divider--vertical {
  margin: var(--va-divider-inset-horizontal-margin) var(--va-divider-margin);
}
.va-divider::before, .va-divider::after {
  content: "";
  flex: 1;
  border-top-width: var(--va-divider-line-width);
  border-top-style: var(--va-divider-border-style);
  border-top-color: var(--va-color-computed);
}
.va-divider--dashed::before, .va-divider--dashed::after {
  border-top-style: var(--va-divider-dashed-border-top-style);
}
.va-divider--left::before {
  flex: 0 var(--va-divider-text-horizontal-offset);
}
.va-divider--right::after {
  flex: 0 var(--va-divider-text-horizontal-offset);
}
.va-divider__text {
  font-size: var(--va-divider-text-font-size);
  line-height: var(--va-divider-text-line-height);
  height: var(--va-divider-text-height);
  vertical-align: var(--va-divider-text-vertical-align);
  transform: var(--va-divider-text-transform);
}