ten-design-vue/lib/theme/components/divider.less

ten-vue

@import "../vars.less";

.ten-divider {
  position: relative;
  background-color: #E2E2E2;
  &__horizontal {
    display: block;
    width: 100%;
    height: 1px;
    // 设计稿是 16，略挤
    margin: 20px 0;
    font-size: 0;
  }
  &__vertical {
    top: -0.08em;
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 10px;
    vertical-align: middle;
  }
  &__dashed {
    background-color: transparent;
    border-bottom: 1px dashed #E2E2E2;
  }
  &__title {
    position: absolute;
    transform: translate3d(0, -50%, 0);
    font-size: @font-size-base;
    font-weight: 500;
    > div {
      padding: 0 10px;
      background-color: #fbfbfb;
    }
    &-left {
      left: 20px;
    }
    &-center {
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
    }
    &-right {
      right: 20px;
    }
  }
}