xdesign-vue-next/es/divider/style/index.css

XDesign Component for vue-next

.x-divider {
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--td-font-body-medium);
  margin: var(--td-comp-margin-xxl) 0;
  border-top: 1px solid var(--td-border-level-1-color);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
}
.x-divider--dashed {
  border-top-style: dashed;
}
.x-divider--horizontal {
  width: 100%;
  display: flex;
}
.x-divider--vertical {
  border-top: 0;
  display: inline-block;
  margin: 0 var(--td-comp-margin-m);
  border-left: 1px solid var(--td-border-level-1-color);
  height: 0.9em;
  vertical-align: middle;
}
.x-divider--with-text {
  display: flex;
  border-top: 0;
  white-space: nowrap;
  align-items: center;
}
.x-divider--with-text .x-divider__inner-text:not(:empty) {
  padding: 0 1em;
  display: inline-block;
}
.x-divider--with-text::before,
.x-divider--with-text::after {
  content: "";
  width: 50%;
  border-top: 1px solid var(--td-border-level-1-color);
}
.x-divider--with-text-left::before {
  width: 5%;
}
.x-divider--with-text-left::after {
  width: 95%;
}
.x-divider--with-text-right::before {
  width: 95%;
}
.x-divider--with-text-right::after {
  width: 5%;
}
.x-divider--dashed::before,
.x-divider--dashed::after {
  border-top: 1px dashed var(--td-border-level-1-color);
}
.x-divider--vertical.x-divider--dashed {
  border-left: 1px dashed var(--td-border-level-1-color);
}