lowcode-engine/packages/material-parser/test/fixtures/fusion-next-component/es/table/main.scss

@charset "UTF-8";
@import "../core/index-noreset.scss";
@import "scss/variable";
@import "scss/mixin";
/* put your code here */
#{$table-prefix} {
    @include box-sizing;
    position: relative;

    &#{$table-prefix}-small {
        th {
            #{$table-prefix}-cell-wrapper {
                padding: $table-size-s-header-padding-top $table-size-s-header-padding-left;
            }
        }

        td {
            #{$table-prefix}-cell-wrapper {
                padding: $table-size-s-cell-padding-top $table-size-s-cell-padding-left;
            }
        }

        #{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
            padding: $s-2 $s-2;
        }
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        background: $table-row-bg;
        tr:first-child td {
            border-top-width: 0;
        }
    }
    th {
        padding: 0;
        background: $table-th-bg;
        color: $table-th-color;
        text-align: left;
        font-weight: $table-th-font-weight;
        border: $table-normal-border-width $table-normal-border-style $table-normal-border-color;

        #{$table-prefix}-cell-wrapper {
            padding: $table-header-padding-top $table-header-padding-left;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
        }

        &#{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
            padding: $s-3 $s-4;
        }
    }
    &-affix {
        z-index: 1;
        overflow: hidden;
    }
    &-header-resizable {
        position: relative;
        #{$table-prefix}-resize-handler {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: transparent;
            cursor: ew-resize;
        }
    }
    td {
        padding: 0;
        border: $table-normal-border-width $table-normal-border-style $table-normal-border-color;

        #{$table-prefix}-cell-wrapper {
            padding: $table-cell-padding-top $table-cell-padding-left;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            .#{$css-prefix}icon-arrow-down.#{$css-prefix}table-tree-arrow,
            .#{$css-prefix}icon-arrow-right.#{$css-prefix}table-tree-arrow,
            #{$table-prefix}-tree-placeholder {
                margin-right: $table-header-icon-margin-left;
                outline: 0;
                cursor: pointer;
            }
            .#{$css-prefix}icon-arrow-right.#{$css-prefix}table-tree-arrow {
                @include icon-size($table-tree-expanded-icon-size);
                &::before {
                    content: $table-tree-fold-icon-content;
                }
            }

            .#{$css-prefix}icon-arrow-down.#{$css-prefix}table-tree-arrow {
                @include icon-size($table-tree-expanded-icon-size);
                &::before {
                    content: $table-tree-unfold-icon-content;
                }
            }
        }
        &#{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
            padding: $s-3 $s-4;
        }
    }

    #{$table-prefix}-expanded,
    #{$table-prefix}-selection {
        #{$table-prefix}-cell-wrapper {
            overflow: visible;
        }
    }
    &.no-header table tr:first-child td {
        border-top-width: 1px;
    }
    &.only-bottom-border {
        border-width: 0;
        th {
            border-width: 0 0 $table-normal-border-width 0;
        }
        td {
            border-width: 0 0 $table-normal-border-width 0;
        }
        #{$table-prefix}-expanded-row {
            th {
                border-width: 0 0 $table-normal-border-width 0;
            }
            td {
                border-width: 0 0 $table-normal-border-width 0;
            }
        }

        table tr td:first-child,
        table tr th:first-child {
            border-left-width: 0;
        }
    }
    &-loading {
        display: block;
    }
    &.zebra {
        tr:nth-child(odd) td {
            background: $table-td-normal;
        }
        tr:nth-child(even) td {
            background: $table-td-gray;
        }
        #{$table-prefix}-row.hovered td {
            background: $table-row-hover-bg;
            color: $table-row-hover-color;
        }
        #{$table-prefix}-cell.hovered {
            background: $table-row-hover-bg;
            color: $table-row-hover-color;
        }
        #{$table-prefix}-row.selected td {
            background: $table-row-selected-bg;
            color: $table-row-selected-color;
        }
    }
    &-empty {
        color: $table-empty-color;
        padding: $table-empty-padding 0;
        text-align: center;
    }
    &-expanded-row {
        td {
            border-width: 0;
            &:first-child {
                border-left-width: 1px;
            }
            &:last-child {
                border-right-width: 1px;
            }
        }
        &:last-child td {
            border-bottom-width: 1px;
        }
        #{$table-prefix} .last td {
            border-bottom-width: 0;
        }
    }
    &-filter-footer {
        margin: 10px 10px 0;
        button {
            margin-right: 5px;
        }
    }
    &-row {
        transition: all $motion-duration-immediately $motion-linear;
        background: $table-row-bg;
        color: $table-row-color;

        &.hidden {
            display: none;
        }
        &.hovered {
            background: $table-row-hover-bg;
            color: $table-row-hover-color;
        }
        &.selected {
            background: $table-row-selected-bg;
            color: $table-row-selected-color;
        }
    }
    &-cell {
        &.hovered {
            background: $table-row-hover-bg;
            color: $table-row-hover-color;
        }
    }
    &-tree-placeholder {
        display: inline-block;
        width: 12px;
    }
}

