zitadel/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss

@use '@angular/material' as mat;

@mixin private-label-theme($theme) {
  $primary: map-get($theme, primary);
  $primary-color: mat.get-color-from-palette($primary, 500);
  $is-dark-theme: map-get($theme, is-dark);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $p-border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
  $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

  .privatelabeling-policy {
    .header {
      display: flex;

      a {
        margin: 0 1rem;
      }

      .col {
        display: flex;
        flex-direction: column;
        margin-left: 1rem;

        h1 {
          margin: 0;
        }
      }
    }

    .desc {
      font-size: 14px;
      max-width: 800px;
      margin-bottom: 2rem;
    }

    .max-size-desc {
      display: block;
      margin-bottom: 1rem;
    }

    .spinner-wr {
      margin: 0.5rem 0;
    }

    .privatelabeling-top-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 1rem;

      .buttongroup {
        margin-right: 0.5rem;
        margin-top: 0.5rem;

        .mat-button-toggle-button {
          display: flex;
          height: 36px;
          line-height: 36px;
          align-items: center;
          font-size: 14px;
        }

        .toggle-row {
          display: flex;
          align-items: center;

          i {
            margin-right: 0.5rem;
          }

          .current-dot {
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background-color: rgb(84, 142, 230);
            margin-left: 0.5rem;
          }
        }
      }

      .fill-space {
        flex: 1;
      }

      .pl-action-button {
        align-self: flex-start;
        margin-top: 0.5rem;
      }
    }

    .lab-policy-content {
      padding-top: 2rem;
      display: flex;
      flex-direction: column;

      @media only screen and (min-width: 950px) {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;

        .preview-wrapper {
          .col {
            min-width: 400px;
          }
        }

        .settings {
          margin-right: 1rem;
        }
      }

      .settings {
        flex: 1;

        .expansion {
          box-shadow: none;
          border: 1px solid $p-border-color;
          background-color: map-get($background, cards);

          .header {
            justify-content: flex-start;
          }

          .panel-title {
            display: flex;
            align-items: center;

            .icon {
              margin-right: 0.5rem;
            }

            .space {
              width: 1rem;
            }
          }
        }

        .title {
          margin-top: 2rem;
          margin-bottom: 0.5rem;
          display: block;
          font-size: 18px;
        }

        .logo-view {
          display: flex;
          flex-direction: column;
          margin-bottom: 1.5rem;

          .label {
            font-size: 14px;
          }

          .fill-space {
            flex: 1;
          }

          .img-wrapper {
            position: relative;
            height: 70px;
            width: 70px;
            box-sizing: border-box;
            border-radius: 0.5rem;
            margin-top: 0.5rem;
            border: 1px solid map-get($foreground, divider);
            display: flex;
            justify-content: center;
            align-items: center;

            .dl-btn {
              z-index: 2;
              position: absolute;
              right: 0;
              top: 0;
              cursor: pointer;
              visibility: hidden;
              transform: translateX(50%) translateY(-50%);
            }

            img {
              top: 0;
              left: 0;
              width: 70px;
              height: 70px;
              object-fit: contain;
              object-position: center;
              border-radius: 0.5rem;
            }

            &.icon {
              border-radius: 50%;

              img {
                border-radius: 50%;
              }
            }

            &:hover {
              .dl-btn {
                visibility: visible;
              }
            }
          }
        }

        .colors {
          display: flex;
          flex-direction: column;

          .color {
            padding-bottom: 1rem;
          }
        }

        .fonts {
          .info-section {
            display: block;
            margin-bottom: 1rem;
          }

          .title {
            display: block;
            font-size: 14px;
          }

          .font-preview {
            height: 70px;
            width: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid map-get($foreground, divider);
            position: relative;

            .icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
            }

            .dl-btn {
              z-index: 2;
              position: absolute;
              right: 0;
              top: 0;
              cursor: pointer;
              visibility: hidden;
              transform: translateX(50%) translateY(-50%);
            }

            &:hover {
              .dl-btn {
                visibility: visible;
              }
            }
          }

          .font-add {
            height: 70px;
            width: 70px;
            box-sizing: border-box;
            border-radius: 0.5rem;
            margin-top: 0.5rem;
            border: 1px solid map-get($foreground, divider);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .adv-container {
          display: flex;
          flex-direction: column;
          padding-bottom: 50px;

          .info {
            margin-bottom: 0.5rem;
          }

          .toggle {
            margin-bottom: 1rem;
          }
        }
      }
    }

    .vertical-divider {
      width: 1px;
      background-color: map-get($foreground, divider);
      margin: 0 1rem;
    }

    .preview-wrapper {
      flex: 2;
      position: relative;
      background-color: #00000010;
      border: 1px solid $border-color;
      box-sizing: border-box;

      @media only screen and (min-width: 950px) {
        margin-left: 1rem;
      }

      .col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 0;
        min-height: 600px;
        width: fit-content;
        margin: auto;
      }
    }
  }
}

.grid {
  display: block;
  margin: 50px 0;
}