slide up/down animations for "modal" style pages

src/popup/less/animations.less

@@ -0,0 +1,51 @@
+.in-slide-up {
+    .main-view.ng-enter,
+    .main-view.ng-leave {
+        -webkit-transition: all 0.4s ease;
+        transition: all 0.4s ease;
+    }
+
+    .main-view.ng-enter {
+        top: 100%;
+        z-index: 990;
+    }
+
+    .main-view.ng-enter.ng-enter-active {
+        top: 0;
+    }
+
+    .main-view.ng-leave {
+        top: 0;
+        z-index: 970;
+    }
+
+    .main-view.ng-leave.ng-leave-active {
+        top: 0;
+    }
+}
+
+.out-slide-down {
+    .main-view.ng-enter,
+    .main-view.ng-leave {
+        -webkit-transition: all 0.4s ease;
+        transition: all 0.4s ease;
+    }
+
+    .main-view.ng-enter {
+        top: 0;
+        z-index: 970;
+    }
+
+    .main-view.ng-enter.ng-enter-active {
+        top: 0;
+    }
+
+    .main-view.ng-leave {
+        top: 0;
+        z-index: 990;
+    }
+
+    .main-view.ng-leave.ng-leave-active {
+        top: 100%;
+    }
+}

src/popup/less/popup.less

@@ -1,6 +1,7 @@
 @import "../../../node_modules/bootstrap/less/bootstrap.less";
 @import "variables.less";
 @import "components.less";
+@import "animations.less";
 
 body {
     width: 320px;
@@ -8,6 +9,13 @@ body {
     background-color: @background-color;
 }
 
+.main-view {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 980;
+}
+
 .content {
     position: absolute;
     top: 44px;
@@ -15,6 +23,7 @@ body {
     left: 0;
     right: 0;
     overflow: auto;
+    background-color: @background-color;
 
     &.content-tabs {
         bottom: 55px;