CSS/Sass Modal Dialog

gistfile1.sass

<!-- HTML -->
<div class="modal-dialog-background">
  <div class="modal-dialog">
    <h1>Submit</h1>
    <div class="inner-wrapper">
      <p>Press submit to record your answers.</p>
    </div>
    <div class="buttons">
      <button type="button" class="cancel">Cancel</button>
      <button type="button" class="submit">Submit</button>
    </div>
  </div>
</div>
<!-- END HTML -->

/**** CSS ***/
@mixin vertically-and-horizontally-centered ( $height, $width ) {
  left: 50%;
  margin-left: -$width / 2;
  margin-top: -$height / 2;
  min-height: $height;
  min-width: $width;
  position: fixed;
  top: 35%;
}

// Draw transparent black background
div.modal-dialog-background {
  @include animation(fadein 0.4s);
  background-color: transparent;
  height: 100%;   // Fixes background display on iPad
  left: 0;
  position: fixed;
  @include radial-gradient(50% 40%, circle cover, hsla(0, 0%, 0%, 0.20) 20%, hsla(0, 0%, 0%, 0.25) 35%, hsla(0, 0%, 0%, 0.7) 100%);
  top: 0;
  width: 100%;
  z-index: 9998;

  //iPad [portrait + landscape] - Fix background not covering entire document on scroll
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    background: hsla(0, 0%, 0%, 0.4); // remove gradient
    height: 200%;
  }
}

div.modal-dialog {
  $dialog-width: 500px;
  @extend .animation-zoom-in;    // Animation-keyframes
  background: hsl(0, 0%, 100%);
  @include border-radius(5px);
  border: 1px solid darken($base-border-color, 10%);
  @include box-shadow(0 6px 26px 0 hsla(0%, 0%, 0%, 0.75));
  padding: 0;
  @include vertically-and-horizontally-centered(100px, $dialog-width);
  width: $dialog-width;
  z-index: 9999;
  
  h1 {
    @extend .dialog-header;
  }

  div.inner-wrapper {
    padding: 18px;
    padding-bottom: 15px;

    p {
      font-family: $base-font-family;
    }
  }

  div.buttons {
    padding: 10px 20px 12px;
    background-color: hsl(0, 0%, 93%);
    @include border-bottom-radius(5px);
    border-top: 1px solid hsl(0, 0%, 80%);

    button {
      font-size: 16px;
      @include inline-block;
      margin-top: 20px;
      margin: 0;
    }

    button.submit {
      float: right;
    }
  }

}

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
  div.modal-dialog {
    $dialog-width: 300px;
    margin-top: 0;
    top: 20px;
    @include vertically-and-horizontally-centered(100px, $dialog-width);
    width: $dialog-width;

    button, button.submit, button.cancel {
      width: auto;
      font-size: 15px;
      padding-left: 1em;
      padding-right: 1em;
    }
  }

  div.buttons {
    @extend .clearfix;

    button, .button, input[type="submit"] {
      font-weight: bold;
    }
  }
}
/**** END CSS ***/