.last {
    #{$table-prefix}-expanded-row {
        td {
            border-bottom-width: 1px;
        }
    }
}

#{$table-prefix}-body,
#{$table-prefix}-header {
    overflow: auto;
    font-size: $table-th-font-size;
}

#{$table-prefix}-header {
    margin-bottom: -20px;
    padding-bottom: 20px;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}

#{$table-prefix}-body {
    font-size: $table-body-font-size;
    position: relative;
}

#{$table-prefix}-fixed {
    border: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
    table {
        table-layout: fixed;
    }
    #{$table-prefix}-header {
        background: $table-th-bg;
    }
    @include table-border(0);
    &#{$table-prefix}-group {
        @include table-border($table-normal-border-width);
    }
}

#{$table-prefix}-lock {
    #{$table-prefix}-body {
        overflow-x: auto;
        overflow-y: visible;
    }
}

#{$table-prefix}-group {
    border-width: 0;
    #{$table-prefix}-body {
        margin-top: $table-group-split;
        table {
            margin-bottom: $table-group-split;
            tr:first-child td {
                border-top-width: 1px;
            }
        }
    }
    #{$table-prefix}-group-header {
        td {
            background: $table-group-th-bg;
            color: $table-group-th-color;
        }
    }
    #{$table-prefix}-group-footer {
        td {
            background: $table-group-footer-bg;
            color: $table-group-footer-color;
        }
    }
    #{$table-prefix}-row.hovered,
    #{$table-prefix}-row.selected {
        background: $table-row-bg;
        color: $table-row-color;
    }
}

#{$table-prefix}-lock {
    position: relative;
    table {
        table-layout: fixed;
    }
}

#{$table-prefix}-header-inner {
    overflow: unset;
}

#{$table-prefix}-wrap-empty {
    #{$table-prefix}-lock-left,
    #{$table-prefix}-lock-right {
        td {
            border: none;
        }
        #{$table-prefix}-empty {
            display: none;
        }
    }
    > #{$table-prefix}-inner > #{$table-prefix}-body > table {
        table-layout: auto;
    }
}

#{$table-prefix}-lock-left,
#{$table-prefix}-lock-right {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border: 0;
    transition: box-shadow .3s ease;
    overflow: hidden;
    table {
        width: auto;
    }
    #{$table-prefix}-body {
        overflow-y: scroll;
        overflow-x: hidden;
        margin-right: -20px;
        padding-right: 0;
    }
}

#{$table-prefix}-lock-right {
    right: 0;
    left: auto;
    table tr td:first-child,
    table tr th:first-child {
        border-left-width: 1px;
    }
    &.shadow {
        box-shadow: -2px 0 3px rgba(0, 0, 0, .12);
    }
}

#{$table-prefix}-lock-left {
    &.shadow {
        box-shadow: 2px 0 3px rgba(0, 0, 0, .12);
    }
}

#{$table-prefix}-filter {
    line-height: 1;
}

#{$table-prefix}-sort {
    position: relative;
    width: 16px;
    display: inline-block;
    line-height: 1;
    &:focus {
        outline: 0;
    }
    & > a::before {
        content: ' ';
        display: inline-block;
        vertical-align: middle;
    }
    .#{$css-prefix}icon {
        position: absolute;
        left: -2px;
        @include icon-size($table-sort-icon-size);
        color: $table-sort-color;
    }
    .current .#{$css-prefix}icon {
        color: $table-sort-color-current;
    }
    .#{$css-prefix}icon-ascending {
        left: 2px;
    }
}

#{$table-prefix}-filter {
    cursor: pointer;
    width: 20px;
    display: inline-block;
    &:focus {
        outline: 0;
    }
    .#{$css-prefix}icon {
        @include icon-size($table-filter-icon-size);
        color: $table-sort-color;
    }
}

#{$table-prefix}-header-icon {
    margin-left: $table-header-icon-margin-left;
}

#{$table-prefix}-expanded-ctrl {
    cursor: pointer;
    &:focus {
        outline: 0;
    }
    &.disabled {
        color: $table-expanded-ctrl-disabled-color;
    }

    .#{$css-prefix}table-expand-unfold {
        @include icon-size($table-expanded-icon-size);
        &::before {
            content: $table-expand-unfold-icon-content;
        }
    }

    .#{$css-prefix}table-expand-fold {
        @include icon-size($table-expanded-icon-size);
        &::before {
            content: $table-expand-fold-icon-content;
        }
    }
}

@import "./rtl.scss";