@chief-editor/ui/css/components/Divider/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-divider {
    &-type-horizontal {
        display: block;
        width: 100%;
        height: 1px;
        background: @border-color1;
    }

    &-type-vertical {
        position: relative;
        width: 1px;
        display: inline-block;
        height: 0.9em;
        margin: 0 8px;
        vertical-align: middle;
        background: @border-color1;
    }

    &-dashed {
        background: none;
        border-bottom: 1px dashed @border-color1;
    }

    &-orientation-center,
    &-orientation-left,
    &-orientation-right {
        display: table;
        margin: 16px 0;
        color: @color-text-grey1;
        font-weight: 600;
        .font-height(12px);
        white-space: nowrap;
        text-align: center;
        background: transparent;
        &::before,
        &::after {
            position: relative;
            top: 50%;
            display: table-cell;
            width: 50%;
            border-top: 1px solid @border-color1;
            transform: translateY(50%);
            content: '';
        }
    }
    &-orientation-left,
    &-orientation-right {
        &-inner-text {
            display: inline-block;
            padding: 0 24px;
        }
    }
    &-orientation-left {
        &::before {
            top: 50%;
            width: 5%;
        }
        &::after {
            top: 50%;
            width: 95%;
        }
    }
    &-orientation-right {
        &::before {
            top: 50%;
            width: 95%;
        }
        &::after {
            top: 50%;
            width: 5%;
        }
    }
    &-inner-text {
        display: inline-block;
        padding: 0 24px;
        font-weight: 600;
        color: @color-text-grey1;
        .font-height(12px)
    }

}