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%;
	z-index: 1;
	
	.transform(translate3d(100%, 0, 0));
	-webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform 250ms @defaultTrasition;	
	
	&:first-child, &.show {	.transform(translate3d(0%, 0, 0)); }
	&.hide { .transform(translate3d(-100%, 0, 0)); }
	
	&.pop {
    	.transform(scale(0.5));
    	opacity: 0;
		-webkit-transition: all 250ms @defaultTrasition;
		
		&:first-child, &.show {	
			.transform(scale(1));
			opacity: 1;
		}
		&.hide { 
			.transform(scale(1.2));
			opacity: 0;
		}
	}
}
/* @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 */