UTPass-Website/mdb/scss/free/_modals.scss

// Modals
// Styles for body
body {
  &.modal-open {
    overflow: auto;
    padding-right: 0 !important;
  }
  &.scrollable {
    overflow-y: auto;
  }
}

// *** ENHANCED BOOTSTRAP MODALS ***///
// General styles
.modal-dialog {
  .modal-content {
    box-shadow: $z-depth-1-half;
    border: 0;
    border-radius: $border-radius-base;
    .modal-header {
      border-top-left-radius: $border-radius-base;
      border-top-right-radius: $border-radius-base;
    }
  }
  // Cascading modals
  &.cascading-modal {
    margin-top: 10%;
    .close {
      opacity: 1;
      text-shadow: none;
      color: $white-base;
      outline: 0;
    }
    // Cascading header
    .modal-header {
      box-shadow: $z-depth-1-half;
      margin: $cascading-modal-margin-top $cascading-modal-margin-right $cascading-modal-margin-bottom $cascading-modal-margin-left;
      border: none;
      border-radius: $border-radius-base;
      padding: $cascading-modal-padding;
      text-align: center;
      .close {
        margin-right: $cascading-modal-close-margin-right;
      }
      .title {
        margin-bottom: 0;
        width: 100%;
        font-size: $cascading-modal-font-size;
        .fas, .fab, .far {
          margin-right: $cascading-modal-fa-margin-right;
        }
      }
      .social-buttons {
        margin-top: $cascading-modal-social-margin-top;
        a {
          font-size: $cascading-modal-a-font-size;
        }
      }
    }
    // Cascading tabs nav
    .modal-c-tabs {
      .md-tabs {
        box-shadow: $z-depth-1;
        margin: $cascading-modal-tabs-margin-top $cascading-modal-tabs-margin-x 0 $cascading-modal-tabs-margin-x;
      	display: flex;
      	li {
      	  flex: 1;
      	  a {
      	    text-align: center;
      	  }
      	}
      }
      .tab-content {
        padding: $cascading-modal-tabs-padding-top 0 0 0;
      }
      /*
      .md-tabs {
       border-radius: $md-card-border-radius;
       .nav-item {
         .nav-link {
           border-radius: $md-card-border-radius;
           background-color: inherit;
           color: $white-base;
         }
       }
      }
      */
    }
    // Footer customization
    .modal-body,
    .modal-footer {
      padding-left: $modal-body-padding-left;
      padding-right: $modal-body-padding-right;
      color: $grey-darken-2;
      .additional-option {
        margin-top: $modal-body-margin-top;
        text-align: center;
      }
    }
    // Cascading avatar
    &.modal-avatar {
      margin-top: $modal-avatar-margin-top;
      .modal-header {
        box-shadow: none;
        @extend .img-fluid;
        margin: $modal-avatar-header-margin-top 0 $modal-avatar-header-margin-bottom;
        img {
          width: $modal-avatar-img-width;
          box-shadow: $z-depth-2;
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
  }
  // Modal notify
  &.modal-notify {
    .heading {
      margin: 0;
      padding: $modal-notify-heading-padding;
      font-size: $modal-notify-font-size;
      color: $white-base;
    }
    .modal-header {
      box-shadow: $z-depth-1;
      border: 0;
    }
    .close {
      opacity: 1;
    }
    .modal-body {
      padding: $modal-notify-body-padding;
      color: $grey-darken-2;
    }
    @each $name, $color in $basic {
      &.modal-#{$name}  {
        .modal-header {
          background-color: $color;
        }
        .fas, .fab, .far {
          color: $color;
        }
        .badge {
          background-color: $color;
        }
        .btn {
          .fas,
          .fab,
          .far {
            color: #fff;
          }
          &.btn-outline-#{$name} {
            .fas,
            .fab,
            .far {
              color: $color;
            }
          }
        }
      }
    }
  }
}

// Position & Size
.modal {
  padding-right: 0 !important;
  .modal-dialog {
    @media (min-width: 768px) {
      &.modal-top {
        top: 0;
      }
      &.modal-left {
        left: 0;
      }
      &.modal-right {
        right: 0;
      }
      &.modal-bottom {
        bottom: 0;
      }
      &.modal-top-left {
        top: $modal-distance;
        left: $modal-distance;
      }
      &.modal-top-right {
        top: $modal-distance;
        right: $modal-distance;
      }
      &.modal-bottom-left {
        bottom: $modal-distance;
        left: $modal-distance;
      }
      &.modal-bottom-right {
        bottom: $modal-distance;
        right: $modal-distance;
      }
    }
  }
  &.fade {
    &.top:not(.show) .modal-dialog {
      transform: $modal-fade-top-transform;
    }
    &.left:not(.show) .modal-dialog {
      transform: $modal-fade-left-transform;
    }
    &.right:not(.show) .modal-dialog {
      transform: $modal-fade-right-transform;
    }
    &.bottom:not(.show) .modal-dialog {
      transform: $modal-fade-bottom-transform;
    }
  }
  @media (min-width: $medium-screen) {
    &.modal-scrolling {
      position: relative;
      .modal-dialog {
        position: fixed;
        z-index: 1050;
      }
    }
    &.modal-content-clickable {
      top: auto;
      bottom: auto;
      .modal-dialog {
        position: fixed;
      }
    }
    .modal-fluid {
      width: 100%;
      max-width: 100%;
      .modal-content {
        width: 100%;
      }
    }
    .modal-frame {
      position: absolute;
      margin: 0 !important;
      width: 100%;
      max-width: 100% !important;
      &.modal-bottom {
        bottom: 0;
      }
    }
    .modal-full-height {
      position: absolute;
      display: flex;
      margin: 0;
      width: $modal-width;
      min-height: 100%;
      height: auto;
      min-height: 100%;
      top: 0;
      right: 0;
      &.modal-top,
      &.modal-bottom {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
      }
      &.modal-top {
        bottom: auto;
      }
      &.modal-bottom {
        min-height: 0;
        top: auto;
      }
      .modal-content {
        width: 100%;
      }
      &.modal-lg {
        width: 90%;
        max-width: 90%;
        @media (min-width: $medium-screen) {
          width: $modal-full-height-medium-screen;
          max-width: $modal-full-height-medium-screen;
        }
        @media (min-width: $large-screen) {
          width: $modal-full-height-large-screen;
          max-width: $modal-full-height-large-screen;
        }
      }
    }
    .modal-side {
      position: absolute;
      bottom: $modal-distance;
      right: $modal-distance;
      margin: 0;
      width: $modal-width;
    }
  }
}