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)); }
}
/* @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; }
}

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 0 0 1px;
	&:first-of-type { margin-left: 4px; }	
	&:last-child { margin-right: 4px; }
}
/* @end */