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) {
  /* stylelint-disable */
  $primary: map-get($theme, primary);
  $primary-dark: mat-color($primary, A900);
  $accent: map-get($theme, accent);
  $accent-color: mat-color($primary, 500);
  /* stylelint-enable */

  .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;

    .sp-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(82px + 2rem);
      height: calc(82px + 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;
        text-transform: uppercase;
        border-radius: .5rem;
        border: 2px solid $accent-color;
        font-weight: 800;
        background-color: $primary-dark;
        transition: background-color box-shadow .3s ease-in;
        background-image:
          linear-gradient(transparent 11px, rgba($accent-color, .5) 12px, transparent 12px),
          linear-gradient(90deg, transparent 11px, rgba($accent-color, .5) 12px, transparent 12px);
        background-size: 100% 12px, 12px 100%;

        &:hover {
          background-color: rgba($accent-color, .1);
        }

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

          &:hover {
            background-color: rgba($accent-color, .8);
          }
        }
      }

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