/*doc
---
title: Modal
name: modal
category: JavaScript

---
```html_example
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <i class="fa fa-thumbs-up header-icon"></i>
        <h1 class="modal-title">Modal header that is getting crazy long and you’ll never expect what happenes next.</h1>
      </div>
      <div class="modal-body">
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          This is a message in a modal. It explains the action you are about to take and it can be pretty serious. This is a message in a modal.
          It explains the action you are about to take and it can be pretty serious. You know what I’m sayin’?
        </p>
        <p>
          <button class="btn btn-default btn-facebook btn-wide"><i class="fa fa-facebook"></i> My Facebook button</button>
        </p>
        <p class="footnote">
          * This is a footnote in a modal. It explains in a small text, less focused about the next step you're going to take and it can be pretty serious.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myAvatarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="header-icon avatar-large">
          <div class="avatar-name">
            A
          </div>
        </div>
        <h1 class="modal-title">Avatar Modal Name.</h1>
      </div>
      <div class="modal-body">
        <p>
          This is a message in a modal.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myAvatarModal">
  Avatar Modal
</button>

<div class="modal fade" id="myImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="header-icon">
          <img src="https://res.cloudinary.com/mndx/image/upload/c_limit,w_600/tqrjlmxpvanmt4r0ympg" />
        </div>
        <h1 class="modal-title">Icon Modal</h1>
      </div>
      <div class="modal-body">
        <p>
          This is a message in a modal.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myImageModal">
  Icon Modal
</button>

<div class="modal fade" id="myFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h1 class="modal-title">Form Modal</h1>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="control-label">Input</label>
          <input class="form-control form-control" label="Message" type="text"></textarea>
        </div>
        <div class="form-group">
          <label class="control-label">Message</label>
          <textarea class="form-control form-control" rows="4" label="Message" type="textarea"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary"
          data-dismiss="modal">Primary Action</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">
  Form Modal
</button>


```
*/
$modal-backdrop-color: rgba(0, 0, 0, 0.3);
$modal-margin: 50px;
$modal-widht: 520px;
$modal-font-size-header: ceil(($font-size-base * 1.75)); // ~28px;
$modal-icon-size: 60px;

.modal-backdrop {
  background: $modal-backdrop-color;
  border: 0;
  bottom: 0;
  position: fixed;
}

.modal-dialog {
  height: 100%;
  margin: 0;
  overflow: hidden;

  @media screen and (min-width: $screen-sm) {
    height: auto;
    margin: $space auto;
    max-width: $modal-widht;
  }

  .footnote {
    color: $gray-light;
    font-size: $font-size-smaller;
  }
}

.modal-content {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  height: 100%;
  overflow: scroll;
  padding: $space-larger $modal-margin $modal-margin;
  position: relative;

  @media screen and (min-width: $screen-sm) {
    border-radius: 6px;
    height: auto;
    overflow: hidden;
  }

  .close {
    position: absolute;
    right: $gutter-vertical-half;
    top: $gutter-vertical-half;
  }
}

.modal-header {
  padding: 0;
  text-align: center;

  .modal-title {
    @extend .h1;

    font-size: $modal-font-size-header;
    font-weight: 700;
    margin: 0 0 $space-large;
    text-align: center;
  }

  a {
    text-decoration: underline;
  }

  .header-icon {
    color: $brand-primary;
    font-size: $modal-icon-size;
    margin: 0 0 $space-large;

    img {
      max-width: 210px;
    }
  }
}

.modal-body {
  padding: 0 0 $space-larger;

  h2,
  p {
    margin-bottom: $space-large;
    text-align: center;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .form-group:last-child {
    margin-bottom: 0;
  }
}

.modal-footer {
  padding: 0;
  text-align: center;

  .btn {
    margin-bottom: $space-large;

    @media screen and (min-width: $screen-sm) {
      margin-bottom: 0;
    }

    &:first-child {
      margin-left: 0;
    }

    // // Override bootstrap, we want some space between 2 buttons
    + .btn {
      margin-bottom: $space-large;
      margin-left: $space-large;

      @media screen and (min-width: $screen-sm) {
        margin-bottom: 0;
      }
    }
  }
}

@media screen and (min-width: $screen-sm) {
  .modal {
    text-align: center;

    &::before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    &-dialog {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
  }
}