@table-operation-field-text-color: #67c1a5;
@table-operation-layer-max-width: 100%;
@list-meta-height: 35px;
@list-action-button-bacth-gap: 10px;
@list-action-button-width: 155px;

.list-view {
    position: relative;
    background: none repeat scroll 0 0 #fff;
    padding: 15px 30px;

    .ui-pager {
        .ui-pager-select-wrapper {
            margin: 0;
            margin-right: 18px;
        }

        .ui-select {
            padding-left: 0;
        }
    }
}

.list-summary {
    line-height: 16px;
}

.list-meta {
    overflow: hidden;
    position: relative;
    height: @list-meta-height;
    margin-bottom: 10px;
    .clearfix();
}

.list-action {
    height: @list-meta-height;
    float: left;
    z-index: 1;
    width: @list-action-button-width;
}

.list-filter {
    height: @list-meta-height;
    .clearfix();
    background: #efefef;
    margin-left: @list-action-button-width + @list-action-button-bacth-gap;
    .ui-searchbox {
        float: right;
        margin: 5px 10px;
    }
    .ui-select {
        // TODO
    }
    .list-filter-fields {
        float: left;
    }
    .list-batch-operation {
        float: left;
    }
}

.list-content-table {
    overflow: hidden;
}

.table-operation,
.table-operation-trigger {
    padding: 0 10px;
    cursor: pointer;
}

.table-operation-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    visibility: hidden;
    padding-left: 15px;
    background: #fff;

    .translate(100%);
    transition: -webkit-transform .5s;
    transition: -ms-transform .5s;
    transition: transform .5s;

    .table-operation {
        height: 16px;
        line-height: 16px;
        padding: 0;
        margin: 0 10px;
        vertical-align: middle;
    }

    &:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
}

// 鼠标悬浮最后一列的时候，触发弹层展现
.ui-table-cell-text-last:hover .table-operation-layer {
    visibility: visible;
    .translate(0);
}

.ui-table-cell-field-operation {
    color: @table-operation-field-text-color;
}
