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

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

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

nav {
	height: auto;
	text-align: center;

	& a {
		padding: 0 6px;
		min-width: 28px;
		z-index: 1000;
		float: left;

		& .icon {
			position: relative;
			top:  3px;
		    font-size: 24px;
		    display: inline-block;
		}

		& img {
    		width: 16px;
    		height: 16px;
    		top: -1px !important;
		}

		& abbr {
    		position: relative;
			display: inline;
			font-weight: bold;
		}
	}

	& .bubble {
    	position: relative;
	    top:  -8px;
	    left: -8px;
	    margin-right: -20px;
	}
}

header, footer {
	&:not(.toolbar) nav .icon ~ abbr { margin-left: 6px; }
}

.toolbar {
	height:  40px;

	& nav {
		margin: 2px;
		display: block;
	}

	& a {
		padding: 0;
		height:  36px;
	}
	
	&.with-labels {
		height: @with-labels-height;

		& a { height:  47px; }
		& .icon { padding-bottom: 12px; }
	}

	& .icon {
    	display: block;
    	top:  0px;
    	font-size: 34px;
    	line-height: 34px;
	}

	& .bubble {
    	top:  -44px;
	    left: 4px;
	}

	& abbr {
		position: absolute;
		top: 32px;
		width: inherit;
    	height: 14px;
		margin-left: 0px;
    	display: block !important;

    	font-size: 11px;
    	line-height: 14px;

    	overflow: hidden;
   		white-space: nowrap;
  		text-overflow: ellipsis;
	}
}

.groupbar {
	position: absolute;
	top: 43px;
	height: 28px;
	display: block;
	width: 100%;
	padding: 4px 0 2px;
 	display: block;
    line-height: 28px;
    z-index: 2;

    & a { padding: 0px; font-weight: bold;}
}