cr-connect-bpmn/src/material-theme.scss

@import "material";

@include mat-core($custom-typography);
@include angular-material-theme($cr-connect-theme);

@mixin cr-connect-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  h1 {
    text-transform: uppercase;
    color: $brand-accent;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

  body {
    margin: 0;
    padding-top: 64px;
  }

  mat-radio-button, .mat-checkbox {
    padding-right: 16px;
  }

  formly-field mat-form-field {
    margin-bottom: 2rem;
  }

  formly-field.textarea-cols {
    display: flow-root;

    & > formly-wrapper-mat-form-field > mat-form-field {
      width: auto !important;

      .mat-form-field-infix {
        width: auto !important;
      }
    }
  }

  formly-field.read-only {
    .mat-form-field-outline {
      background-color: $brand-gray-tint-2;
      border-radius: 5px;
    }
  }

  formly-field.vertical-radio-group {
    mat-radio-button {
      margin: 5px;
      padding-right: 16px;
      display: block;

      label.mat-radio-label {
        white-space: normal;
      }
    }
  }

  formly-field.vertical-checkbox-group {
    .mat-checkbox {
      margin: 5px;
      padding-right: 16px;
      display: block;

      .mat-checkbox-layout {
        white-space: normal;
      }
    }
  }

  .full-height {
    width: 100%;
    height: calc(100vh - 64px);
  }

  .container, .row {
    padding: 1em;
  }

  //.container {
  //  display: grid;
  //  justify-content: center;
  //  justify-items: center;
  //  grid-template-columns: 1fr;
  //  position: relative;
  //  max-width: 100vw;
  //
  //  .row {
  //    margin-top: 4em;
  //    margin-bottom: 4em;
  //    position: relative;
  //
  //    max-width: 100vw;
  //    @media (min-width: 576px) {
  //      max-width: calc(100% - 40px);
  //    }
  //    @media (min-width: 768px) {
  //      max-width: calc(100% - 80px);
  //    }
  //    @media (min-width: 992px) {
  //      max-width: calc(100% - 100px);
  //    }
  //    @media (min-width: 1200px) {
  //      max-width: calc(100% - 120px);
  //    }
  //  }
  //}

  button {
    &.btn-xl {
      font-size: 24px;
      padding-left: 24px;
      padding-right: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
    }

    &.btn-lg {
      font-size: 20px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 6px;
      padding-bottom: 6px;
    }

    &.disabled {
      background-color: $brand-gray !important;
    }
  }

  mat-form-field.mat-form-field {
    font-size: 16px;
  }

  .mat-form-field-wrapper .mat-form-field-subscript-wrapper {
    position: static;
  }

  .alert {
    padding: 2em;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 2em;

    &.alert-info {
      background-color: $brand-primary-light;
      color: black;
    }

    &.alert-warn {
      background-color: $brand-warning;
      color: white;
    }
  }

  .mat-drawer .mat-nav-list .mat-list-item {
    min-width: 320px;
  }

  .mat-drawer .mat-nav-list .mat-list-item.active {
    background-color: $brand-primary;
    color: white;
  }

  .mat-tooltip {
    font-size: 1rem !important;
  }

  .pad-0 {
    padding: 0px;
  }
  .pad-1 {
    padding: 1em;
  }
  .pad-2 {
    padding: 2em;
  }
  .pad-3 {
    padding: 3em;
  }
  .pad-4 {
    padding: 4em;
  }
  .pad-5 {
    padding: 5em;
  }
  .pad-6 {
    padding: 6em;
  }
  .pad-7 {
    padding: 7em;
  }
  .pad-8 {
    padding: 8em;
  }

  .margin-top-none, .row.margin-top-none {
    margin-top: 0px !important;
  }
  .margin-bottom-none, .row.margin-bottom-none {
    margin-bottom: 0px !important;
  }
  .ghost {
    opacity: 0;
  }

  // XS
  @media (max-width: 575px) {
    .cdk-overlay-wrapper .cdk-overlay-pane {
      width: 100%;
      height: 100%;
    }

    mat-dialog-container.mat-dialog-container {
      border-radius: 0;
    }
  }

  // SM
  @media (min-width: 576px) {
    .cdk-overlay-wrapper .cdk-overlay-pane {
      width: 90%;
      height: 90%;
    }

    mat-dialog-container.mat-dialog-container {
      width: 100vw;
    }
  }

  // MD
  @media (min-width: 768px) {
    .cdk-overlay-wrapper .cdk-overlay-pane {
      width: 75%;
      height: 75%;
    }

    mat-dialog-container.mat-dialog-container {
      width: 90vw;
    }
  }

  // LG
  @media (min-width: 992px) {
    .cdk-overlay-wrapper .cdk-overlay-pane {
      width: 75%;
      height: 75%;
    }

    mat-dialog-container.mat-dialog-container {
      width: 80vw;
    }
  }

  // XL
  @media (min-width: 1200px) {
    .cdk-overlay-wrapper .cdk-overlay-pane {
      width: 75%;
      height: 75%;
    }

    mat-dialog-container.mat-dialog-container {
      width: 70vw;
    }
  }

  .mat-dialog-content[mat-dialog-content] {
    max-height: 85vh;
  }

  .loading {
    height: calc(100vh - 64px);
  }

}