components.Table.style.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
.table-container {
    overflow: auto;
}

.n2o-advanced-table .cell {
    vertical-align: inherit;
    padding: 0.3rem var(--padding-aside-cell);
}

.table-container[data-text-wrap="false"] table {
    table-layout: fixed;
}

.table-container[data-text-wrap="false"] .cell {
    white-space: nowrap;
}

.cell-content {
    .tooltip {
        .arrow {
            overflow: visible !important;
        }
    }
}

.table-container[data-text-wrap="false"] .cell .cell-content *,
.table-container[data-text-wrap="false"] .n2o-advanced-table-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-container[data-text-wrap="false"] .cell .cell-content .tooltip .tooltip-inner {
    white-space: break-spaces;
}

.table-container .n2o-advanced-table-filter-dropdown-buttons button {
    justify-content: center;
}

.n2o-advanced-table {
    --padding-aside-cell: 0.3rem;
    --padding-multiplier: 30px;

    .checkbox-cell {
        display: flex;
        overflow: visible !important;

        .custom-checkbox .custom-control-label {
            cursor: pointer;
        }
    }

    .cell[data-level] {
        padding-left: attr(--data-level px);

        &::before {
            content: attr(--data-level);
        }
    }

    .header {
        .cell {
            position: relative;

            .resizeTrigger {
                position: absolute;
                user-select: none;
                cursor: col-resize;
                visibility: hidden;
                top: 0;
                right: 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 10px 10px 0;
                border-color: transparent #263238 transparent transparent;

                &::before {
                    position: absolute;
                    right: -10px;
                    display: block;
                    content: '';
                    width: 30px;
                    height: 30px;
                    z-index: 1;
                }
            }
        }

        .cell[data-resizeble="true"]:hover {
            .resizeTrigger {
                visibility: visible;
            }
        }

        .cell-selection {
            width: 34px;
        }
    }

    .body {
        .table-row {
            &[data-focused="true"] {
                background-color: #ececec;
            }

            &[data-overlay-hovered="true"],
            &:hover {
                background-color: #dfdfdf;
            }

            &[data-has-click="true"] {
                cursor: pointer;
            }

            > .cell:first-of-type {
                padding-left: calc(var(--deep-level) * var(--padding-multiplier) + var(--padding-aside-cell));
            }
        }

        .cell-content {
            display: flex;
            align-items: center;
        }

        .cell-selection {
            width: 30px;
        }
    }

    .cell[align="right"] {
        .cell-content,
        .n2o-advanced-table-header-cell-content {
            justify-content: flex-end;
        }
    }

    .cell[align="center"] {
        .cell-content,
        .n2o-advanced-table-header-cell-content {
            justify-content: center;
        }
    }
}

.n2o-advanced-table-filter-btn {
    flex-shrink: 0;

    .n2o-advanced-table-filter-badge {
        padding: 0;
    }
}

.table-row-overlay {
    display: flex;
    position: absolute;
    justify-content: flex-end;
    height: 0;

    .toolbar-container {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        padding: 8px;
        background-color: #dfdfdf;
    }

    .toolbar-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 20px 20px 0;
        border-color: transparent #dfdfdf transparent transparent;
        transform: translateX(-100%);
    }
}