overview.component.scss

@use '@angular/material' as mat;
@use '../../../theme.scss';
@import '../../../style.scss';

:host {
  /* badge */
  span {
    padding-top: 7px;
  }

  .mat-badge {

    &-content {
      border-radius: 3px;
      width: auto !important;
      padding: 0 7px;
      position: unset;
      color: white;
    }

    &-delete {
      .mat-badge-content {
        background: crimson;
      }
    }

    &-get {
      .mat-badge-content {
        background: mat.get-color-from-palette(theme.$ngapimock-primary, 500);
      }
    }

    &-post, &-put, &-patch {
      .mat-badge-content {
        background: mat.get-color-from-palette(theme.$ngapimock-primary, 800);
      }
    }
  }

  mat-header-row {
    min-height: 30px;
    padding-left: 0px;

    mat-header-cell {
      padding-left: 10px;
      font-size: 16px;
      color: mat.get-color-from-palette(theme.$ngapimock-primary);
    }
  }

  mat-footer-cell {
    display: flex; justify-content: flex-end
  }

  mat-cell {
    padding: 0 10px 0 10px;
  }

  .mat-column-name, .mat-column-url,  .mat-column-scenario {
    flex: 0 0 24%;
  }
  .mat-column-method, .mat-column-delay, {
    flex: 0 0 10%;
  }
  .mat-column-echo {
    flex: 0 0 8%;
  }

  input {
    border: 1px solid mat.get-color-from-palette(theme.$ngapimock-secondary, 300);
  }

  input:focus {
    z-index: 10;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem mat.get-color-from-palette(theme.$ngapimock-primary, 300);
  }

}