@import '../../style/index.less';

@du-prefix-listpage: ~"@{du-prefix}-listpage";
@du-prefix-bulk: ~"@{du-prefix}-bulk";
@du-prefix-filter: ~"@{du-prefix}-filter";
@du-prefix-cards: ~"@{du-prefix}-cards";

.@{du-prefix-listpage} {
    position: relative;

    .@{du-prefix-listpage}-toolbar {
        overflow: hidden;
        border: none;
        padding-bottom: 10px;
        position: relative;
        z-index: 100;

        .@{du-prefix-listpage}-toolbar-left {
            float: left;
        }

        .@{du-prefix-listpage}-toolbar-right {
            float: right;
        }
    }

    .@{du-prefix-listpage}-pagination {
        margin: 16px 0;
        margin-right: 10px;
        text-align: right;
    }

    .@{du-prefix-listpage}-loadmore {
        margin: 0 auto;
        margin-top: 20px;
        display: block;
        padding: 0 30px;
    }

    .@{du-prefix-cards} {
        .@{du-prefix-cards}-card {
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 20px;
        } 
    }
}

.@{du-prefix-bulk} {
    display: inline-block;
    margin-bottom: 10px;
    .@{du-prefix-bulk}-button,
    .@{du-prefix-bulk}-checkbox {
        margin-right: 8px;
    }
    .@{du-prefix-bulk}-selected-count {
        color: #999;
    }
}

.@{du-prefix-filter} {
    display: block;
    margin-top: 10px;

    &.inline {
        margin-left: 20px;
        margin-right: 20px;
        display: inline;
    }

    .@{du-prefix-filter}-item {
        display: inline-block;
        margin-right: 20px;
        .@{du-prefix-filter}-item-label {
            color: #666;
        }
        .@{du-prefix}-tagselect {
            display: inline-block;
            vertical-align: middle;
        }
    }

}