zitadel/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss

@import '~@angular/material/theming';

@mixin application-grid-theme($theme) {
    $primary: map-get($theme, primary);
    $primary-dark: mat-color($primary, A900);
    $accent: map-get($theme, accent);
    $accent-color: mat-color($accent, 500);

    .app-grid-header {
        display: flex;
        align-items: center;

        .fill-space {
            flex: 1;
        }
    }

    .app-container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1rem;
        padding-bottom: 2rem;

        .app-wrap {
            outline: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 150px;

            .morph-card {
                cursor: pointer;
                animation: all .2s;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2rem;
                height: 80px;
                width: 80px;
                margin: 1rem;
                border-radius: .5rem;
                border: 1px solid $accent-color;
                background-color: $primary-dark;
                transition: background-color .4s ease-in-out;

                &.add {
                    background: $accent-color;
                }
            }

            .name {
                font-size: .8rem;
                color: #8a868a;
            }
        }
    }
}