open-vault/ui/app/styles/components/replication-dashboard.scss

.replication-dashboard {
  box-shadow: none;

  .selectable-card {
    line-height: normal;

    &:hover {
      box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
    }

    .toolbar-link {
      color: $blue-500;
    }
  }

  .helper-text {
    font-weight: $font-weight-normal;
  }

  .title.is-6 {
    margin-bottom: $spacing-xs;
  }

  .reindexing-alert,
  .syncing-alert {
    margin-top: $spacing-xl;
  }

  .selectable-card-container {
    margin-top: $spacing-xl;
    display: grid;

    &.primary,
    .summary {
      margin: 2rem 0 2rem 0;
      grid-template-columns: 1fr 2fr;

      @include until($mobile) {
        grid-template-columns: 1fr;
      }
    }

    &.secondary {
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      grid-gap: $spacing-xl;
    }

    .card-container {
      display: grid;
      grid-gap: $spacing-s;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 0.2fr 0.2fr 0.2fr;
      padding: $spacing-l;
      line-height: 1.5;

      &.summary {
        grid-template-rows: 0.2fr 1fr 0.2fr 1fr;
      }

      &.has-border-danger:hover {
        box-shadow: none;
      }

      @include until(1320px) {
        // prevent an issue with the card descriptions wrapping and expanding height
        min-height: 250px;
      }

      .grid-item-top-left {
        grid-column: 1 / span 1;
        display: flex;
      }
      .grid-item-top-right {
        grid-column: 2 / span 1;
        justify-self: right;
      }
      .grid-item-left {
        grid-column: 1/1;
        grid-row: 2/2;
      }
      .grid-item-right {
        grid-column: 2/2;
        grid-row: 2/2;
      }

      .grid-item-bottom-left {
        grid-column: 1/1;
        grid-row: 3/3;
        display: flex;
        align-items: center;
      }
      .grid-item-bottom-right {
        grid-column: 2/2;
        grid-row: 3/3;
      }

      .grid-item-second-row {
        grid-column: 1 / span 2;
        grid-row: 2/2;
      }

      .grid-item-third-row {
        grid-column: 1 / span 2;
        grid-row: 3/4;

        .empty-state {
          padding: 0px 12px;
          box-shadow: none;
        }
      }
      .grid-item-bottom-row {
        grid-column: 1 / span 2;
        grid-row: 4/4;
      }
    }

    &.summary {
      margin-bottom: $spacing-xl;
    }
  }
  .summary-state {
    padding-bottom: $spacing-xl;
    border-bottom: 1px solid rgba($grey-dark, 0.3);
  }

  // prevent double lines at the bottom of the dashboard
  &.box {
    padding-bottom: 0;
    padding-top: 1px; // at least 1px so border still shows
  }
}