commit 98e66604c4e83b98c9630f2faf894f254baa890e
author Michael Davis <michael.s.davis@ibm.com> Mon Aug 28 18:37:52 2017 -0500
committer Adriana Kobylak <anoo@us.ibm.com> Mon Oct 09 14:43:39 2017 -0500
tree 7929cfa9cac37aef846b07b37c940afef678c01c
parent 9632d71c43a88cda4795ca7b3ff4fd85add9b843

changed modal behavior to animate/slide in from topand fixed overlay to fade in/out.

Change-Id: I9942715f424b0e79196916551d161ccdbf94b7bf
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

app/common/styles/elements/modals.scss

diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 299dfb1..8c24e02 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -1,19 +1,21 @@
 .modal-overlay {
   width:100%;
   height:100%;
-  z-index:100;
+  z-index:-1;
   background-color:#000;
-  opacity:0.5;
+  opacity:0;
   position:fixed;
   top:0;
   left:0;
-  display:none;
   margin:0;
   padding:0;
+  @include fastTransition-all;
 }
 
 .modal-overlay.active{
-  display: block;
+  z-index:100;
+  opacity: .5;
+  @include fastTransition-all;
 }
 
 .modal {
@@ -25,10 +27,9 @@
   background-color:#fff;
   z-index:101;
   position:fixed;
-  top:25%;
+  top:-100%;
   left:25%;
   overflow: hidden;
-  display:none;
   @include fastTransition-all;
   @include mediaQuery(medium) {
     padding: 2.5em;
@@ -36,7 +37,8 @@
 }
 
 .modal.active{
-  display: block;
+  top: 25%;
+  @include fastTransition-all;
 }
 
 .modal .page-header {