src/style/index.less
@import './var.less';
@import './fixed.less';
@import './icon.less';

.v2-table {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: @background-color-white;
    font-size: @normal-font-size;
    font-weight: @font-weight-normal;
    color: @color-primary;
    table, tbody, tr, td, th {
        position: relative;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

.v2-table__table-wrapper, .v2-table__table-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.v2-table__header-wrapper, .v2-table__footer-wrapper {
    overflow: hidden;
}

.v2-table__col-group {
    display: table-column-group;
    & > div {
        display: table-column
    }
}

.v2-table__body, .v2-table__header, .v2-table__footer {
    table-layout: fixed;
    &.v2-table__border {
        .v2-table__cell {
            border-right: 1px solid @border-regular-color;
            &:first-child {
                border-left: 1px solid @border-primary-color;
            }
        }
    }
    &.v2-table__header-border {
        border-top: 1px solid @border-primary-color;
    }
    &.v2-table__footer-border {

    }
}

.v2-table__header th {
    height: 40px;
}

.v2-table__footer td, .v2-table__body td {
    height: 44px;
    .cell {
        color: @color-primary;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
        line-height: 1.5;
    }
}

.v2-table__cell {
    border-bottom: 1px solid @border-regular-color;
    cursor: default;
    font-size: @normal-font-size;
    user-select: none;
    vertical-align: middle;
    overflow: hidden;
    text-align: center;
    &.v2-table__column-cell {
        // color: @color-thead;
        color: @color-regular2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        background-color: @background-color-white;
        &.sortable {
            cursor: pointer;
        }
        &.descending .descending-caret {
            border-top: 5px solid @background-color-light
        }
        &.ascending .ascending-caret {
            border-bottom: 5px solid @background-color-light
        }
    }
    &.v2-table__footer-cell {
        background-color: @background-color-hover;
    }
    &.text-left {
        text-align: left;
    }
    &.text-right {
        text-align: right;
    }
}

.v2-table__caret-wrapper {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 16px;
    cursor: pointer;
    margin-left: 2px;
    vertical-align: middle;
}

.v2-table__sort-caret {
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    content: "";
    z-index: @z-index-min;
    border: 5px solid transparent;
    &.ascending-caret {
        border-bottom: 5px solid @border-light-color;
        top: -3px;
    }
    &.descending-caret {
        border-top: 5px solid @border-light-color;
        bottom: -3px;
    }
}

.v2-table__row {
    background-color: @background-color-white;
    transition: @all-transition;
    font-size: 0;
    &.row-hover {
        background-color: @background-color-hover;
    }
    &.v2-table__row-striped {
        background-color: @background-color-stripe;
    }
}

.v2-table__empty-data {
    position: relative;
    height: 144px;
    box-sizing: border-box;
    font-size: @normal-font-size;
    color: @color-thead;
    text-align: center;
    &.v2-table__empty-border {
        border-right: 1px solid @border-primary-color;
        border-left: 1px solid @border-primary-color;
        border-bottom: 1px solid @border-primary-color;
    }
    .v2-table__empty-default {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

    }
    .v2-table__empty-text {
        display: block;
    }
}

@keyframes loading-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
 }

.v2-table__data-loading {
    position: absolute;
    font-size: 14px;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: @z-index-normal;
    // background-color: transparent;
    background: rgba(255,255,255,0.7);
    .v2-table__loading-spinner {
        position: absolute;
        top: 50%;
        margin-top: -21px;
        width: 100%;
        text-align: center;
    }
    .circular {
        height: 42px;
        width: 42px;
        animation: loading-rotate 2s linear infinite;
    }
    .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90,150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: @background-color-light;
        stroke-linecap: round;
    }
}

.v2-table__pagination-box {
    position: relative;
    width: 100%;
    margin-top: 20px; 
    text-align: right;
    font-size: 0;
    .pagination-text-info {
        position: absolute;
        left: 0;
        top: 0;
        font-size: @normal-font-size;
        color: @color-regular2;
        line-height: 32px;
    }
}

.v2-table__pagination {
    font-size: 0;
    display: inline-block;
    .page {
        cursor: pointer;
        display: inline-block;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        margin-left: 5px;
        font-size: @normal-font-size;
        color: @color-regular;
        border: 1px solid @border-light-color3;
        background: @background-color-white;
        &:hover {
            border-color: @color-light;
            color: @color-light;
        }
        &.disabled {
            cursor: not-allowed;
            color: @color-regular2;
            &:hover {
                border-color: @border-light-color4;
            }
        }
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0;
        display: inline-block;
        .cur-page {
            border-color: @color-light;
            background-color: @color-light;
            color: @background-color-white;
            &:hover {
                color: @background-color-white;
                border-color: @color-light;
            }
        }
    }
}