From 51e443e74ab2252df28d529e19eed3eebd099538 Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Sun, 5 Jun 2016 19:12:48 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B5=D0=BC=D0=BD=D0=BE=D0=B3=D0=BE=20?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D1=8B=20=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D0=B0=D0=BF=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/popup/popup.scss | 14 +++++++++-----
 src/pages/root/root.scss           |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/popup/popup.scss b/src/components/ui/popup/popup.scss
index f18fad6..9df9881 100644
--- a/src/components/ui/popup/popup.scss
+++ b/src/components/ui/popup/popup.scss
@@ -20,6 +20,8 @@ $popupPadding: 20px;
     overflow-x: hidden;
     overflow-y: auto;
 
+    perspective: 600px;
+
     &:before {
         content: '';
         display: inline-block;
@@ -104,12 +106,14 @@ $popupPadding: 20px;
 /**
  * Transition states
  */
+$popupInitPosition: translateY(10%) rotateX(-8deg);
+
 .trEnter {
     opacity: 0;
 
     .popup {
         opacity: 0;
-        transform: translateY(-30%);
+        transform: $popupInitPosition;
     }
 
     &Active {
@@ -118,8 +122,8 @@ $popupPadding: 20px;
 
         .popup {
             opacity: 1;
-            transform: translateY(0);
-            transition: 0.2s ease;
+            transform: translateY(0) rotateX(0deg);
+            transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
         }
     }
 }
@@ -138,8 +142,8 @@ $popupPadding: 20px;
 
         .popup {
             opacity: 0;
-            transform: translateY(30%);
-            transition: 0.2s ease;
+            transform: $popupInitPosition;
+            transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); // easeOutQuart
         }
     }
 }
diff --git a/src/pages/root/root.scss b/src/pages/root/root.scss
index 8319512..24765f4 100644
--- a/src/pages/root/root.scss
+++ b/src/pages/root/root.scss
@@ -16,7 +16,7 @@ $userBarHeight: 50px;
 
 .isPopupActive {
     filter: blur(5px);
-    transition: filter 0.4s ease;
+    transition: filter 0.4s 0.1s ease;
     overflow: hidden;
 }