Lungo.js/src/stylesheets/less/Lungo.layout.less

/**
 * Stylesheet
 *
 * @namespace LUNGO
 * @class Layout
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "mixins.less";

@defaultTrasition : @easeOutSine;
@header_footer_height: 40px;
	@header_extended_height: 74px;
@footer_toolbar_height: 48px;

/* @group <section> */
section {
	position: absolute; /* position: fixed on iOS5 & Android 4 */
	left:  0px;
	top:  0px;
	width: 100%;
	height: 100%;
	
	display: none;
	-webkit-backface-visibility: hidden;	

	&:first-child, &.show {	
		display: block;
		.transform(translate3d(0%, 0, 0)); 
	}
	&.hide { display: none; }
	
	&.slide {
		.transform(translate3d(100%, 0, 0));
		display: block;
		
		-webkit-transition: -webkit-transform 250ms @defaultTrasition;
		/*
	   -moz-transition: @keyframe @defaultTrasition;
         -o-transition: @keyframe @defaultTrasition;
            transition: @keyframe @defaultTrasition;
		*/
		
		&:first-child, &.show {	
			.transform(translate3d(0%, 0, 0)); 
		}
		&.hide { 
			.transform(translate3d(-100%, 0, 0)); 
		}
	}
	
	
	&.pop {
    	z-index: 0;
    	opacity: 0;
    	display: block;
		-webkit-transition: all 250ms @defaultTrasition;
    	.transform(scale(1.2));
		
		&:first-child, &.show {	
			z-index: 1;
			.transform(scale(1));
			opacity: 1;
		}
		&.hide { 
			z-index: 0;
			.transform(scale(0.8));
			opacity: 0;
		}
	}
	
	&.flow {
    	.transform(translate3d(100%, 0, 0) scale(0.7));
		
		&:first-child, &.show {	 -webkit-animation: flow-show 350ms 500ms @defaultTrasition forwards; }
		&.show-revoke { -webkit-animation: flow-show-revoke 350ms @defaultTrasition forwards; }
		
		&.hide { -webkit-animation: flow-hide 350ms @defaultTrasition forwards; }
		&.hide-revoke { -webkit-animation: flow-hide-revoke 350ms 500ms @defaultTrasition forwards; }
	}
}
/*
@-webkit-keyframes flow-show {
    0% { -webkit-transform: translateX(100%) scale(.7); }
    50% { -webkit-transform: translateX(0%) scale(.7);}
    100% { -webkit-transform: translateX(0%) scale(1);}
}

@-webkit-keyframes flow-show-revoke {
    0% { -webkit-transform: translateX(0%) scale(1); }
    50% { -webkit-transform: translateX(0%) scale(.7);}
    100% { -webkit-transform: translateX(100%) scale(.7);}
}

@-webkit-keyframes flow-hide {
    0% { -webkit-transform: translateX(0%) scale(1); }
    50% { -webkit-transform: translateX(0%) scale(.7); }
    100% { -webkit-transform: translateX(-100%) scale(.7); }
}

@-webkit-keyframes flow-hide-revoke {
    0% { -webkit-transform: translateX(-100%) scale(.7); }
    50% { -webkit-transform: translateX(0%) scale(.7);}
    100% { -webkit-transform: translateX(0%) scale(1);}
}
*/
/* @end */

/* @group <header> & <footer> */
header, footer  {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 38px;
	display: block;
	
	z-index: 2;
	line-height: 39px;
}

header  {
	top: 0px;
	//&.extended { height: 72px; }
	& .onleft { margin-left: 4px !important;}
	& .onright {margin-right: 4px !important;}
}

footer  {
	bottom:0px;
}

header .title, footer .title  {
	margin: 0 4px;	
	float: left;
	z-index: -1;
	font-size: 15px;
	font-weight: bold;
}


header .title {
	position: absolute;
	left: 0px;
	right: 0px;
	text-align: center;
	display: inline-block;
}

section header a.button, section footer a.button  {
	margin: 3px 1px 0px;
	/*
	&:first-of-type { margin-left: 4px; }	
	&:last-child { margin-right: 4px; }
	*/
}
/* @end */