tdesign-react/esm/common/style/web/components/divider/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

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

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-divider {
  .reset;

  font: @divider-font;
  margin: @divider-horizontal-margin;
  border-top: @divider-border-width solid  @divider-border-color;
  color: @divider-color;
  box-sizing: border-box;

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

  &--horizontal {
    width: 100%;
    display: flex;
  }

  &--vertical {
    border-top: 0;
    display: inline-block;
    margin: @divider-vertical-margin;
    border-left: @divider-border-width solid @divider-border-color;
    height: @divider-vertical-height;
    vertical-align: middle;
  }

  &--with-text {
    display: flex;
    border-top: 0;
    white-space: nowrap;
    align-items: center;

    .@{prefix}-divider__inner-text:not(:empty) {
      padding: @divider-inner-text-padding;
      display: inline-block;
    }

    &::before,
    &::after {
      content: "";
      width: 50%;
      border-top: @divider-border-width solid @divider-border-color;
    }

    &-left {
      &::before {
        width: 5%;
      }

      &::after {
        width: 95%;
      }
    }

    &-right {
      &::before {
        width: 95%;
      }

      &::after {
        width: 5%;
      }
    }
  }
}

.@{prefix}-divider--dashed {
  &::before,
  &::after {
    border-top: @divider-border-width dashed @divider-border-color;
  }
}

.@{prefix}-divider--vertical.@{prefix}-divider--dashed {
  border-left: @divider-border-width dashed @divider-border-color;
}