tdesign-mobile-vue/esm/_common/style/mobile/components/divider/_index.less

tdesign-mobile-vue

@import "../../base.less";

@import "./_var.less";

.@{prefix}-divider {
  display: flex;
  color: @divider-color;
  border-color: @divider-color;
  border-style: @divider-content-line-style;
  border-width: 0;

  &::before,
  &::after {
    content: "";
    display: block;
    flex: 1;
    box-sizing: border-box;
    border: inherit;
    border-color: inherit;
    border-style: inherit;
  }

  &--horizontal {
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;

    &::before,
    &::after {
      border-top-width: 1px;
      transform: scaleY(.5);
    }

    .@{prefix}-divider__content:not(:empty) {
      margin: 0 12px;
    }
  }

  &--vertical {
    flex-direction: column;
    height: 1em;
    margin: 0 8px;

    &::before,
    &::after {
      border-left-width: 1px;
      transform: scaleX(.5);
    }

    &-center {
      align-items: center;
      height: 100%;
    }
  }

  &--dashed {
    border-style: dashed;
  }

  &__content {
    font-size: @divider-content-font-size;
    line-height: @divider-content-line-height;
    color: @divider-content-color;
  }

  &--left::before,
  &--right::after {
    max-width: 30px;
  }
}