From 9507fe5ec24667af891df04e748c7c8c1168403b Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Tue, 1 Aug 2017 20:20:30 -0700
Subject: [PATCH] [K7]: pretty up modals (#13276)

Makes our k7 modals a little prettier.
---
 ui_framework/dist/ui_framework.css            | 56 ++++++++++++++++---
 ui_framework/src/components/modal/_modal.scss | 21 +++++--
 .../src/components/modal/_modal_overlay.scss  |  2 +
 .../global_styling/variables/_animations.scss | 10 ++++
 4 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 062ae972092a9..0705451389411 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -1,3 +1,15 @@
+@-webkit-keyframes kuiAnimFadeIn {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@keyframes kuiAnimFadeIn {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
 /**
  * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
  *
@@ -637,6 +649,7 @@ table {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: rgba(255, 255, 255, 0.9);
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
@@ -645,14 +658,20 @@ table {
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
-  padding-bottom: 10vh; }
+  padding-bottom: 10vh;
+  -webkit-animation: kuiAnimFadeIn 150ms ease-in;
+          animation: kuiAnimFadeIn 150ms ease-in; }
 
 .kuiModal {
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   background-color: #FFF;
   border: 1px solid #D9D9D9;
   border-radius: 4px;
-  z-index: 8000; }
+  z-index: 8000;
+  padding: 32px;
+  min-width: 50%;
+  -webkit-animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
+          animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); }
 
 .kuiModalHeader {
   display: -webkit-box;
@@ -666,14 +685,17 @@ table {
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
-          align-items: center;
-  padding: 16px; }
+          align-items: center; }
+
+.kuiModalHeader__title {
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 36px; }
 
 .kuiModalBody {
-  padding: 16px; }
+  padding: 32px 0; }
 
 .kuiModalFooter {
-  padding: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -683,7 +705,27 @@ table {
       -ms-flex-pack: end;
           justify-content: flex-end; }
   .kuiModalFooter > * + * {
-    margin-left: 5px; }
+    margin-left: 16px; }
+
+@-webkit-keyframes kuiModal {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(32px);
+            transform: translateY(32px); }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); } }
+
+@keyframes kuiModal {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(32px);
+            transform: translateY(32px); }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0); } }
 
 .kuiPage {
   padding: 32px; }
diff --git a/ui_framework/src/components/modal/_modal.scss b/ui_framework/src/components/modal/_modal.scss
index b301e807962ae..0941925230990 100644
--- a/ui_framework/src/components/modal/_modal.scss
+++ b/ui_framework/src/components/modal/_modal.scss
@@ -5,34 +5,47 @@
   border: $kuiBorderThin;
   border-radius: $kuiBorderRadius;
   z-index: $kuiZModal;
+  padding: $kuiSizeXL;
+  min-width: 50%;
+  animation: kuiModal $kuiAnimSpeedSlow $kuiAnimSlightBounce;
 }
 
 .kuiModalHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $kuiSize;
 }
 
   .kuiModalHeader__title {
+    @include kuiFontSizeL;
   }
 
 .kuiModalHeaderCloseButton {
 }
 
 .kuiModalBody {
-  padding: $kuiSize;
+  padding: $kuiSizeXL 0;
 }
 
 .kuiModalBodyText {
 }
 
 .kuiModalFooter {
-  padding: $kuiSize;
   display: flex;
   justify-content: flex-end;
 
   > * + * {
-    margin-left: 5px;
+    margin-left: $kuiSize;
+  }
+}
+
+@keyframes kuiModal {
+  0% {
+    opacity: 0;
+    transform: translateY($kuiSizeXL);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
diff --git a/ui_framework/src/components/modal/_modal_overlay.scss b/ui_framework/src/components/modal/_modal_overlay.scss
index c94ad18e8a1ee..76420fa962eee 100644
--- a/ui_framework/src/components/modal/_modal_overlay.scss
+++ b/ui_framework/src/components/modal/_modal_overlay.scss
@@ -6,7 +6,9 @@
   right: 0;
   bottom: 0;
   display: flex;
+  background: transparentize($kuiColorEmptyShade, .1);
   align-items: center;
   justify-content: center;
   padding-bottom: 10vh;
+  animation: kuiAnimFadeIn $kuiAnimSpeedFast ease-in;
 }
diff --git a/ui_framework/src/global_styling/variables/_animations.scss b/ui_framework/src/global_styling/variables/_animations.scss
index b194a52a53fdb..be2292876146d 100644
--- a/ui_framework/src/global_styling/variables/_animations.scss
+++ b/ui_framework/src/global_styling/variables/_animations.scss
@@ -8,3 +8,13 @@ $kuiAnimSpeedFast: 150ms;
 $kuiAnimSpeedNormal: 250ms;
 $kuiAnimSpeedSlow: 350ms;
 $kuiAnimSpeedExtra: 500ms;
+
+
+@keyframes kuiAnimFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}