﻿

//
// MODAL STYLES
// --------------------------------------------------


// Imports
// -------------------------

// import as less files so they are concatenated properly
@import (less) "./bootstrap-modal/bootstrap-modal-bs3patch.css";
@import (less) "./bootstrap-modal/bootstrap-modal.css";



// SF modal (page properties, etc.)
// -------------------------

.modal-content.sf-modal,
.sf-modal .modal-content {
  border: 0;
  background-color: @modal-body-bg;
  color: @modal-body-text-color;

  .modal-header {
    background-color: @modal-header-bg;
    color: @modal-header-text-color;
    padding: 5px 15px;
    min-height: 34px;
    .clearfix();

    h3 {
      float: left;
      margin-right: 12px;
    }

    .close {
      margin: 0;
      padding: 6px;
      color: @modal-header-text-color;
      text-shadow: none;
    }

    .label {
      margin-top: 8px;
    }

    small {
      margin-top: 12px;
      display: block;
      color: darken(@modal-header-text-color, 10%);
    }
  }

  .modal-body {
    color: @modal-body-text-color;
    text-align: left;

    > .scroll-container {
      width: 720px;

      > .viewport {
        width: 670px;
      }
    }

    &.iframe {
      overflow: hidden;
    }
  }

  .modal-footer {
    padding: 8px;
    margin-top: 10px;
    background-color: @modal-footer-bg;
    color: @modal-footer-text-color;
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }
}

.sf-modal {
  .modal-body {
    padding: 8px 12px 12px 12px;
  }
  .modal-footer:after {
    clear: both;
  }
  .modal-footer .btn {
    float: right;
    margin-left: 5px;
  }
}

.modal.modal-overflow {
  top: @grid-gutter-width;
}

#modal-popup_iframe {
  height: 100%;
  width: 100%;
  border: 0;
  display: block;
}


// All modals
// -------------------------

// This next section is needed because we're using bootstrap-modal plugin to allow for responsive sized modals. Since they
// hard code the opacity in their CSS we override it here.
.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: @modal-backdrop-opacity;
  filter: alpha(opacity=70);
  background: @modal-backdrop-bg;
}

// Fixes some appearance issues from switching standard BS modal to
// responsive bootstrap-modal.

.modal-dialog {
  margin: 0;
  width: auto;
}

.modal-content {
  border: none;
}
