Modal

[roomfive]

Preview:

---

Animation:

Perhaps we could play with a subtle animation on load of the modal (also upon exiting it)... Maybe the purple overlay fades in quick, then after a very short delay the modal loads (zoomIn). Done a quick demo here: https://codepen.io/roomfive/pen/WGLdBP

---

CSS:

/* Modal (outer container) */
min-width: 500px;
border-radius: 10px;
background-color: $white;
box-shadow: 0 0 50px 0 rgba(0,0,0,0.1);
padding: 40px 40px 0 40px;

/* Header (above frame) */
font: $bold3;
margin-bottom: 30px;

/* Frame (inner container) */
border: 1px dashed $gray300;
border-radius: 2px;
padding: 30px;

/* Buttons (below frame) */
margin: 30px 0;

/* Fullscreen overlay */
opacity: 0.94;
Background-color: $purple100;

---

Spec:

---

Also see related issue: 'Tabs in a modal' #41