Style fixes

front/core/styles/animations.scss

@@ -0,0 +1,30 @@
+
+@keyframes nothing {}
+@keyframes slideIn {
+    from {
+        transform: translate3d(-2em, 0, 0);
+        opacity: 0;
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+@keyframes amplify {
+    from {
+        opacity: 0;
+        transform: scale3d(0, 0, 0);
+    }
+    to {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

front/core/styles/index.js

@@ -1,3 +1,4 @@
+import './animations.scss';
 import './background.scss';
 import './border.scss';
 import './font-family.scss';

front/salix/components/app/app.html

@@ -1,4 +1,9 @@
-<vn-layout ng-if="$ctrl.showLayout"></vn-layout>
+<vn-layout
-<ui-view name="login"></ui-view>
+    ng-if="$ctrl.showLayout">
+</vn-layout>
+<ui-view
+    name="login"
+    ng-if="!$ctrl.showLayout">
+</ui-view>
 <vn-snackbar vn-id="snackbar"></vn-snackbar>
 <vn-debug-info></vn-debug-info>

front/salix/components/app/style.scss

@@ -7,15 +7,11 @@ vn-app {
     ui-view {
         display: block;
         box-sizing: border-box;
+        height: inherit;
 
         &.ng-enter {
-            transition: all 200ms ease-out;
+            animation-name: nothing, slideIn;
-            transform: translate3d(-2em, 0, 0);
+            animation-duration: 400ms, 200ms;
-            opacity: 0;
-        }
-        &.ng-enter.ng-enter-active {
-            transform: translate3d(0, 0, 0);
-            opacity: 1;
         }
     }
 }

front/salix/components/layout/style.scss

@@ -87,16 +87,24 @@ vn-layout {
         padding-top: $topbar-height;
     }
     ui-view {
-        height: inherit;
-
         & > * {
             display: block;
             padding: $spacing-md;
         }
+        &.ng-enter {
+            vn-side-menu {
+                opacity: 0;
+                animation: fadeIn 200ms ease-out 200ms;
+            }
+            [fixed-bottom-right] {
+                opacity: 0;
+                animation: amplify 200ms ease-out 200ms;
+            }
+        }
     }
     @media screen and (max-width: $mobile-width) {
         & > vn-topbar {
-            & > .show-menu {
+            .show-menu {
                 display: block;
             }
         }

front/salix/components/side-menu/side-menu.js

@@ -33,7 +33,7 @@ export default class SideMenu extends Component {
             this.layout.rightMenu = null;
             this.layout.element.classList.remove('right-menu');
         } else {
-            // this.layout.leftMenu = null;
+            this.layout.leftMenu = null;
             this.layout.element.classList.remove('left-menu');
         }