src/components/Table/Table.scss - main - githubmirror/ydb-embedded-ui

src/components/Table/Table.scss

68 строк2 KB

Артём Муфазалов

fix(SimplifiedPlan): fix row overflow in Firefox (#3684)

24 мар 2026, 19:58

24 мар 2026, 19:58f916398

@use '../../styles/mixins.scss';

.ydb-table {
    $block: &;
    --ydb-table-row-height: 40px;
    --ydb-table-head-cell-height: 40px;
    --ydb-table-cell-height: 40px;

    &__table-header-content {
        display: inline-flex;
        align-items: center;

        width: 100%;
        height: 100%;
        padding: var(--g-spacing-1) var(--g-spacing-2);

        border-bottom: 1px solid var(--g-color-line-generic);
    }
    &__table {
        table-layout: fixed;
        border-spacing: 0px;
        border-collapse: collapse;
        tr {
            &:hover {
                background-color: var(--g-color-base-simple-hover) !important;
            }
        }
        tr:nth-of-type(2n + 1) {
            background-color: var(--g-color-base-generic-ultralight);
        }
    }
    &__row {
        // Ensure row height even when cell height is different.
        // Cell could be bigger than row, this height should be considered as `min-height`
        height: var(--ydb-table-row-height) !important;
    }
    &__table_width_max {
        width: 100%;
    }
    &__table-header-cell {
        height: var(--ydb-table-head-cell-height) !important;
        padding: 0;

        text-align: left;
        vertical-align: middle;

        background-color: var(--g-color-base-background);
        @include mixins.text-subheader-2();
        :is(&_align_right) {
            #{$block}__table-header-content {
                justify-content: flex-end;

                text-align: right;
            }
        }
    }
    &__table-cell {
        height: var(--ydb-table-cell-height) !important;
        padding: 0;
        @include mixins.text-body-2();
        &_align_right {
            text-align: right !important;
        }
        &_vertical-align_top {
            vertical-align: top !important;
        }
    }
}