// login flip WIP

admin-dev/themes/default/css/admin-theme.css

@@ -9565,6 +9565,44 @@ textarea {
 .ladda-button[data-size=xl] .ladda-label {
   font-size: 1.5em; }
 
+/* line 1, admin-theme/_admin-login.sass */
+.flip-container {
+  perspective: 1000; }
+
+/* line 4, admin-theme/_admin-login.sass */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+  transform: rotateY(180deg); }
+
+/* line 8, admin-theme/_admin-login.sass */
+.flip-container, .front, .back {
+  width: 420px;
+  height: 420px; }
+
+/* line 14, admin-theme/_admin-login.sass */
+.flipper {
+  transition: 0.6s;
+  transform-style: preserve-3d;
+  position: relative; }
+
+/* line 19, admin-theme/_admin-login.sass */
+.front, .back {
+  backface-visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0; }
+
+/* line 26, admin-theme/_admin-login.sass */
+.front {
+  z-index: 2; }
+
+/* line 29, admin-theme/_admin-login.sass */
+.back {
+  transform: rotateY(180deg); }
+
+/* line 32, admin-theme/_admin-login.sass */
+.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
+  transform: rotateY(180deg); }
+
 /* line 1, admin-theme/_admin-carrier-wizard.sass */
 #carrier_wizard {
   position: relative;

admin-dev/themes/default/css/admin-theme.sass

@@ -106,8 +106,8 @@ fieldset > .row
 @import "admin-theme/ladda"
 @import "admin-theme/ladda-theme"
 
-
 //page specific
+@import "admin-theme/admin-login"
 @import "admin-theme/admin-carrier-wizard"
 @import "admin-theme/admin-modules"
 @import "admin-theme/admin-dashboard"

admin-dev/themes/default/css/admin-theme/_admin-login.sass

@@ -0,0 +1,35 @@
+.flip-container
+	perspective: 1000
+
+.flip-container:hover .flipper,
+.flip-container.hover .flipper
+	transform: rotateY(180deg)
+
+.flip-container,
+.front,
+.back
+	width: 420px
+	height: 420px
+
+.flipper
+	transition: 0.6s
+	transform-style: preserve-3d
+	position: relative
+
+.front,
+.back
+	backface-visibility: hidden
+	position: absolute
+	top: 0
+	left: 0
+
+.front
+	z-index: 2
+
+.back
+	transform: rotateY(180deg)
+
+.flip-container:hover .flipper,
+.flip-container.hover .flipper,
+.flip-container.flip .flipper
+	transform: rotateY(180deg)

admin-dev/themes/default/template/controllers/login/content.tpl

@@ -31,7 +31,9 @@
 
 <div id="container">
 	<div class="row">
-		<div id="login" class="col-md-4 col-md-offset-4 panel">
+		<div id="login" class="flip-container col-md-4 col-md-offset-4 panel">
+			<div class="flipper">
+				<div class="front">
 					<h1 class="text-center">
 						<img width="40px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEycHgiIGhlaWdodD0iNzkycHgiIHZpZXdCb3g9IjAgMCA2MTIgNzkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIgNzkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjA0LDg2Yy0zNiwyMy00Nyw2MS00MiwxMjBsLTI3LDNDMTMxLDE0NywxNjEsOTgsMjA0LDg2eiBNMjQ1LDc4YzY0LDgsMTAwLDM1LDExNSwxMDVsLTE2OSwyMEMxODUsMTQwLDE5OSwxMDUsMjQ1LDc4eg0KCSBNMjgwLDY0YzcyLDAsMTIwLDI1LDEzNSwxMTJsLTI3LDNDMzc1LDExMiwzNDEsNzYsMjgwLDY0eiBNNDQyLDE3NEM0MjksNTQsMzE0LDE5LDI0MCw1NmMtODMtMi0xNDAsNzMtMTMzLDE1N2wtOTYsMTBsNTgsNTUwDQoJbDI2MS0yNmMtNDctNTMtMTAwLTEzMy0xMjQtMTUyYy0yNy0yMy0zMC0zMS0yMy00NWMxMi0xNCwyNC0xMiw0NSw0bDQ4LDM3bDcsMzZsMTQtMWwtMzctMjMxYy00LTI0LDEtMzUsMTktNDBjMTgtMiwyNyw3LDMxLDM0DQoJbDIzLDE0MWwxOC0yYy03LTUwLTMtNTcsMTctNjJjMTktMywyOCwxMCwzNSw2NGwxNy0xYy01LTUwLTEtNTcsMTktNjBjMjItMSwyNSwxMiwzMiw2NWwxNiwyYy00LTQwLTQtNTEsMTgtNTNjMjEsMCwyNSwxNCwzMSw1OA0KCWMxNSwxMDAsMTMsMTU0LTYsMTgzbDcyLTdsLTU4LTU1NUw0NDIsMTc0eiIvPg0KPC9zdmc+DQo="/>
 						PRESTASHOP
@@ -53,6 +55,7 @@
 						</ol>
 						{/if}
 					</div>
+
 					{if isset($warningSslMessage)}
 					<div class="alert alert-warning">{$warningSslMessage}</div>
 					{/if}
@@ -112,6 +115,8 @@
 						</div>
 						<input type="hidden" name="redirect" id="redirect" value="{$redirect}"/>
 					</form>
+				</div>
+				<div class="back">
 
 					<form action="#" id="forgot_password_form" method="post" class="hide">
 						<div class="alert alert-info">
@@ -149,6 +154,9 @@
 							</button>
 						</div>
 					</form>
+				</div>
+			</div>
+
 			{else}
 			<div class="col-lg-12">
 				<p>{l s='For security reasons, you cannot connect to the Back Office until after you have:'}</p>
@@ -167,6 +175,7 @@
 				</p>
 			</div>
 			{/if}
+			
 		</div>
 
 		<div class="col-md-4 col-md-offset-4">

js/login.js

@@ -74,6 +74,9 @@ function feedbackSubmit() {
 
 function displayForgotPassword() {
 	$('#error').hide();
+
+	document.querySelector("#login").toggle("flip");
+
 	$('#login_form').fadeOut('fast', function () {
 		$("#forgot_password_form").removeClass('hide').fadeIn('fast');
 		// Focus on email address forgot field