alfresco-ng2-components/lib/process-services/src/lib/form/widgets/dynamic-table/dynamic-table.widget.scss

/* stylelint-disable no-descending-specificity */
@use '../../../../../../core/src/lib/styles/mixins' as mixins;

$dynamic-table-font-size: var(--theme-body-1-font-size) !default;
$dynamic-table-header-font-size: var(--theme-caption-font-size) !default;
$dynamic-table-header-sort-icon-size: 16px !default;
$dynamic-table-hover-color: #eee !default;
$dynamic-table-selection-color: #e0f7fa !default;
$dynamic-table-row-height: 56px !default;
$dynamic-table-column-spacing: 36px !default;
$dynamic-table-column-padding: 18px !default;
$dynamic-table-card-padding: 24px !default;
$dynamic-table-cell-top: 12px !default;
$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255);

dynamic-table-widget .adf-label {
    width: auto;
    height: auto;
}

.adf {
    &-dynamic-table-scrolling {
        overflow: auto;
    }

    &-dynamic-table {
        width: 100%;
        position: relative;
        border: 1px solid var(--adf-theme-foreground-text-color-007);
        white-space: nowrap;
        font-size: $dynamic-table-font-size;

        /* Firefox fixes */
        border-collapse: unset;
        border-spacing: 0;

        thead {
            padding-bottom: 3px;
        }

        tbody {
            tr {
                position: relative;
                height: $dynamic-table-row-height;

                @include mixins.material-animation-default(0.28s);

                transition-property: background-color;

                &:hover {
                    background-color: $dynamic-table-hover-color;
                }

                &.adf-is-selected,
                &.adf-is-selected:hover {
                    background-color: $dynamic-table-selection-color;
                }

                &:focus {
                    outline-offset: -1px;
                    outline: rgb(68, 138, 255) solid 1px;
                }
            }
        }

        td,
        th {
            padding: 0 $dynamic-table-column-padding 12px;
            text-align: center;

            &:first-of-type {
                padding-left: 24px;
            }

            &:last-of-type {
                padding-right: 24px;
            }
        }

        td {
            color: var(--adf-theme-foreground-text-color);
            position: relative;
            vertical-align: middle;
            height: $dynamic-table-row-height;
            border-top: 1px solid var(--adf-theme-foreground-text-color-007);
            border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
            padding-top: $dynamic-table-cell-top;
            box-sizing: border-box;

            @include mixins.adf-no-select;

            cursor: default;
        }

        th {
            @include mixins.adf-no-select;

            cursor: pointer;
            position: relative;
            vertical-align: bottom;
            text-overflow: ellipsis;
            font-weight: bold;
            line-height: 24px;
            letter-spacing: 0;
            height: $dynamic-table-row-height;
            font-size: $dynamic-table-header-font-size;
            color: var(--adf-theme-foreground-text-color);
            padding-bottom: 8px;
            box-sizing: border-box;

            &.adf-sortable {
                @include mixins.adf-no-select;

                &:hover {
                    cursor: pointer;
                }
            }

            &.adf-dynamic-table__header--sorted-asc,
            &.adf-dynamic-table__header--sorted-desc {
                color: var(--adf-theme-foreground-text-color);

                &::before {
                    @include mixins.typo-icon;

                    font-size: $dynamic-table-header-sort-icon-size;
                    content: '\e5d8';
                    margin-right: 5px;
                    vertical-align: sub;
                }

                &:hover {
                    cursor: pointer;

                    &::before {
                        color: var(--adf-theme-foreground-disabled-text-color);
                    }
                }
            }

            &.adf-dynamic-table__header--sorted-desc::before {
                content: '\e5db';
            }
        }

        .adf-dynamic-table-cell {
            text-align: left;
            cursor: default;

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

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

            &--image {
                text-align: left;

                img {
                    width: 24px;
                    height: 24px;
                }
            }
        }

        .adf-full-width {
            width: 100%;
        }
    }
}