WIP login Ui: add motion into apps list

api/src/Framework/Login.php

@@ -315,13 +315,14 @@ class Login
 		}
 		$data = json_decode($json, true);
 		$nodes = '';
+		$counter = 1;
 		if (is_array($data))
 		{
 			foreach ($data['apps'] as $app)
 			{
 				$icon = strpos($app['icon'], "/") === 0 ? $GLOBALS['egw_info']['server']['webserver_url'].$app['icon'] : $app['icon'];
 				$title = lang($app['title']);
-				$nodes .= '<div class="app">'
+				$nodes .= '<div class="app" style="animation:login-apps '.$counter*0.1.'s ease-out">'
 					.'<img class="icon" src="'.htmlspecialchars($icon).'"/>'
 					.'<div class="tooltip">'
 					.'<div class="content">'
@@ -330,6 +331,7 @@ class Login
 					.'<img class="icon-bg" src="'.htmlspecialchars($icon).'"/>'
 					.'<p>'.htmlspecialchars($app['desc']).'</p><div class="arrow"></div>'
 					.'</div></div></div>';
+				$counter++;
 			}
 		}
 		return $nodes;

pixelegg/css/mobile.css

@@ -1896,6 +1896,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */

pixelegg/css/monochrome.css

@@ -1876,6 +1876,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */

pixelegg/css/pixelegg.css

@@ -1886,6 +1886,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */

pixelegg/less/layout_loginPage.less

@@ -16,6 +16,12 @@
 
 @import "def_colors.less";
 
+
+@keyframes login-apps {
+	0% {transform: translateY(30px)}
+	60%{transform:translateY(45px)}
+	100% {transform: none}
+}
 /**
  * 19.1 Login page with stock background image
  */

pixelegg/mobile/fw_mobile.css

@@ -1907,6 +1907,17 @@ body {
  * @package pixelegg
  * @version $Id$
  */
+@keyframes login-apps {
+  0% {
+    transform: translateY(30px);
+  }
+  60% {
+    transform: translateY(45px);
+  }
+  100% {
+    transform: none;
+  }
+}
 /**
  * 19.1 Login page with stock background image
  */