@fesjs/fes-design/es/table/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../scrollbar/style/mixin.less';
@import './mixin.less';

@table-prefix: ~'@{cls-prefix}-table';
@table-border-color: var(--f-border-color-split);
@table-border: var(--f-border-width-base) var(--f-border-style-base)
    @table-border-color;
@column-shadow-right: 2px 2px var(--f-shadow-radius-sm) -1px var(--f-shadow-color-sm);
@column-shadow-left: -1px 2px var(--f-shadow-radius-sm) var(--f-shadow-color-sm);
@scrollbar-shadow-size: 4px;
@scrollbar-shadow-z-index: 3; // 与 bodyTable, virtualTable 中的 z-index 保持一致

.@{table-prefix} {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    .default();
    .text();
    overflow: hidden;
    background-color: var(--f-white);

    &,
    * {
        box-sizing: border-box;
    }

    .hidden-columns {
        display: none;
    }

    #wrapper-inner-shadow-left() {
        .shadow(@scrollbar-shadow-size, 'right');
        z-index: @scrollbar-shadow-z-index;
    }
    #wrapper-inner-shadow-right() {
        .shadow(@scrollbar-shadow-size, 'left');
        z-index: @scrollbar-shadow-z-index;
    }

    & &-header-wrapper,
    & &-body-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        scrollbar-width: none;

        &.is-scrolling-x-left,
        &.is-scrolling-x-middle {
            .@{table-prefix}-fixed-right.is-first {
                box-shadow: @column-shadow-left;
            }
        }

        &.is-scrolling-x-right,
        &.is-scrolling-x-middle {
            .@{table-prefix}-fixed-left.is-last {
                box-shadow: @column-shadow-right;
            }
        }

        &::-webkit-scrollbar {
            display: none;
        }
    }

    & &-body-wrapper {
        &.is-scrolling-x-left,
        &.is-scrolling-x-middle {
            &.columns-fixed-left::after {
                #wrapper-inner-shadow-left();
            }
        }

        &.is-scrolling-x-right,
        &.is-scrolling-x-middle {
            &.columns-fixed-right::after {
                #wrapper-inner-shadow-right();
            }
        }
    }

    // shadow 为 position: absolute，依赖 table 的 position: relative
    & &-header-shadow-left {
        #wrapper-inner-shadow-left();
    }
    & &-header-shadow-right {
        #wrapper-inner-shadow-right();
    }

    & &-no-data {
        text-align: center;
    }

    & &-header,
    & &-body {
        display: table;
        margin: 0;
        padding: 0;
        table-layout: fixed;
        border: 0;
        border-collapse: separate;
        border-spacing: 0;

        .@{table-prefix}-row {
            box-sizing: border-box;
            border: none;

            &.is-opened {
                .@{table-prefix}-expand-icon {
                    transform: rotate(0);
                }

                & + .@{table-prefix}-tr {
                    .@{table-prefix}-td {
                        background-color: var(--f-component-bg-color);
                    }
                }
            }
        }

        .@{table-prefix}-th,
        .@{table-prefix}-td {
            position: relative;
            min-width: 0;
            margin: 0;
            padding: 0;
            background-color: var(--f-white);
            border: none;

            &.@{table-prefix}-fixed-left {
                position: sticky;
                left: 0;
                z-index: 2;
            }

            &.@{table-prefix}-fixed-right {
                position: sticky;
                right: 0;
                z-index: 2;
            }
        }

        .@{table-prefix}-th {
            font-weight: @font-weight-medium;
            background-color: var(--f-component-bg-color);
        }

        .@{table-prefix}-td {
            background-color: var(--f-white);

            &.@{table-prefix}-cell {
                overflow: hidden;
                white-space: normal;
                word-break: break-all;
            }
        }
    }

    & &-body {
        &.is-hoverable {
            .@{table-prefix}-row {
                &:hover {
                    .@{table-prefix}-td {
                        background-color: var(--f-hover-color-light);
                    }
                }
            }
        }
        .@{table-prefix}-row {
            &.is-striped {
                .@{table-prefix}-td {
                    background-color: var(--f-component-bg-color);
                }
            }
        }
    }

    &.is-bordered {
        border: @table-border;
    }

    &.is-horizontal-line {
        .@{table-prefix}-header,
        .@{table-prefix}-body {
            .@{table-prefix}-td,
            .@{table-prefix}-th {
                border-bottom: @table-border;
            }
            .@{table-prefix}-row {
                &.is-opened {
                    .@{table-prefix}-td {
                        border-bottom: none;
                    }
                }
            }
        }
        .@{table-prefix}-no-data {
            border-bottom: @table-border;
        }
        &.is-bordered {
            .@{table-prefix}-header,
            .@{table-prefix}-body {
                tbody .@{table-prefix}-row {
                    .@{table-prefix}-td.is-last-row {
                        border-bottom: none;
                    }
                }
            }
            .@{table-prefix}-no-data {
                border-bottom: none;
            }
        }
    }

    &.is-vertical-line {
        .@{table-prefix}-header,
        .@{table-prefix}-body {
            .@{table-prefix}-th,
            .@{table-prefix}-td {
                border-right: @table-border;
            }
            .@{table-prefix}-row {
                .@{table-prefix}-td.is-last-column {
                    border-right: none;
                }
                .@{table-prefix}-th {
                    &.@{table-prefix}-th-last {
                        border-right: none;
                    }
                }
            }
        }
    }

    &.is-size-middle {
        .@{table-prefix}-cell {
            padding: @padding-md;

            &.@{table-prefix}-expanded-cell {
                padding: 0;
            }
        }
        
        .@{table-prefix}-no-data {
            padding: @padding-md;
        }
    }

    &.is-size-small {
        .@{table-prefix}-cell {
            padding: @padding-xs;

            &.@{table-prefix}-expanded-cell {
                padding: 0;
            }
        }

        .@{table-prefix}-no-data {
            padding: @padding-xs;
        }
    }

    &-expand-icon {
        color: var(--f-text-color);
        font-size: @font-size-head;
        transform: rotate(-90deg);
        cursor: pointer;
        transition: all @animation-duration-base @ease-in-out;
        &:hover {
            color: var(--f-primary-color);
        }
    }

    &-center {
        display: flex;
        align-items: center;
    }

    & &-sorter {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: -0.2em;
        margin-left: @padding-sm;
        vertical-align: middle;

        .@{table-prefix}-sorter-up {
            width: 0;
            height: 0;
            border-right: 4px solid transparent;
            border-bottom: 4px solid var(--f-disabled-color-base);
            border-left: 4px solid transparent;

            &.is-active {
                border-bottom-color: var(--f-primary-color);
            }
        }

        .@{table-prefix}-sorter-down {
            width: 0;
            height: 0;
            margin-top: calc(@padding-xs / 4);
            border-top: 4px solid var(--f-disabled-color-base);
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;

            &.is-active {
                border-top-color: var(--f-primary-color);
            }
        }
    }

    & &-th-sortable {
        cursor: pointer;
    }

    & &-resize-button {
        position: absolute;
        top: 0;
        right: 4px;
        bottom: 0;
        width: 8px;
        cursor: col-resize;
        user-select: none;
        &::after {
            position: absolute;
            top: 50%;
            bottom: 0;
            left: 4px;
            z-index: 1;
            width: 2px;
            height: 50%;
            background-color: @table-border-color;
            transform: translate(-50%, -50%);
            transition: background-color @animation-duration-base @ease-in-out;
            content: '';
        }
        &.is-active {
            &::after {
                background-color: var(--f-primary-color);
            }
        }
    }

    &.is-vertical-line {
        .@{table-prefix}-resize-button {
            right: -4px;
            &::after {
                background-color: none;
            }
            &.is-active {
                &::after {
                    background-color: var(--f-primary-color);
                }
            }
        }
    }
}