@cw-devops/bk-magic-vue/lib/ui/transfer.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-transfer{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    position:relative;
    font-size:14px;
}

.bk-transfer .transfer{
        width:30px;
        height:30px;
        position:absolute;
        -webkit-transform:translate(-50%, -50%);
                transform:translate(-50%, -50%);
        top:50%;
        left:50%;
        background:url(images/transfer.png) no-repeat center center;
    }

.bk-transfer .source-list,
    .bk-transfer .target-list{
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
        min-width:200px;
        height:400px;
        background-color:#fff;
        border-radius:2px;
        border:1px solid #dde4eb;
        overflow:hidden;
    }

.bk-transfer .source-list .slot-header, .bk-transfer .target-list .slot-header{
            height:43px;
            line-height:43px;
            background-color:#fafbfd;
            border-bottom:1px solid #dde4eb;
            padding:0 20px;
            position:relative;
        }

.bk-transfer .source-list .slot-header .slot-content, .bk-transfer .target-list .slot-header .slot-content{
                position:relative;
            }

.bk-transfer .source-list .header, .bk-transfer .target-list .header{
            height:43px;
            line-height:43px;
            background-color:#fafbfd;
            border-bottom:1px solid #dde4eb;
            padding:0 20px;
            position:relative;
        }

.bk-transfer .source-list .header span, .bk-transfer .target-list .header span{
                position:absolute;
                right:10px;
                font-size:12px;
                color:#3a84ff;
                cursor:pointer
            }

.bk-transfer .source-list .header span.disabled, .bk-transfer .target-list .header span.disabled{
                    color:#c4c6cc;
                    cursor:not-allowed;
                }

.bk-transfer .source-list .empty, .bk-transfer .target-list .empty{
            width:100%;
            position:relative;
            top:40%;
            text-align:center;
            color:#c4c6cc;
            cursor:default;
        }

.bk-transfer .source-list .content, .bk-transfer .target-list .content{
            max-height:82%;
            overflow-y:auto;
            position:relative;
            padding:0;
            margin:6px 0;
        }

.bk-transfer .source-list .content li, .bk-transfer .target-list .content li{
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                height:40px;
                line-height:40px;
                padding:0 20px;
                list-style:none;
                cursor:pointer;
                position:relative
            }

.bk-transfer .source-list .content li:hover, .bk-transfer .target-list .content li:hover{
                    background-color:#eef6fe;
                    color:#3a84ff;
                }

.bk-transfer .source-list .content li.is-disabled, .bk-transfer .target-list .content li.is-disabled{
                    cursor:not-allowed;
                    color:#c4c6cc;
                    background-color:#fff;
                }

.bk-transfer .source-list .content li .content-text, .bk-transfer .target-list .content li .content-text{
                    -webkit-box-flex:1;
                        -ms-flex:1;
                            flex:1;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                }

.bk-transfer .source-list .content li .icon-wrapper, .bk-transfer .target-list .content li .icon-wrapper{
                    -webkit-box-flex:22px;
                        -ms-flex:22px 0 0px;
                            flex:22px 0 0;
                    display:none
                }

.bk-transfer .source-list .content li .icon-wrapper.hover, .bk-transfer .target-list .content li .icon-wrapper.hover{
                        display:inline-block;
                    }

.bk-transfer .source-list .content::-webkit-scrollbar, .bk-transfer .target-list .content::-webkit-scrollbar{
                width:4px;
                background-color:rgba(204, 204, 204, 0);
            }

.bk-transfer .source-list .content::-webkit-scrollbar-thumb, .bk-transfer .target-list .content::-webkit-scrollbar-thumb{
                height:5px;
                border-radius:2px;
                background-color:#e6e9ea;
            }

.bk-transfer .source-list .content .bk-icon, .bk-transfer .target-list .content .bk-icon{
                font-size:22px;
            }

.bk-transfer .target-list{
        margin-left:33px;
    }

.bk-transfer .transfer-search-input{
        border-bottom:1px solid #F0F1F5;
    }

.bk-transfer .transfer-search-input .bk-form-input{
            height:36px;
            line-height:34px;
            border:none;
        }