table.scss 6.48 KB
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at

//     http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.table.bold-key>tbody>tr>td:first-child {
    font-weight: 600;
}

tr.empty {
    td {
        display: table-cell;
        text-align: center;
    }
}


.stat-table {

    tbody,
    thead {
        >tr {

            td:nth-child(2),
            th:nth-child(2) {
                text-align: right;
            }
        }
    }
}

.entity-detail-table,
.type-node-details,
.relationship-detail-table {
    position: relative;

    .hide-empty-value {
        .hide-row {
            display: none;
        }
    }

    .entity-relationship-table-toggle,
    .entity-detail-table-toggle {
        position: absolute;
        right: 0;
        top: 7px;
    }

    table {

        th:nth-child(1),
        td:nth-child(1) {
            width: 20%;
        }
    }
}

.type-node-details {
    .header {
        .pretty.p-switch .state:before {
            border: 1px solid white;
        }

        .pretty.p-switch .state label:after {
            background-color: white !important;
        }

        .pretty.p-switch.p-fill input:checked~.state label:after {
            background-color: #4a90e2 !important;
        }

        .pretty.p-switch.p-fill input:checked~.state.p-primary:before {
            background-color: white !important;
        }
    }
}

.backgrid {
    td {
        white-space: normal;
    }

    .select-all-header-cell,
    .select-row-cell {
        width: 42px;
        text-overflow: clip;
    }

    thead {
        th {
            button {
                padding-right: 11px;
            }
        }
    }

    .sortable:not(.descending):not(.ascending) {
        .sort-caret {
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-size: 11px;

            &:before {
                content: "\f0dc";
            }
        }
    }

    .debuggging-table-header {
        padding-right: 0px !important;
        button{
            float: right;
        }
    }
}

.backgrid-paginator ul {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border: 1px $color_keppel_approx solid;
    margin: 0px;
    float: right;
    border-radius: 4px;
    overflow: hidden;

    >.active>span,
    >.active>a,
    >.active>a:hover {
        background: none;
        color: $color_keppel_approx;
        background: none;
        color: #37bb9b;
        font-weight: 600;
        font-family: sans-serif;
    }

    >li>a,
    >li>span,
    >li>button {
        width: 30px;
        height: 30px;
        padding: 0;
        line-height: 30px;
        text-decoration: none;
        border: none;
        float: left;
        background: $transparent;
        color: $color_keppel_approx;
        @include ellipsis();

        i {
            font-weight: bold;
        }

        &:hover {
            color: $white;
            background: $color_keppel_approx
        }
    }

    >.disabled>span,
    >.disabled>a,
    >li>button[disabled] {
        color: $color_mountain_mist_approx;

        &:hover {
            cursor: not-allowed;
            color: $white;
            background: $color_jungle_green_light !important;
        }
    }
}

.toggleList.semi-collapsed div:nth-child(n+2) {
    display: none;

}

.table-quickMenu {
    border: thin $lightGrey solid;
    border-collapse: separate;
    border-radius: 6px;
    box-shadow: 0px 0px 4px #d8d8d8;
    overflow: scroll !important;
    max-height: 500px;
    width: 100%;

    .resizeHandler {
        &.grid-draggable {
            background-color: $color_jungle_green_approx !important;
        }

        &:hover {
            border-left: 1px solid #d2d2d2;
        }
    }

    >thead>tr {
        background: #eeeeee;

        &>th {
            border-width: thin;
            // border-color: $color_jungle_green_approx;
            border-bottom-style: solid;
            box-shadow: none;
            padding: 6px 15px !important;
            background-color: transparent;
            text-align: left;
            font-weight: 800;
            border-top: 0;
            font-size: 14px;
            letter-spacing: 0.25px;
            color: #6a6a6a;

            &.no-capitalize {
                text-transform: none !important;
            }
        }

        >td {
            border-color: $color_gallery_approx;
            color: #333333;
            font-weight: 100;
            padding: 9px 15px;
        }
    }

    >tbody>tr>td {
        &.select-row-cell {
            text-align: center;
        }
    }

    .expandable {
        .expandable-content {
            max-width: none;
            background: #f8f8f8;

            div {

                table {
                    width: 100%;

                    td {

                        display: table-cell;
                    }

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

td {

    div.scroll-y,
    pre.scroll-y {
        max-height: 200px;
        overflow-y: auto;
        word-break: break-word;
    }

    &.searchTableName {
        min-width: 150px;

        &:hover {
            img {
                transform: scale(1.5);
                transform-origin: 100% 50%;
                transition: transform 0.2s;
                outline-color: #f5f5f5;
            }
        }

        a {
            max-width: calc(100% - 36px);
            overflow: hidden;
            float: left;
            text-overflow: ellipsis;
        }

        img {
            height: 20px;
            margin: 0px 5px;
            float: left;
        }
    }
}

.auditStatusContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    &>div {
        flex-grow: 1;
    }
}