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

/**
 * Stylesheet
 *
 * @namespace LUNGO.Layout
 * @class Aside
 *
 * @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 <aside> */
section.aside {
	.transform(translate3d(256px, 0, 0));
	&.onright { .transform(translate3d(-256px, 0, 0)); }
}

aside {
	position: absolute;
	width: inherit;
	height: inherit;
	top: 0px;
	visibility: hidden;
	z-index: 0;

	width: 256px;
	max-width: 256px;
	
	&.onright { right: 0px; }
	&.current { visibility: visible;} 
}

header:not(.extended) ~ aside { top: @header_footer_height; }    
header.extended ~ aside { top: @header_extended_height; }        
footer ~ aside { 
    bottom: @header_footer_height; 
    height: auto; 
}
    footer.toolbar ~ aside { bottom: @footer_toolbar_height; }

aside ~ article {
    .transform(translate3d(0px, 0, 0));
    -webkit-transition: -webkit-transform 250ms @defaultTrasition;
}

aside .title, aside a, aside .anchor {    
	padding: 0 6px;
}

aside .title {    
    line-height: 40px;
    font-size: 15px;
    font-weight: bold;
	height: 40px;
}

aside a {
	display: block;
	width: 244px;
	height: 40px;

	font-size: 15px;
	line-height: 40px;
	overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
}


	aside .bubble {
    	float: right;
    	font-size: 11px;
    }

aside a .bubble, aside .title .bubble {
	margin-top: 13px;
}

aside .anchor .bubble {
    margin-top: 2px;
}
	
	aside .icon {
		width: 24px;
		float: left;
		margin: 8px 4px 0 0;
	
		font-size: 24px;
		line-height: 24px;
	    text-align: center;		    
	}
	aside .anchor {
		font-weight: bold;
		line-height: 19px;
	}

	@media handheld, only screen and (min-width: 768px) {
		[data-target="aside"] { display: none !important; }
		
		section {
			width: auto !important;
	    	left: 256px;
	    	right:  0px !important;
	    	-webkit-transition: none;

	    	&.hide {
    			z-index: -1;
			}
		}
	}
/* @end */