@bee-design/ui/lib/ResizeBox/style/index.less

Bee Design React UI Library.

@import '../../style/theme/default.less';
@import './token.less';

@resizebox-prefix-cls: ~'@{prefix}-resizebox';
@resizebox-split-prefix-cls: ~'@{prefix}-resizebox-split';
@resizebox-split-group-prefix-cls: ~'@{prefix}-resizebox-split-group';
@resizebox-trigger-prefix-cls: ~'@{resizebox-prefix-cls}-trigger';

.@{resizebox-prefix-cls} {
    position: relative;
    width: 100%;
    overflow: hidden;

    &-direction-left,
    &-direction-right,
    &-direction-top,
    &-direction-bottom {
        position: absolute;
        left: 0;
        top: 0;
        user-select: none;
        box-sizing: border-box;
    }

    &-direction-right {
        left: unset;
        right: 0;
    }

    &-direction-bottom {
        top: unset;
        bottom: 0;
    }

    &-split,
    &-split-group {
        display: flex;
        user-select: auto;

        .@{resizebox-prefix-cls}-slit-trigger {
            flex: 0;
        }

        &-pane {
            overflow: auto;
        }

        .second-pane {
            flex: 1;
        }

        &-horizontal {
            flex-direction: row;
        }

        &-vertical {
            flex-direction: column;
        }

        &-moving {
            user-select: none;
        }
    }
}

// 伸缩触发杆
.@{resizebox-trigger-prefix-cls} {
    &-icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-color: @resizeBox-trigger-color-background;

        &:hover {
            background-color: @resizeBox-trigger-color-background-hover;
        }
    }

    &-icon {
        display: inline-block;
        color: @resizeBox-trigger-color-icon;
        font-size: @resizeBox-trigger-font-size-icon;
        z-index: 9;
    }

    &-prev,
    &-next {
        > svg {
            cursor: pointer;
        }
    }

    &-vertical {
        height: 100%;
        cursor: col-resize;

        &.@{resizebox-trigger-prefix-cls}-not-resizable {
            cursor: default;
        }

        .@{resizebox-trigger-prefix-cls}-prev,
        .@{resizebox-trigger-prefix-cls}-next {
            height: @resizeBox-trigger-icon-empty;
            line-height: @resizeBox-trigger-icon-empty;
        }

        .@{resizebox-trigger-prefix-cls}-icon-wrapper {
            width: @resizeBox-trigger-size-icon-wrapper;
            flex-direction: column;
        }

        .@{resizebox-trigger-prefix-cls}-icon-empty {
            height: @resizeBox-trigger-icon-empty;
            width: 100%;
        }
    }

    &-horizontal {
        width: 100%;
        cursor: row-resize;

        &.@{resizebox-trigger-prefix-cls}-not-resizable {
            cursor: default;
        }

        .@{resizebox-trigger-prefix-cls}-prev,
        .@{resizebox-trigger-prefix-cls}-next {
            width: @resizeBox-trigger-icon-empty;
            text-align: center;
        }

        .@{resizebox-trigger-prefix-cls}-icon-wrapper {
            height: @resizeBox-trigger-size-icon-wrapper;

            .@{prefix}-icon {
                vertical-align: -1px;
            }
        }

        .@{resizebox-trigger-prefix-cls}-icon-empty {
            width: @resizeBox-trigger-icon-empty;
            height: 100%;
        }
    }
}

.@{resizebox-prefix-cls}-rtl,
.@{resizebox-split-prefix-cls}-rtl,
.@{resizebox-split-group-prefix-cls}-rtl,
.@{resizebox-trigger-prefix-cls}-rtl {
    direction: rtl;
}