acud/lib/table/style/base.less

acg react 组件库

.size-padding-map () {
    small: 5px 5px;
    large: 19px 19px;
}

.@{table-prefix-cls} {
    position: relative;
    // min-height: 200px;
    box-sizing: border-box;
    line-height: 1.6667;
    list-style: none;
    overflow: hidden;
    border-radius: @table-border-radius;
    background-color: @G11;
    &-cell {
        a {
            .basic-tp-config(@table-tbody-action-tp);
            cursor: pointer;
        }
        a[disabled] {
            cursor:not-allowed;
        }
        &-with-append {
            &-inner {
                display: flex;
                justify-content: left;
            }
            .@{table-prefix-cls}-row-expand-icon {
                margin: 2px 12px 2px 0;
            }
        }
        &.@{table-prefix-cls}-row-expand-icon-cell {
            width: @P * 4;
            padding-right: 0;
        }
    }
    &-filter-trigger {
        .basic-tp-config(@table-icon-default-tp);
        &-active {
            .basic-tp-config(@table-icon-active-tp);
        }
    }
}

.@{table-prefix-cls} table {
    width: 100%;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0;
    font-size: @table-font-size;
}

.@{table-prefix-cls}-thead>tr>th,
.@{table-prefix-cls}-tbody>tr>td,
.@{table-prefix-cls} tfoot>tr>th,
.@{table-prefix-cls} tfoot>tr>td {
    position: relative;
    padding: @table-padding-vertical @P * 3;
    overflow-wrap: break-word;
    // line-height: @P * 5;
    // height: 10 * @P;
}

each(.size-padding-map(), .(@value, @key, @index) { 
    .@{table-prefix-cls}-@{key} {
        .@{table-prefix-cls}-tbody>tr>td,
        .@{table-prefix-cls} tfoot>tr>th,
        .@{table-prefix-cls} tfoot>tr>td {
            padding: @value;
        }
    }
});

.@{table-prefix-cls}-thead {
    >tr>th {
        position: relative;
        color: @thead-font-color;
        background: @thead-backcolor;
        // border-bottom: 1px solid @table-border-color;
        text-align: left;
        font-weight: 400;
    
        &:not(:last-child) {
            border-right: 1px solid @thead-border-color;
        }
        &.@{table-prefix-cls}-selection-column,
        &.@{table-prefix-cls}-row-expand-icon-cell {
            border-right: none;
        }
    }
    >tr:not(:first-child)>th {
        border-top: 1px solid @thead-border-color;
        border-right: 1px solid @thead-border-color;
    }
}

.@{table-prefix-cls}-tbody>tr {
    transition: background .3s ease;
    .basic-config(@table-tbody-tp, @table-tbody-p);
}

.@{table-prefix-cls}-tbody>tr>td {
    color: @G2;
    border-bottom: 1px solid @G8;
}
.@{table-prefix-cls}-tbody>tr.@{table-prefix-cls}-placeholder>td {
    border-bottom: none;
}

.@{table-prefix-cls}-bordered .@{table-prefix-cls}-container {
    border-left: 1px solid @table-border-color;
}

.@{table-prefix-cls}-bordered table>thead>tr>th,
.@{table-prefix-cls}-bordered table>tbody>tr>td,
.@{table-prefix-cls}-bordered table>tfoot>tr>td,
.@{table-prefix-cls}-bordered table>tfoot>tr>th
{
    border-right: 1px solid @table-border-color;
}

.@{table-prefix-cls}-bordered table {
    border-top: 1px solid @table-border-color;
}

.@{table-prefix-cls} {
    .@{table-prefix-cls}-column-sorter {
        display: inline-block;
        vertical-align: middle;
        width: @table-icon-size;
        height: @table-icon-size;
        margin-left: @table-icon-margin-left;
        position: relative;
        cursor: pointer;
    
        .@{table-prefix-cls}-column-sorter-default {
            .basic-tp-config(@table-icon-default-tp);
        }

        /*
    
        .@{table-prefix-cls}-column-sorter-up {
            .basic-tp-config(@table-icon-active-tp);
        }
    
        .@{table-prefix-cls}-column-sorter-down {
            .basic-tp-config(@table-icon-active-tp);
        }
        */
    }
    .@{table-prefix-cls}-column-filter {
        margin-left: @table-icon-margin-left;
        font-size: 0;
        cursor: pointer;
    }
}

.@{table-prefix-cls}-dropdown-checkbox {
    font-size: 0;
    margin-right: 5px;
}

.@{table-prefix-cls}-collapse-column {
    text-align: center;
}

.@{table-prefix-cls}-collapse-button {
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.3s ease;

    &.@{table-prefix-cls}-collapse-expand {
        transform: rotate(180deg);
    }
}

.@{table-prefix-cls}-expand-row>td {
    padding: 0 !important;
}

.@{table-prefix-cls}-empty-placement {
    padding: 10px;
    min-height: 120px;
    text-align: center;
}
.@{table-prefix-cls}-filter-dropdown {
    // position: absolute;
    box-sizing: border-box;
    font-size: @table-font-size;
    line-height: 1.5;
    list-style: none;
    border-radius: @table-dropdown-border-radius;
    z-index: @zindex-range-3;
    box-shadow: 
        0 3px 6px -4px #0000001f,
        0 6px 16px #00000014,
        0 9px 28px 8px #0000000d;
    &-box {
        min-width: 120px;
        padding: @P 0;
        .@{acud-prefix}-dropdown-menu-item-multiple {
            padding: 0;
        }
        .@{acud-prefix}-checkbox-wrapper {
            display: flex;
            padding-left: @P * 3;
            padding-right: @P * 3;
        }
        .@{table-prefix-cls}-filter-dropdown-tree {
            .@{acud-prefix}-checkbox-wrapper {
                padding-left: 0;
            }
        }
    }
    &-menu {
        max-height: 264px;
        overflow-x: hidden;
        border: 0;
        box-shadow: none;
        position: relative;
        margin: 0;
        padding: 4px 0;
        text-align: left;
        list-style-type: none;
        border-radius: @table-dropdown-border-radius;
        outline: none;
        &-item {
            clear: both;
            margin: 0;
            padding: 5px 12px;
            white-space: nowrap;
            cursor: pointer;
            transition: all .3s ease;
            position: relative;
            display: flex;
            align-items: center;
            list-style: none;
            .basic-config(@table-dropdown-tp, @table-dropdown-p);
            &-checked.@{acud-prefix}-dropdown-menu-item {
                color: ~'@{@{table-dropdown-tp}-click-color}';
            }
        }
    }
}