@webilix/ngx-helper-m3/ngx-helper-m3.css

Helper library for Angular and Material 3

/* GLOBAL VALUES */
:root {
    --ngx-helper-m3-page-group-toolbar-height: 40px;
}

/* NGX HELPER VALUE LIST */
.ngx-helper-m3-box {
    display: block;
    direction: rtl;

    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--outline-variant);
    background-color: var(--surface-container-low);
}

.ngx-helper-m3-box:not(.hide-shadow)::after {
    display: block;
    content: ' ';

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    pointer-events: none;
    box-shadow: inset 0 0 5px 0 var(--outline-variant);
}

/* NGX HELPER CARD */
.ngx-helper-m3-card {
    display: block;
    direction: rtl;

    overflow: hidden;
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--outline-variant);

    .card-header {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;

        height: 55px;
        padding-right: 1rem;
        border-radius: 8px 8px 0 0;
        border-bottom: 1px solid var(--outline-variant);
        background-color: var(--surface-container-high);

        mat-icon {
            margin: 0;
            margin-left: 0.5rem;
        }

        .content {
            flex: 1;
            width: 0;

            display: flex;
            flex-direction: column;
            padding: 0.75rem 0;

            .title {
                font-size: 110%;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .buttons {
            display: flex;
            align-items: center;
            column-gap: 0.5rem;

            button {
                display: flex;
                justify-content: center;
                column-gap: 0.25rem;

                border-radius: 0;
                padding: 0 0.75rem;
                min-width: auto;
                height: 55px;

                .title {
                    font-size: 90%;
                }

                mat-icon {
                    padding: 0;
                    margin: 0;
                    font-size: 120%;
                    line-height: 1;
                }
            }
        }

        .buttons.mobile-view {
            column-gap: 0;
            padding-left: 0;

            button {
                padding: 0 0.5rem;
            }
        }

        .option {
            margin-right: 0.5rem;

            button {
                display: flex;
                justify-content: center;
                column-gap: 0.25rem;

                border-radius: 0;
                padding: 0 0.75rem;
                min-width: auto;
                height: 55px;

                .title {
                    font-size: 90%;
                }

                mat-icon {
                    padding: 0 0 0 0.5rem;
                    margin: 0;
                    font-size: 120%;
                    line-height: 1;
                }

                mat-icon.mobile-view {
                    padding: 0;
                }
            }
        }
    }

    .card-header.has-sub-title {
        height: 65px;

        .content {
            .sub-title {
                font-size: 85%;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .buttons {
            button {
                height: 65px;
            }
        }
    }

    .card-content {
        display: block;
        overflow: hidden;
        border-radius: 0 0 8px 8px;
        background-color: var(--surface-container-low);
    }
}

.ngx-helper-m3-card.has-shadow::after {
    display: block;
    content: ' ';

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    pointer-events: none;
    box-shadow: inset 0 0 5px 0 var(--outline-variant);
}

/* NGX HELPER CONFIRM */
.ngx-helper-m3-confirm {
    display: block;
    margin: 1.5rem 1.5rem 1rem 1.5rem;

    .confirm-content {
        display: flex;
        align-items: flex-start;
        column-gap: 1rem;

        mat-icon {
            font-size: 200%;
        }

        .confirm {
            flex: 1;

            .question {
                text-align: justify;
            }

            .description {
                text-align: justify;
                font-size: 90%;
            }

            .data {
                display: flex;
                align-items: center;
                column-gap: 1rem;
                font-size: 90%;
                margin-top: 1rem;
            }
        }
    }

    .confirm-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        column-gap: 1rem;
        margin-top: 1rem;
    }
}

/* NGX HELPER CONTAINER */
.ngx-helper-m3-container {
    display: block;
    max-height: 80vh;
    overflow: hidden;

    .container-header {
        display: flex;
        align-items: center;

        height: 65px;
        line-height: 65px;
        font-size: 110%;
        padding: 0 0.5rem;
        border-bottom: 1px solid var(--outline-variant);
        background-color: var(--surface-container);

        .title {
            flex: 1;
            width: 0;
            padding-right: 0.5rem;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .container-content {
        display: block;
        max-height: calc(80vh - 67px);
        overflow: auto;
        box-sizing: border-box;
    }
}

/* NGX HELPER COORDINATES */
.ngx-helper-m3-coordinates {
    display: block;
    z-index: 1000;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .map {
        width: 100vw;
        height: 100vh;
        background-color: rgb(255, 255, 255);
    }

    .coordinates {
        position: absolute;
        bottom: 0;
        left: 0;

        direction: ltr;
        padding: 0.5rem 0.5rem 0.75rem 0.5rem;
        background-color: rgb(255, 255, 255);
        box-shadow: 0 0 5px 0px var(--primary);

        .header {
            display: flex;
            align-items: center;
            column-gap: 1rem;

            padding: 0.5rem 1rem;
            color: var(--on-primary);
            background-color: var(--primary);

            .title {
                flex: 1;
                font-size: 90%;
                font-weight: 500;
                font-family: Roboto, 'Helvetica Neue', sans-serif;
            }

            mat-icon {
                cursor: pointer;
                font-size: 110%;
                color: var(--on-primary);
            }
        }

        .item {
            display: flex;
            align-items: center;
            column-gap: 1rem;

            padding: 0.75rem 1rem 0 1rem;
            color: rgb(0, 0, 0);

            .title {
                flex: 1;
                font-size: 90%;
                font-family: Roboto, 'Helvetica Neue', sans-serif;
            }

            input {
                direction: ltr;
                text-align: left;

                outline: none;
                width: 125px;
                font-size: 90%;
                padding: 0.25rem;
                border-radius: 4px;
                color: rgb(0, 0, 0);
                border: 1px solid rgb(200, 200, 200);
                font-family: Roboto, 'Helvetica Neue', sans-serif;
            }

            .value {
                font-size: 95%;
                text-align: right;
                padding-right: 1rem;
                font-family: Roboto, 'Helvetica Neue', sans-serif;
            }

            mat-icon {
                cursor: pointer;
                font-size: 100%;
                color: rgb(0, 0, 0);
            }
        }

        .buttons {
            display: flex;
            justify-content: right;

            margin-top: 0.5rem;
            padding-right: 1rem;

            mat-icon {
                cursor: pointer;
                font-size: 130%;
                color: rgb(0, 0, 0);
            }

            mat-icon.disabled {
                opacity: 0.4;
            }
        }
    }
}

/* NGX HELPER HTTP (UPLOAD / DOWNLOAD / PDF) */
.ngx-helper-m3-http {
    position: fixed;
    left: 1rem;

    direction: ltr;
    display: block;
    height: 40px;
    overflow: hidden;
    width: calc(100vw - 4rem);
    max-width: 250px;
    transition: all 0.35s ease-out;
    z-index: 5000;

    border-radius: 8px;
    border: 1px solid var(--outline-variant);
    background-color: var(--surface-container);

    .content {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;

        height: 37px;
        padding: 0 0.5rem;

        .file {
            flex: 1;

            font-size: 90%;
            text-align: left;
            direction: ltr;
            font-family: Roboto, 'Helvetica Neue', sans-serif;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .title {
            flex: 1;

            font-size: 90%;
            text-align: right;
            direction: rtl;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .progress-container {
        width: 100%;
        height: 3px;
        background-color: var(--outline-variant);
        position: relative;

        .progress-value {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;

            background-color: var(--primary);
            transition: all 0.35s ease-out;
        }
    }
}

.ngx-helper-m3-pdf {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 1000;

    .background {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        background-color: var(--background);
        opacity: 0.9;
    }

    .close {
        position: fixed;
        top: 1rem;
        left: 1rem;

        background-color: var(--outline-variant);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        border-radius: 0;

        mat-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 125%;
        }
    }

    ngx-extended-pdf-viewer {
        position: relative;
        display: block;
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
    }
}

/* NGX HELPER IMAGE */
.ngx-helper-m3-image {
    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 10000;

    .background {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .close {
        position: fixed;
        top: 1rem;
        left: 1rem;

        background-color: var(--outline-variant);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;

        mat-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 125%;
        }
    }

    .arrows {
        position: fixed;
        top: 1rem;
        right: 1rem;

        direction: rtl;
        border-radius: 0.5rem;
        background-color: var(--outline-variant);

        display: flex;
        column-gap: 1rem;
        z-index: 2;

        .count {
            display: flex;
            align-items: center;

            font-size: 110%;
            font-weight: 600;
        }

        button {
            display: flex;
            align-items: center;
            justify-content: center;

            mat-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 125%;
            }
        }
    }

    .image {
        flex: 1;
        height: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        position: relative;

        img {
            max-width: calc(100vw - 4rem);
            max-height: calc(100% - 4rem);
        }
    }

    .description {
        display: flex;
        align-items: center;
        justify-content: center;

        position: relative;
        background-color: var(--outline-variant);

        .content {
            min-height: 50px;
            max-height: calc(100vh / 3);
            overflow: auto;

            padding: 1rem 0;
            direction: rtl;
            width: 1200px;
            max-width: calc(100vw - 4rem);
            text-align: justify;
            font-size: 90%;
        }
    }
}

/* NGX HELPER PAGE GROUP */
.ngx-helper-m3-page-group {
    direction: rtl;
    display: flex;
    align-items: flex-start;
    column-gap: 1rem;

    .page-group-aside {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;

        box-sizing: border-box;
        padding: 1rem;
        background-color: var(--surface-container-high);

        .page {
            display: flex;
            align-items: center;
            column-gap: 0.5rem;

            padding: 0.5rem 0.75rem;
            transition: all 0.3s ease-in-out;

            .title {
                flex: 1;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            mat-icon {
                font-size: 120%;
            }
        }

        .active {
            border-radius: 4px;
            color: var(--on-primary);
            background-color: var(--primary);
        }
    }

    .page-group-content {
        flex: 1;
        display: block;

        .header {
            z-index: 1;
            background-color: var(--background);

            .spacer {
                z-index: 2;
                height: 1rem;
                width: 100%;
            }
        }
    }
}

.ngx-helper-m3-page-group.mobile-view {
    flex-direction: column;
    column-gap: 0;

    .page-group-menu {
        display: flex;
        align-items: center;

        box-sizing: border-box;
        background-color: var(--surface-container-high);
        height: calc(var(--ngx-helper-m3-page-group-toolbar-height));
        overflow: hidden;
        width: 100%;
        z-index: 2;

        mat-icon.page {
            margin: 0 0.5rem;
        }

        .title {
            flex: 1;
            font-size: 90%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        button.menu {
            display: flex;
            align-items: center;
            justify-content: center;

            padding: 0;
            margin: 0;
            border-radius: 0;
            margin-right: 1rem;
            width: var(--ngx-helper-m3-page-group-toolbar-height);
            min-width: var(--ngx-helper-m3-page-group-toolbar-height);
            height: var(--ngx-helper-m3-page-group-toolbar-height);

            mat-icon {
                display: flex;
                align-items: center;
                justify-content: center;

                padding: 0;
                margin: 0;
                width: var(--ngx-helper-m3-page-group-toolbar-height);
                height: var(--ngx-helper-m3-page-group-toolbar-height);
            }
        }
    }

    .page-group-nav {
        display: flex;
        align-items: center;

        box-sizing: border-box;
        background-color: var(--surface-container-high);
        height: calc(var(--ngx-helper-m3-page-group-toolbar-height));
        overflow: hidden;
        width: 100%;
        z-index: 2;

        .page {
            display: flex;
            align-items: center;
            column-gap: 0.25rem;

            padding: 0 1rem;
            height: var(--ngx-helper-m3-page-group-toolbar-height);
            transition: all 0.3s ease-in-out;

            .title {
                flex: 1;
                font-size: 90%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .active {
            flex: 1;
            width: 0;
            color: var(--on-primary);
            background-color: var(--primary);

            mat-icon {
                font-size: 120%;
            }
        }
    }

    .page-group-spacer {
        z-index: 1;
        height: 1rem;
        width: 100%;
        background-color: var(--background);
    }

    .page-group-content {
        flex: none;
        width: 100%;
    }
}

/* NGX HELPER PROGRESS */
.ngx-helper-m3-progress {
    display: block;
    position: relative;
    direction: rtl;
    overflow: hidden;

    .progress {
        position: absolute;
        transition: width 0.35s ease-out, height 0.35s ease-out;
    }

    .content {
        position: relative;
    }
}

.ngx-helper-m3-progress.LR,
.ngx-helper-m3-progress.RL {
    .progress {
        top: 0;
        bottom: 0;
    }
}

.ngx-helper-m3-progress.LR {
    .progress {
        left: 0;
    }
}

.ngx-helper-m3-progress.RL {
    .progress {
        right: 0;
    }
}

.ngx-helper-m3-progress.TB,
.ngx-helper-m3-progress.BT {
    .progress {
        right: 0;
        left: 0;
    }
}

.ngx-helper-m3-progress.TB {
    .progress {
        top: 0;
    }
}

.ngx-helper-m3-progress.BT {
    .progress {
        bottom: 0;
    }
}

/* NGX HELPER ROUTE */
.ngx-helper-m3-route {
    display: block;
    z-index: 1000;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .map {
        width: 100vw;
        height: 100vh;
        background-color: rgb(255, 255, 255);
    }

    .route {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 250px;

        direction: ltr;
        background-color: var(--background);
        box-shadow: 0 0 5px 0px var(--primary);

        display: flex;
        flex-direction: column;

        .header {
            display: flex;
            align-items: center;
            column-gap: 1rem;

            padding: 0.5rem 1rem;
            color: var(--on-primary);
            background-color: var(--primary);
            margin: 0.5rem 0.5rem 0.75rem 0.5rem;

            .title {
                flex: 1;
                font-size: 90%;
                font-weight: 500;
                font-family: Roboto, 'Helvetica Neue', sans-serif;
            }

            mat-icon {
                cursor: pointer;
                font-size: 110%;
                color: var(--on-primary);
            }
        }

        .coordinates {
            flex: 1;

            overflow: auto;
            max-height: calc(100vh - 1rem - 40px - 48px);
        }

        .footer {
            display: flex;
            align-items: center;

            position: relative;
            color: var(--primary);
            background-color: var(--surface-container);
            padding: 0.75rem 1rem;

            .distance {
                flex: 1;
                font-size: 90%;
                font-weight: 500;
                font-family: Roboto, 'Helvetica Neue', sans-serif;
            }

            mat-icon {
                cursor: pointer;
                font-size: 130%;
            }

            mat-icon.disabled {
                opacity: 0.4;
            }
        }
    }
}

.ngx-helper-m3-route-coordinate {
    display: flex;
    align-items: center;

    padding: 0.5rem;
    border-top: 1px solid var(--outline-variant);
    background-color: var(--background);

    mat-icon {
        cursor: pointer;
        font-size: 130%;
    }

    mat-icon.delete {
        color: var(--error);
    }

    .index {
        width: 30px;
        font-size: 80%;
        font-family: Roboto, 'Helvetica Neue', sans-serif;
    }

    .value {
        flex: 1;
        font-size: 90%;
        cursor: pointer;
        overflow: hidden;
        font-family: Roboto, 'Helvetica Neue', sans-serif;
    }
}

.ngx-helper-m3-route-coordinate.selected {
    background-color: var(--surface-container-high);
}

/* NGX HELPER TOAST */
.ngx-helper-m3-toast {
    position: fixed;

    display: block;
    direction: rtl;
    width: calc(100vw - 4rem);
    max-width: 350px;
    transition: top 0.35s ease-out;
    z-index: 5000;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid transparent;

    .content {
        display: flex;
        align-items: flex-start;
        column-gap: 0.5rem;

        .toast {
            flex: 1;

            display: flex;
            align-items: center;
            column-gap: 1rem;

            padding-right: 1rem;

            ul {
                flex: 1;
                list-style: none;
                margin: 0;
                padding: 1rem 0 1rem 1rem;

                li {
                    margin: 0;
                    padding: 0;
                    font-weight: 500;
                    line-height: 1.45;
                    padding-top: 0.25rem;
                }

                li:first-of-type {
                    padding-top: 0;
                }
            }

            mat-icon.icon {
                font-size: 26px;
            }
        }

        mat-icon.close {
            padding: 1rem 0 0 1rem;
        }
    }

    .progress-container {
        width: 100%;
        height: 4px;
        position: relative;

        .progress-value {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;

            transition: all 0.35s ease-out;
        }
    }
}

.ngx-helper-m3-toast.center {
    left: 50%;
    transform: translate(-50%, 0);
}

.ngx-helper-m3-toast.left {
    left: 1rem;
}

.ngx-helper-m3-toast.right {
    right: 1rem;
}

/* NGX HELPER VALUE BOX */
.ngx-helper-m3-value-box {
    display: grid;
    row-gap: var(--gap-size);
    column-gap: var(--gap-size);

    direction: rtl;

    .value-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        position: relative;

        .title {
            width: 100%;
            font-size: 90%;
            font-weight: 500;
            padding: 1rem 1rem 0.5rem 1rem;
            text-align: center;
            box-sizing: border-box;
        }

        .value {
            width: 100%;
            font-weight: normal;
            padding: 0 1rem 1rem 1rem;
            text-align: center;
            box-sizing: border-box;
        }

        .value.en {
            direction: ltr;
            font-family: Roboto, 'Helvetica Neue', sans-serif;
        }

        .value.empty {
            opacity: 0.75;
            font-style: italic;
            font-size: 90%;
        }

        button {
            position: absolute;
            top: 0;
            left: 0;

            font-size: 100%;
            line-height: 1;

            mat-icon {
                font-size: 100%;
                line-height: 1;
            }
        }
    }

    .value-box.click {
        cursor: pointer;
    }

    .value-box:not(.clear) {
        border-radius: 4px;
        border: 1px solid var(--outline-variant);
        background-color: var(--surface-container-low);
    }
}

.ngx-helper-m3-value-box:not(.hide-shadow) {
    .value-box:not(.clear)::after {
        display: block;
        content: ' ';

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        pointer-events: none;
        box-shadow: inset 0 0 5px 0 var(--outline-variant);
    }
}

/* NGX HELPER VALUE LIST */
.ngx-helper-m3-value-list {
    display: flex;
    flex-direction: column;
    direction: rtl;

    .value-list-item {
        display: flex;
        align-items: flex-start;
        column-gap: 1rem;

        min-height: 40px;

        .title {
            font-size: 90%;
            font-weight: 500;
            padding: 0.5rem 1rem 0.5rem 0;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .value {
            flex: 1;

            display: flex;
            align-items: center;
            font-weight: normal;

            min-height: 40px;

            .en {
                direction: ltr;
                font-family: Roboto, 'Helvetica Neue', sans-serif;
            }

            .empty {
                opacity: 0.75;
                font-style: italic;
                font-size: 90%;
            }

            .click {
                cursor: pointer;
            }
        }

        button {
            font-size: 100%;
            line-height: 1;

            mat-icon {
                font-size: 100%;
                line-height: 1;
            }
        }
    }

    .value-list-item.odd {
        background-color: var(--surface-container);
    }

    .value-list-item.even {
        background-color: var(--background);
    }
}