client/src/app/device/device-map/device-map.component.scss - master - tisit/FUXA_SCADA

client/src/app/device/device-map/device-map.component.scss
324 строки6 KB
Umberto Nocelli
Upgrade Angular from v16 to v17 (#2113)
08 янв 2026, 21:56
08 янв 2026, 21:56905235d
$main-backcolor: rgb(12, 101, 189);
$main-bordercolor: var(--mapBorderColor); //rgb(5, 65, 123);
$device-color: rgb(79, 86, 93);
$line-color: var(--mapBorderColor);
$flow-backcolor: rgb(218, 218, 218);
$flow-bordercolor: var(--mapBorderColor); //rgb(117, 117, 117);
$flowline-color: var(--mapBorderColor); //rgb(117, 117, 117);
$internal-backcolor: rgb(114, 120, 125);

:host {
    .page-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .container {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;  /* scroll solo interno */
        position: relative;
    }
    .main-device {
        position: absolute;
        text-align: center;
        background-color: $main-backcolor;
        color: white;
        border-style: solid;
        border-color: $main-bordercolor;
    }

    .node-device {
        position: absolute;
        background-color: $device-color;
        text-align: center;
        padding-top: 17px;
        border-style: solid;
        border-color: $line-color;

        mat-icon {
            color: white;
        }
    }

    .node-internal {
        position: absolute;
        background-color: $internal-backcolor;
        text-align: center;
        padding-top: 17px;
        border-style: solid;
        border-color: $line-color;

        mat-icon {
            color: white;
        }
    }

    .node-flow {
        position: absolute;
        background-color: $flow-backcolor;
        text-align: center;
        padding-top: 17px;
        border-style: solid;
        border-color: $flow-bordercolor;

        mat-icon {
            color: black;
        }
    }

    .main-line {
        position: absolute;
        background-color: $line-color;
    }

    .main-line-flow {
        position: absolute;
        background-color: $flowline-color;
    }

    .device-line {
        position: absolute;
        background-color: $line-color;
    }

    .flow-line {
        position: absolute;
        background-color: $flowline-color;
    }

    .connection-line {
        position: absolute;
        background-color: $line-color;
    }

    .table-wrapper {
        position: relative;
    }

    // mat-header-row {
    //     position: sticky;
    //     top: 0;
    //     z-index: 10;
    // }

    .paginator-wrapper {
        position: sticky;
        bottom: 0;
        z-index: 11;
        background: white;
        padding-top: 4px;
    }

    .device-header {
        display: block;
        font-size: 17px;
        padding-bottom: 7px;
        padding-top: 0px;
        min-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .device-pro {
        display: block;
        font-size: 12px;
        padding-top: 0px;
        min-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .device-pro-line {
        display: inline-block;
        font-size: 12px;
        padding-top: 5px;
    }

    .device-icon {
        position: absolute;
        cursor: pointer;

        mat-icon {
            overflow: visible;
        }
    }

    .device-edit {
        position: absolute;
        bottom: 0px;
        right: 0px;
        font-size: 17px;

        mat-icon {
            overflow: visible;
        }
    }

    .device-edit-disabled {
        color: rgb(136, 136, 136) !important;
        cursor: default;
    }

    .device-delete {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 17px;

        mat-icon {
            overflow: visible;
        }
    }

    .device-list {
        position: absolute;
        right: 30px;
        font-size: 24px;
        bottom: 0px;

        mat-icon {
            overflow: visible;
        }
    }

    .device-status {
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 10px;
        height: 10px;
        border-radius: 4px;
    }

    .map-container {
        display: flex;
        flex-direction: column;
        min-width: 300px;
        position: absolute;
        bottom: 0px;
        top: 1px;
        left: 0px;
        right: 0px;
    }

    .table-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .table-wrapper mat-table {
        flex: 1 1 auto;
        min-height: 0;
        display: block;
        overflow-y: auto;
    }

    .table-wrapper mat-header-row,
    .table-wrapper .mat-mdc-header-row {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .table-wrapper mat-paginator {
        flex: 0 0 auto;
    }

    .mat-table {
        overflow: auto;
        /* min-width: 1500px; */
        height: 100%;
    }

    .mat-row,
    .mat-mdc-row,
    .my-mat-row {
        min-height: 44px !important;
        height: 44px !important;
    }

    .mat-cell {
        font-size: 13px;
    }

    .mat-header-row {
        top: 0;
        position: sticky;
        z-index: 1;
    }

    .mat-header-cell {
        font-size: 15px;
    }

    .mat-column-select {
        // overflow: visible;
        flex: 0 0 120px;
    }

    .mat-column-name {
        flex: 1 1 160px;
    }

    .mat-column-type {
        flex: 0 0 150px;
    }

    .mat-column-polling {
        flex: 0 0 100px;
    }

    .mat-column-address {
        flex: 2 1 300px;
    }

    .mat-column-status {
        flex: 0 0 120px;
    }

    .mat-column-enabled {
        flex: 0 0 160px;
    }

    .mat-column-remove {
        flex: 0 0 80px;
    }

    .selectWidthClass {
        flex: 0 0 110px;
    }

    .selectHideClass {
        flex: 0 0 10px;
    }

    .my-header-filter-input {
        display: block;
        margin-top: 4px;
        margin-bottom: 6px;
        padding: 3px 1px 3px 2px;
        border-radius: 2px;
    }

    .showTable {
        display: flex;
    }

    .hideTable {
        display: none;
    }
    .map-container {
        .mat-mdc-icon-button.mat-mdc-button-base {
            height: 30px !important;
            width: 30px !important;
        }
    }
}