acud/es/transfer/style/index.less

acg react 组件库

/**
 * @file transfer style
 * @author zhousheng
 */

@import '../../style/themes/index';
@import '../../style/mixins/index';

@transfer-prefix-cls: ~'@{acud-prefix}-transfer';

.@{transfer-prefix-cls} {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: @T2;
    line-height: 1.5715;
    list-style: none;
    position: relative;
    display: flex;
    align-items: stretch;
    &-datasource {
        display: flex;
        flex-direction: column;
        width: 180px;
        height: @P * (8 * 7 + 10) + 8;
        border: 1px solid @G8;
        border-radius: @R3;
        background-color: @G10;
        overflow: hidden;
        &-header {
            display: flex;
            flex: none;
            height: @P * 10;
            padding: 8px @P * 3;
            background-color: @G10;
            border-radius: @R3 @R3 0 0;
            line-height: 22px;
            &-checkall {
                margin-right: @P * 3;
            }
        }
        &-label {
            color: @G2;
            font-size: @T2;
            font-weight: @font-weight-400;
            word-break: break-all;
        }
        &-body {
            overflow: hidden;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            flex: auto;
        }
        &-list {
            overflow: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: @G7;
                border-radius: @R3;
            }
        }
        &-item {
            height: @P * 8;
            padding: 5px @P * 3;
            cursor: pointer;
            display: flex;
            line-height: 22px;
            align-items: center;
            .basic-config(@transfer-datasource-default-tp, @transfer-datasource-default-p);

            &[disabled],
            &[aria-disabled="true"] {
                cursor: not-allowed;
            }

            &-title {
                margin-left: @P * 2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &-arrow {
                margin-right: 2 * @P;
                .basic-tp-config(@transfer-icon-default-tp);
                cursor: pointer;
                display: flex;
                width: @P * 4;
                height: @P * 4;
            }
            &-group-option {
                padding-left: 15 * @P;
            }
            &-checkbox {
                height: @P * 4;
            }
        }
        &-search {
            height: @P * 10;
            padding: @P * 2 @P * 3;
            width: auto;
            flex-shrink: 0;
        }
        &-nodata {
            display: flex;
            align-items: center;
            flex: auto;
            justify-content: center;
            span {
                color: @G6;
                font-size: @T2;
                margin-top: -@P * 4;
            }
        }
    }
    &-target {
        display: flex;
        flex-direction: column;
        width: 180px;
        height: @P * (8 * 7 + 10) + 8;
        border: 1px solid @G8;
        border-radius: @R3;
        background-color: @G10;
        margin-left: @P * 4;
        overflow: hidden;
        &-header {
            display: flex;
            flex: none;
            height: @P * 10;
            padding: 8px @P * 3;
            background-color: @G10;
            border-radius: @R3 @R3 0 0;
            line-height: 22px;
            justify-content: space-between;
        }
        &-label {
            color: @G2;
            font-size: @T2;
            font-weight: @W2;
        }
        &-clear-all {
            font-size: @T2;
            font-weight: @W2;
            cursor: pointer;
            .basic-tp-config(@transfer-target-clear-default-tp);

            &[disabled],
            &[aria-disabled="true"] {
                cursor: not-allowed;
            }
        }
        &-body {
            overflow: hidden;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            flex: auto;
        }
        &-list {
            overflow: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: @G7;
                border-radius: @R3;
            }
        }
        &-item {
            height: @P * 8;
            padding: 5px @P * 3;
            display: flex;
            line-height: 22px;
            justify-content: space-between;
            .basic-config(@transfer-datasource-default-tp, @transfer-datasource-default-p);

            &[disabled],
            &[aria-disabled="true"] {
                cursor: not-allowed;
            }

            &-wrap {
                overflow: hidden;
                display: flex;
            }

            &-title {
                margin-right: @P * 3;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &-cancel {
                &.@{iconfont-css-prefix}-outlined-close {
                    display: flex;
                    cursor: pointer;
                    .basic-tp-config(@transfer-icon-default-tp);
                }
            }
            &-arrow {
                margin-right: 2 * @P;
                cursor: pointer;
                .basic-tp-config(@transfer-icon-default-tp);
            }
            &-group-option {
                padding-left: 14 * @P;
            }
        }
        &-search {
            padding: @P * 2 @P * 3;
            width: auto;
            flex-shrink: 0;
            height: @P * 10;
        }
        &-nodata {
            display: flex;
            align-items: center;
            flex: auto;
            justify-content: center;
            span {
                color: @G6;
                font-size: @T2;
                margin-top: -@P * 4;
            }
        }
    }
    .@{acud-prefix}-input input {
        font-size: 12px;
    }
    &.@{transfer-prefix-cls}-table {
        .@{transfer-prefix-cls}-datasource,
        .@{transfer-prefix-cls}-target {
            height: 360px;
        }
        .@{transfer-prefix-cls}-datasource-search,
        .@{transfer-prefix-cls}-target-search {
            background-color: @G10;
            border-top: 1px solid #fff;
        }
        table {
            border-top: 1px solid #fff;
            thead tr th:nth-last-child(2) {
                border-right: none;
            }
            // tbody > tr:last-child > td {
            //     border-bottom: none;
            // }
        }
        .@{transfer-prefix-cls}-table-box {
            overflow: auto;
        }
    }
}