maycur-business/lib/TreeTransfer/style/TreeTransfer.less

maycur business react components of web

@import "../../style/variables.less";
@import "../SelectableTree/style/SelectableTree.less";

.@{prefix}-tree-transfer-body{
    display: flex;
    justify-content: center;
    .selection-box{
        position: relative;
        border-radius: 5px;
        width: 44%;
        height: 419px;
        display: flex;
        flex-direction: column;
        .selection-box-title{
            position: relative;
            display: flex;
            height: 48px;
            align-items: center;
            border-bottom: 3px solid #EBEBEB;
            padding-left: 12px;
            font-size: 14px;
            color: #555555;
        }
        .selection-box-body{
            padding: 12px 10px;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .search-wrapper{
                position: relative;
                flex: none;
                height: 44px;
                padding-bottom: 12px;
                .ant-input {
                    border-radius: 1px;
                    background-color: #f2f2f2;
                    border-color: #f2f2f2;
                    padding-left: 10px;
                }
                .clear-btn{
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    line-height: 24px;
                    background-color: #fff;
                    text-align: center;
                    top: 4px;
                    right: 4px;
                    z-index: 3;
                    cursor: pointer;
                }
            }
            .main-wrapper{
                flex: 1;
                overflow: auto;
            }
        }
    }

    .right-item{
        display: flex;
        padding: 6px 0 6px 12px;
        margin: 1px 0;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
    
        .name-wrapper{
            display: flex;
            align-items: center;
        }
    
        .name{
            margin: 0 5px;
            display: inline-block;
            width: 220px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    
        .fm-paper,.fm-folder-o{
            color: @maycur-color;
            font-size: 14px;
            margin-top: 2px;
        }
    
        .delete-btn{
            padding: 0 10px;
    
            &:hover{
                color: @icon-fee-red-light;
            }
        }
    
        &:hover{
            background-color: @lighter-background;
            .delete-btn{
                visibility: visible;
            }
        }
    }

    .middle-icon-box{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
    }

    .checkall-text{
        color: @maycur-color;
    }

    .no-data{
        color: #BCBCBC;
        font-size: 13px;
        padding-top: 10px;
        text-align: center;
    }

    .basket-box{
        justify-content: space-between;
        .basket-title{
            text-align: left;
        }
        
        .basket-clear{
            text-align: right;
            color: @maycur-color;
            cursor: pointer;
        }

        .number{
            color: @maycur-color;
            margin-right: 5px;
        }
    }
}