wux-weapp/packages/core/divider/index.less

一套组件化、可复用、易扩展的微信小程序 UI 组件库

@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-divider {
    &--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: @spacing-lg 0;
        clear: both;
        border-top: 1px solid @border-color-base;
    }

    &--horizontal&--text {
        display: table;
        white-space: nowrap;
        text-align: center;
        background: transparent;
        font-weight: normal;
        color: @text-color-secondary;
        font-size: @font-size-lg;
        border-top: none !important;

        &::before,
        &::after {
            content: '';
            display: table-cell;
            position: relative;
            top: 50%;
            width: 50%;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: @border-color-base;
            transform: translateY(50%);
        }
    }

    &--horizontal&--dashed {
        border-top: 1px dashed @border-color-base;
    }

    &--horizontal&--dashed&--text {
        &::before,
        &::after {
            border-top-style: dashed;
        }
    }

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

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

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

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

    &--horizontal &__text {
        display: inline-block;
        padding: 0 @spacing-lg;
    }

    &--vertical {
        position: relative;
        top: -0.06em;
        display: inline-block;
        height: 0.9em;
        margin: 0 @spacing-lg;
        vertical-align: middle;
        border-top: 0;
        border-left: 1px solid  @border-color-base;
    }
}