Lungo2.0.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> */
section {
	position: absolute; /* position: fixed on iOS5 & Android 4 */
	left:  0px;
	top:  0px;
	width: 100%;
	height: 100%;
	z-index: 0;
	
	display: block;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	
	&:first-child, &.show {	
		z-index: 1;
		//display: block;
		visibility: visible;
	}
	&.hide { 
		z-index: 0;
		//display: none;
		visibility: hidden;
	}
	
	&.slide {
		.transform(translate(100%, 0));
		//display: block;
		visibility: visible !important;
		
		-webkit-transition: -webkit-transform 250ms @defaultTrasition;
		/*
	   -moz-transition: @keyframe @defaultTrasition;
         -o-transition: @keyframe @defaultTrasition;
            transition: @keyframe @defaultTrasition;
		*/
		
		&:first-child, &.show {	.transform(translate(0%, 0)); }
		&.hide { .transform(translate(-100%, 0)); }
	}
	
	
	&.pop {
    	opacity: 0;
		-webkit-transition: all 250ms @defaultTrasition;
    	.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;
	& .onleft { margin-left: 4px !important;}
	& .onright {margin-right: 4px !important;}
}

footer  { bottom: 0px; }

header .title, footer .title  {
	margin: 0 4px;	
	z-index: -1;
	font-size: 15px;
	font-weight: bold;
	display:block;
	
	&.centered {
		position: absolute;
		left: 0px;
		right: 0px;
		text-align: center;
		display: inline-block;
	}
}

.with-subtitle {
	line-height: 20px;
	padding-top: 4px;
}

.subtitle {
	display:block;
	font-size: 11px;
	line-height: 11px;
}

/*.title > .subtitle {
	//line-height: 21px;
	font-weight: normal;
	font-size: 12px;
	height: 12px;
	line-height: 12px;
}*/

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