/*

Copyright 2008-2018 Clipperz Srl

This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.

* Clipperz is free software: you can redistribute it and/or modify it 
  under the terms of the GNU Affero General Public License as published 
  by the Free Software Foundation, either version 3 of the License, or 
  (at your option) any later version.

* Clipperz is distributed in the hope that it will be useful, but 
  WITHOUT ANY WARRANTY; without even the implied warranty of 
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public
  License along with Clipperz. If not, see http://www.gnu.org/licenses/.

*/

//	https://github.com/h5bp/Effeckt.css
//	http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/

$transition-duration: 0.5s;

@mixin pageElement () {
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

	@include transform3d(0, 0, 0);
	@include transition-duration($transition-duration);

	&.left {
		@include transform3d(-100%, 0, 0);
	}

	&.right {
		@include transform3d(100%, 0, 0);
		visibility: hidden;
		display: none;
		
		&.transition {
			visibility: visible;
			display: block;
		}
	}
}

//=============================================================================

@mixin sliding-panel-left ($size) {
//	background-color: yellow;

	width: $size;
	height: 100%;
	
	top: 0;
	left: -$size;
	transition: left 0.3s ease-in-out;
}

@mixin sliding-panel-right ($size) {
//	background-color: green;

	width: $size;
	height: 100%;

	top: 0;
	right: -$size;
	transition: right 0.3s ease-in-out;
}

@mixin sliding-panel ($side, $size) {
	position: fixed;
	z-index: 20;
//	@include overflow-auto;

	@if $side == left {
		@include sliding-panel-left($size);
	}

	@if $side == right {
		@include sliding-panel-right($size);
	}
}

//.............................................................................

@mixin sliding-panel-open ($side, $size) {
	@if $side == left {
		left: 0px;
	}

	@if $side == right {
		right: 0px;
	}
}

//.............................................................................

@mixin sliding-panel-wrapper-open-left ($size) {
	top: 0;
	left: $size;
//	transition: left 0.3s ease-in-out;
}

@mixin sliding-panel-wrapper-open-right ($size) {
	top: 0;
	right: $size;
//	transition: right 0.3s ease-in-out;
}

@mixin sliding-panel-wrapper-open ($side, $size) {
	@include sliding-panel-wrapper();
	
	@if $side == left {
		@include sliding-panel-wrapper-open-left($size);
	}

	@if $side == right {
		@include sliding-panel-wrapper-open-right($size);
	}
}

//.............................................................................

@mixin sliding-panel-wrapper () {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 10;
//	top: 0;
//	left: 0;
//	@include transition(all, $transition_time);
}

@mixin sliding-panel-container () {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

//#############################################################################






















/*
.registrationForm {
	.steps {
		.step {
			position: absolute;

//			top: 0;
//			left: 0;
//			width: 100%;
//			height: 100%;

			.slide();
		}
	}
}
*/

//----------------------------------------------------------------------
//	tentative 3D transformations
/*
.page {
	transform: rotateY(   0deg) translateZ( 100px);

	&.left {
 		transform: rotateY( -90deg) translateZ( 100px);
	}

	&.center {
		transform: rotateY(   0deg) translateZ( 100px);
	}

	&.right {
 		transform: rotateY(  90deg) translateZ( 100px);
 	}
}

#mainDiv {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;

	transition: transform 3s;

	&.show-front  { transform: translateZ( -100px ) rotateY(    0deg ); }
	&.show-back   { transform: translateZ( -100px ) rotateX( -180deg ); }
	&.show-right  { transform: translateZ( -100px ) rotateY(  -90deg ); }
	&.show-left   { transform: translateZ( -100px ) rotateY(   90deg ); }
	&.show-top    { transform: translateZ( -100px ) rotateX(  -90deg ); }
	&.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); }
}
*/
//=======================================================================


//=======================================================================


//=======================================================================
