Add new login animation

dev/Styles/Login.less

@@ -136,3 +136,43 @@
 		outline: none;
 	}
 }
+
+@keyframes loginRotation {
+	to   {transform: rotate(1turn);}
+}
+
+.submitting-pane {
+	position: relative;
+	&.submitting {
+		&:before{
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: transparent;
+			background: rgba(0,0,0,.3);
+			z-index: 1051;
+			border-radius: 8px;
+		}
+		&:after{
+			content: '';
+			position: absolute;
+			width: 60px;
+			height: 60px;
+			top: 50%;
+			left: 50%;
+			margin-top: -30px;
+			margin-left: -30px;
+
+			border: 8px solid transparent;
+			border-color: transparent;
+			border-top-color: #fff;
+			animation: loginRotation 1s infinite ease-in-out;
+
+			border-radius: 50%;
+			z-index: 1052;
+		}
+	}
+ }

rainloop/v/0.0.0/app/templates/Themes/template.less

@@ -64,6 +64,16 @@
 	.thm-linear-gradient-mixin(@login-gradient-start, @login-gradient-end);
 	.thm-border-radius(@login-border-radius);
 	.thm-box-shadow(@login-box-shadow);
+
+	&.submitting-pane.submitting {
+		&:before{
+			background: @spinner-background;
+			.thm-border-radius(@login-border-radius);
+		}
+		&:after{
+			border-top-color: @spinner-color;
+		}
+	}
 }
 
 .thm-login-text {

rainloop/v/0.0.0/app/templates/Themes/values.less

@@ -21,6 +21,9 @@
 @powered-color: #333;
 @languages-color: #333;
 
+@spinner-background: rgba(0,0,0,.3);
+@spinner-color: #fff;
+
 // MENU
 @dropdown-menu-color: #333;
 @dropdown-menu-background-color: #fff;

rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html

@@ -5,7 +5,8 @@
 				<button type="button" class="close" data-bind="click: function () { submitError('') }">&times;</button>
 				<span data-bind="text: submitError"></span>
 			</div>
-			<form class="wrapper loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError}">
+			<div class="wrapper-parent">
+				<form class="wrapper submitting-pane loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
 					<div class="controls" data-bind="css: {'error': loginError, 'animated': loginErrorAnimation}">
 						<div class="input-append">
 							<input type="text" class="input-block-level inputLogin checkAutocomplete"
@@ -32,11 +33,11 @@
 					</div>
 					<div class="controls">
 						<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
-						<i class="icon-spinner animated" data-bind="visible: submitRequest"></i>
+							<span data-i18n="LOGIN/BUTTON_LOGIN"></span>
-						<span data-bind="visible: !submitRequest()" data-i18n="LOGIN/BUTTON_LOGIN"></span>
 						</button>
 					</div>
 				</form>
+			</div>
 			<div class="e-powered thm-powered" data-bind="visible: logoPowered">
 				Powered by <a href="http://www.rainloop.net" target="_blank">RainLoop</a>
 			</div>

rainloop/v/0.0.0/app/templates/Views/User/Login.html

@@ -23,7 +23,7 @@
 				<div class="wrapper loginWelcomeForm thm-login-text" data-bind="css: {'welcome-on': welcome}">
 					<!-- ko template: { name: 'LoginWelcome' } --><!-- /ko -->
 				</div>
-				<form class="wrapper loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'welcome-off': welcome}">
+				<form class="wrapper submitting-pane loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'welcome-off': welcome, 'submitting': submitRequest()}">
 					{{INCLUDE/TopControlGroup/PLACE}}
 					<div class="controls plugin-mark-Login-TopControlGroup" data-bind="css: {'error': emailError, 'animated': emailErrorAnimation}">
 						<div class="input-append">
@@ -72,8 +72,7 @@
 					{{INCLUDE/BottomControlGroup/PLACE}}
 					<div class="controls">
 						<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand, hasFocus: submitFocus">
-							<i class="icon-spinner animated" data-bind="visible: submitRequest"></i>
+							<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN"></span>
-							<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN" data-bind="visible: !submitRequest()"></span>
 						</button>
 					</div>
 					<div class="controls clearfix" style="margin-bottom: 20px">

rainloop/v/0.0.0/themes/Clear/styles.less

@@ -0,0 +1,3 @@
+
+@spinner-background: rgba(255,255,255,.5);
+@spinner-color: #666;

rainloop/v/0.0.0/themes/Mobile/styles.less

@@ -0,0 +1,3 @@
+
+@spinner-background: rgba(255,255,255,.5);
+@spinner-color: #666;

rainloop/v/0.0.0/themes/Squares/styles.less

@@ -15,6 +15,8 @@
 @login-border: none;
 @login-border-radius: 7px;
 
+@spinner-background: rgba(0,0,0,.2);
+
 // MENU
 @dropdown-menu-color: #333;
 @dropdown-menu-background-color: #fff;

rainloop/v/0.0.0/themes/Wood/styles.less

@@ -15,6 +15,9 @@
 @login-border: none;
 @login-border-radius: 7px;
 
+@spinner-background: rgba(255,255,255,.5);
+@spinner-color: #666;
+
 // MENU
 @dropdown-menu-color: #333;
 @dropdown-menu-background-color: #fff;