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

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

@import "constants.less";
@import "mixins.less";

/* @group <section> */
html {
    overflow: hidden;
}

section {
	position: absolute; /* position: fixed on iOS5 & Android 4 */
	left:  0px;
	top:  0px;
	width: 100%;
	height: 100%;
	z-index: 0;
	
	display: none;
	visibility: hidden;
	.transition(all 250ms @defaultTrasition);
	-webkit-backface-visibility: hidden;
	
	&:first-child, &.show {	
		z-index: 1;
		display: block;
		visibility: visible;
	}
	&.hide { 
		z-index: 0;
		display: none;
		visibility: hidden;
	}
	
	&.slide, &.pop { display: block !important; }
	
	&.slide {
		.transform(translate(100%, 0));
		visibility: visible !important;
		
		&:first-child, &.show {	.transform(translate(0%, 0)); }
		&.hide { .transform(translate(-100%, 0)); }
	}
		
	&.pop {
    	opacity: 0;
    	.transform(scale(1.15));
    	
		&:first-child, &.show {	
			.transform(scale(1));
			opacity: 1;
		}
		&.hide { 
			.transform(scale(0.9));
			opacity: 0;
		}
	}
}
/* @end */

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

	line-height: @header-height;
	overflow: hidden;	
}

header  {
	top: 0px;
	
	& .title {
		margin-left: 4px;
		float: left;
		z-index: -1;
		font-size: 15px;
		font-weight: bold;
		
		&.centered {
			position: absolute;
			left: 0px;
			right: 0px;
			text-align: center;
			display: inline-block;
		}
		&.with-subtitle {
			line-height: 20px;
			padding-top: 4px;
		}
	}
	
	& .subtitle {
		margin-left: 4px;
		display:block;
		font-size: 11px;
		line-height: 11px;
		width: 100%;
	}
}

footer  { bottom: 0px; }
/* @end */