yyzone/src/assets/styles/components/private-table.less

yyzone vue components and utils

@prefixPrivateTableCls: ~"@{yy-css-prefix}private-table";
@prefixTableSelectItemCls: ~"@{prefixPrivateTableCls}-filter-select-item";

.@{prefixPrivateTableCls} {
    &-frame {
        height: 100%;
        display: flex;
        flex-direction: column;
        &-header, &-footer {
            flex-shrink: 0;
        }

        &-body {
            flex: 1;
            // display: flex;
            min-height: 0;
            position: relative;
            &-left, &-right {
                // flex-shrink: 0;
                z-index: 1;
                position: absolute;
                top: 0;
                height: 100%;
            }
            &-left {
                left: 0;
            }
            &-right {
                right: 0;
            }
            &-main {
                display: flex;
                flex-direction: column;
                min-width: 0;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                .ps__rail-y {
                    z-index: 2;
                }
                // &.right-fixed {
                //     .ps__rail-y {
                //         display: none;
                //     }
                // }
            }
        }
    }
    &-body {
        flex: 1;
        &.scroll-content-horizonal {
            height: auto;
        }
    }

    &-resize-proxy {
        position: absolute;
        left: 200px;
        top: 0;
        bottom: 0;
        width: 0;
        border-left: 1px solid darken(@yy-table-border, 5%);
        z-index: 10;
    }
    
    &-filter-popper {
        min-width: 220px;
        &-foot {
            text-align: right;
        }
    }

    &-wrapper {
        position: relative;
        border: 1px solid @yy-table-border;
        border-bottom: 0;
        border-right: 0;
        border-top-color: @yy-table-thead-top-border;
    }

    width: inherit;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    color: @yy-text-primary-color;
    font-size: @yy-font-size-small;
    background-color: @yy-background-component;

    box-sizing: border-box;
    //position: relative;

    &-hide {
        opacity: 0;
    }

    &:before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: @yy-table-border;
        z-index: 1;
    }

    &:after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: @yy-table-border;
        z-index: 3;
    }

    &-title,
    &-footer {
        height: 35px;
        line-height: 35px;
        border-bottom: 1px solid @yy-table-border;
    }

    &-footer {
        border-bottom: none;
    }

    &-header {
        overflow: hidden;
        flex-shrink: 0;
    }

    &-overflowX {
        overflow-x: scroll;
    }

    &-overflowY {
        overflow-y: scroll;
    }

    &-tip {
        overflow-x: auto;
        overflow-y: hidden;
    }

    &-with-fixed-top&-with-footer {
        .@{prefixPrivateTableCls}-footer {
            border-top: 1px solid @yy-table-border;
        }

        tbody tr:last-child td {
            border-bottom: none;
        }
    }

    th,
    td {
        min-width: 0;
        height: 35px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        vertical-align: middle;
        //position: relative;
        border-bottom: 1px solid @yy-table-border;
    }

    th {
        height: 35px;
        white-space: nowrap;
        overflow: hidden;
        background-color: @yy-table-thead-bg;
        border-bottom: 1px solid @yy-table-thead-bottom-border;
    }

    td {
        background-color: @yy-background-component;
        transition: background-color @yy-transition-time @yy-ease-in-out;
    }

    th&-column,
    td&-column {
        &-left {
            text-align: left;
        }

        &-center {
            text-align: center;
        }

        &-right {
            text-align: right;
        }
    }

    & table {
        //width: 100%;
        table-layout: fixed;
    }

    &-border {

        th,
        td {
            border-right: 1px solid @yy-table-border;
        }
    }

    &-cell {
        padding-left: 16px;
        padding-right: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        box-sizing: border-box;

        &-ellipsis {
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &-tip {
            width: 100%;

            .yy-tip-rel {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        &-with-expand {
            height: 47px;
            line-height: 47px;
            padding: 0;
            text-align: center;
        }

        &-expand {
            cursor: pointer;
            transition: transform @yy-transition-time @yy-ease-in-out;

            i {
                font-size: @yy-font-size-base;
            }

            &-expanded {
                transform: rotate(90deg);
            }
        }

        &-sort {
            cursor: pointer;
            user-select: none;

        }

        &-with-selection {
            .@{prefixCheckboxCls}-wrapper {
                margin-right: 0;
            }
        }
    }

    &-hidden {
        visibility: hidden;
    }

    th &-cell {
        display: inline-block;
        //position: relative;
        word-wrap: normal;
        vertical-align: middle;
        width: 100%;
        text-align: center;
        .yy-tip {
            float: right;
        }
    }

    td&-expanded-cell {
        padding: 20px 50px;
        background: @yy-table-thead-bg;
    }

    &-stripe &-body,
    &-stripe &-fixed-body {
        tr:nth-child(2n) {
            td {
                background-color: @yy-table-td-stripe-bg;
            }
        }

        // #1380
        tr.@{prefixPrivateTableCls}-row-hover {
            td {
                background-color: @yy-table-td-hover-bg;
            }
        }
    }

    tr&-row-hover {
        td {
            background-color: @yy-table-td-hover-bg;
        }
    }

    &-large {
        font-size: @yy-font-size-base;

        th {
            height: 40px;
        }

        td {
            height: 40px;
        }

        &-title,
        &-footer {
            height: 40px;
            line-height: 40px;
        }

        .@{prefixPrivateTableCls}-cell-with-expand {
            height: 39px;
            line-height: 39px;

            i {
                font-size: @yy-font-size-base+2;
            }
        }
    }

    &-small {
        th {
            height: 30px;
        }

        td {
            height: 30px;
        }

        &-title,
        &-footer {
            height: 30px;
            line-height: 30px;
        }

        .@{prefixPrivateTableCls}-cell-with-expand {
            height: 29px;
            line-height: 29px;
        }
    }

    &-row-highlight,
    tr&-row-highlight&-row-hover,
    &-stripe &-body tr&-row-highlight:nth-child(2n),
    &-stripe &-fixed-body tr&-row-highlight:nth-child(2n) {
        td {
            background-color: @yy-table-td-highlight-bg;
        }
    }

    &-fixed,
    &-fixed-right {
        // position: absolute;
        // top: 0;
        // left: 0;
        box-shadow: 2px 0 8px -2px rgba(0, 0, 0, 0.12);
        display: flex;
        height: 100%;
        flex-direction: column;
        &-header {
            flex-shrink: 0;
        }
        &-body {
            flex: 1;
            min-height: 0;
        }
        &::before {
            content: '';
            width: 100%;
            height: 1px;
            background-color: @yy-table-border;;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 4;
        }
    }

    &-fixed-right {
        // top: 0;
        // left: auto;
        // right: 0;
        box-shadow: -2px 0 8px -2px rgba(0, 0, 0, 0.12);
    }

    &-fixed-right-header {
        // position: absolute;
        // top: -1px;
        // right: 0;
        background-color: @yy-table-thead-bg;
        border-top: 1px solid @yy-table-border;
        border-bottom: 1px solid @yy-table-border;
    }

    &-fixed-header {
        overflow: hidden;
    }

    &-fixed-body {
        overflow: hidden;
        position: relative;
        z-index: 3;
    }

    &-fixed-shadow {
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        // box-shadow: @shadow-right;
        overflow: hidden;
        z-index: 1;
    }

    &-sort {
        display: inline-block;
        width: 14px;
        height: 12px;
        margin-top: -1px;
        vertical-align: middle;
        overflow: hidden;
        cursor: pointer;
        position: relative;

        i {
            display: block;
            height: 6px;
            line-height: 6px;
            overflow: hidden;
            position: absolute;
            color: #D0D0D0;
            transition: color @yy-transition-time @yy-ease-in-out;
            font-size: @yy-font-size-large;

            &:hover{
                color: #aaaaaa;
            }

            &.on{
                color: #aaaaaa;
            }

            &:first-child{
                top: 0;
            }
            &:last-child{
                bottom: 0;
            }
        }
        cursor: pointer;
    }

    &-filter {
        display: inline-block;
        cursor: pointer;
        position: relative;
        vertical-align: middle;

        i {
            color: @yy-btn-disable-color;
            transition: color @yy-transition-time @yy-ease-in-out;

            &:hover {
                color: #aaaaaa;
            }

            &.on {
                color: #aaaaaa;
            }
        }

        &-list {
            padding: 8px 0 0;

            &-item {
                padding: 0 12px 8px;

                .yy-checkbox-wrapper+.yy-checkbox-wrapper {
                    margin: 0;
                }

                label {
                    display: block;

                    &>span {
                        margin-right: 4px;
                    }
                }
            }

            ul {
                padding-bottom: 8px;
            }

            // .select-item(@prefixPrivateTableCls, @prefixTableSelectItemCls);
        }

        &-footer {
            padding: 4px;
            border-top: 1px solid @yy-table-border;
            overflow: hidden;

            button:first-child {
                float: left;
            }

            button:last-child {
                float: right;
            }
        }
    }

    &-tip {
        table {
            width: 100%;

            td {
                text-align: center;
            }
        }
    }

    &-expanded-hidden {
        visibility: hidden;
    }
}

.yy-table-popper {
    min-width: 0;
    text-align: left;

    .yy-poptip-body {
        padding: 0;
    }
}