peff48bpz/vote/assets/scss/core/_modals.scss

//
// Modals
// --------------------------------------------------
body.modal-open {
  padding: 0 !important;
  
  .jPanelMenu-panel {
    position: static !important;
  }
}

.modal-static {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1 !important;
  display: block;
  margin-bottom: 1em;
  
  .modal-dialog {
    left: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 0 !important;
  }  
}

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and shit

// Container that the modal scrolls within
.modal {
  z-index: $zindex-modal;
  padding: 0 !important;
  
  &[data-toggle="modal-onload"] {
    z-index: -1;
    
    &.show {
      z-index: $zindex-modal;
    }
  }
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  z-index: ($zindex-modal-backdrop + 10);
}

// Actual modal
.modal-content {
  @include box-shadow(0 3px 9px rgba(0,0,0,.5));
  @include border-radius(3px);
}

// Modal background
.modal-backdrop {
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade { @include opacity(0); }
  &.show, &.fade.show { @include opacity(0.5); }
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  padding: 15px;
  min-height: (15 + $modal-title-line-height);
}

// Title text within header
.modal-title {
  margin: 0;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  padding: $modal-inner-padding;
}

// Footer (for actions)
.modal-footer {
  margin-top: 0;
  padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding;
}

// Scale up the modal
@include media-breakpoint-up(sm) {

  .modal-dialog {
    padding-top: 5%;
    padding-bottom: 30px;
  }
  .modal-content {
    @include box-shadow(0 5px 15px rgba(0,0,0,.5));
  }

}

.modal-progress {
  height: 5px;
  background: $primary_colour;
  display: block;
  width: 0;
  @include transition(width .2s ease-in-out);
}

// Custom
.modal-fs {
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  padding: 0;
  margin: 0;
  
  .modal-content {
    position: fixed;
    height: 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    @include border-radius(0);
    border: none;
  }
}

.close:focus,
.close:active {
  outline: none;
}


// Animate.css integration
.modal-animate {
  .modal-backdrop {
    display: none !important; // do our own
  }
}
.modal[data-modal-animate-in],
.modal[data-modal-animate-in].fade .modal-dialog,
.modal[data-modal-animate-out],
.modal[data-modal-animate-out].fade .modal-dialog{
  -webkit-transform: translate(0);
  -moz-transform: translate(0);
  transform: translate(0);
  //display: block;
  z-index: 1050 !important;
}
.modal-animate-closing {
  display: block !important;
}
.modal-animate-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  @include opacity(0);
  @include transition(all 0.4s ease-in);
  visibility: hidden;
  
  &.show {
    visibility: visible;
    @include opacity($modal-backdrop-opacity);
  }
}

// Modals without backdrop
.modal-no-backdrop {
  overflow: auto;
  
  .modal-backdrop,
  .modal-backdrop.show,
  .modal-animate-backdrop,
  .modal-animate-backdrop.show {
    display: none !important;
  }
}