af83/chouette-core

//----------//
//  Modals  //
//----------//

$modalW: 600px;

.modal {
  .scrollable-modal {
    .modal-dialog {
      overflow-y: initial !important;
    }
    // TODO find a way to have a modular (%) height
    .modal-body {
      height: 500px;

      overflow-y: auto;
    }
  }
  // Modal centering
  .modal-container {
    display: table;
    width: 100%;
    height: 100%;

    .modal-dialog {
      display: table-cell;
      vertical-align: middle;
      width: 100%;
      height: 100%;
      margin: 0;
      text-align: center;

      .modal-content {
        display: inline-block;
        text-align: left;
        width: $modalW;
      }
    }
  }
  // Modal custom styles
  .modal-content {
    border-radius: 4px;
    border: none;
    // overflow: hidden

    .modal-header {
      border: none;
      background-color: $brand-color-primary-dark;
      color: #fff;
      padding: 15px 30px;

      .modal-title {
        font-size: $h2-size;
        display: inline-block;
      }
      .modal-close {
        text-align: right;
        display: inline-block;
        opacity: 100;
        color: white;
      }
    }
    .modal-body {
      padding: 15px 30px;
    }
    .modal-footer {
      border-color: rgba($grey, 0.25);
      padding: 15px 30px;
    }
    .has-error .form-group {
      margin-bottom: -10px;
    }
    .form-group {
      margin-bottom: 25px;
    }
    .fa.fa-trash {
      color: red;
    }
  }
}