generator-xweb/app/templates/vendors/todo/less/app.nav.less

Scaffold out a front-end rest web app, user bower and npm at same time

/*primary nav*/
.nav-bar{
	position: relative;
	> .btn{
		position: absolute;
		font-size: 1.3em;
		padding: 9px 12px;
		line-height: 30px;
	}
	.nav-brand + .btn{
		right: 0;
		top:0;
	}
}

.nav-brand{
	text-align: center;
	font-size: 25px;
	line-height: 50px;
	display: block;
	&:hover{
		text-decoration: none;
	}
	img{
		max-height: 20px;
		margin-top: -7px;
		vertical-align: middle;
	}
}

.nav-msg{
	position: absolute;
	z-index: 1000;
	top:10px;
	right:10px;	
	padding: 5px;
	.dropdown-menu{
		top:-13px;
		margin-left: 9px;
		width: 300px;
	}
	.arrow.left{
		top: 25px;
	}
}

.nav-user{
	padding: 10px 15px;
	a:focus{
		outline: 0;
	}
}

.nav-primary {	
	.clearfix();
	li {
		line-height: 1.5;
		a i{
			margin-right: 0.5em;
			font-size: 14px;
		}
	}
	> ul {
		> li {
			> a{
				padding:15px 15px;
				position: relative;
				font-weight: bold;
				text-shadow: 0 1px 1px rgba(0,0,0,0.2);
				border-bottom: 1px solid rgba(0,0,0,0.05) !important;
				border-top: 1px solid rgba(255,255,255,0.05) !important;
				transition:color .3s ease-in-out 0s;
				.no-borders & {
					border-width: 0 !important;
				}
				> .badge{
					font-size: 11px;
					padding: 3px 6px;
				}
				.bg-light & {
					text-shadow: 0 1px 1px #fff;
					&:hover{
						background-color: @brand-dark !important;
					}
				}
				// &:before{
				// 	position: absolute;
				// 	left: 0;
				// 	width: 100%;
				// 	top: 0;
				// 	bottom: 0;
				// 	background-color: rgba(0,0,0,0.05);
				// 	content:"";
				// 	-webkit-transition: -webkit-transform 0.2s ease;
				// 	-moz-transition: -moz-transform 0.2s ease 0s;
				// 	transition: transform 0.2s ease 0s;
				// 	.transition-delay(0s);
				// 	.translate3d(-100%, 0px, 0px);
				// 	.backface-visibility(hidden);
				// }
			}
			&:first-child{
				> a{
					border-top-width: 0;
				}
			}
			&.dropdown-submenu:hover > a,
			&.dropdown-submenu:focus > a,
			> a:hover,
			> a:focus,
			> a:active,
			&.active > a {
				color: #fff;
				background-color: inherit;
				background-color: rgba(0,0,0,0.075) !important;
				text-shadow: none;
				// &:before{
				// 	.translate3d(0%, 0px, 0px);
				// }
			}
			.bg-light &{
				&.dropdown-submenu:hover > a,
				&.dropdown-submenu:focus > a,
				&.active > a {
					background-color: @brand-dark !important;
				}
			}
			&.dropdown-submenu {
				> a:after{
					display:none;
				}
			}
			> .dropdown-menu{
				border-radius: 0;
			}
		}
	}
}

@media (min-width: 768px) {
	#nav{
		z-index: 1000;
		.transition(width .25s);
		.backface-visibility(hidden);
		.nav-avatar{
			.thumb-sm{
				width: 30px;
			}
			.arrow{
				left: 15px;
			}
		}
		> .vbox > .footer {
			box-shadow: inset 0 1px 0 rgba(40,50,60,0.15);
		}
	}
	#nav.nav-vertical {
		width: 80px;
		&.only-icon{
			width: 60px;
			.nav-primary{
				> ul {
					> li {
						> a {
							i{
								margin: 5px 0;
							}
							span{
								display: none;
							}						
						}
					}
				}
			}
			.nav-avatar{
				.arrow{
					left: 12px !important;
				}
			}
		}
		.nav-avatar{
			.caret{
			 	display: none;
			}
			> .thumb-sm{
				width: 100%;
			}
			.arrow{
				left: 27px !important;
			}
		}
		.nav-msg{
			top:5px;
			.arrow.left{
				top: 20px;
			}
			.dropdown-menu{
				top: -8px;
			}
		}
		.nav-brand{
			font-size: 20px;
			padding-left: 0;
			padding-right: 0;
		}
		.nav-primary{
			> ul {
				> li {
					> a {
						position: relative;
						padding: 12px 0;
						font-size: 11px;
						text-align: center;
						span {
							display: block;
						}
						i{
							display: block;
							font-size: 19px;
							margin: 4px 0;
						}
						.badge{
							position: absolute;
							right: 10px;
							top: 10px;
						}
					}
				}
			}
		}
		> .vbox > .footer {
			padding-left: 10px;
			padding-right: 10px;
		}
		.hidden-vertical{
			display: none;
		}
	}
}

@media (max-width: 767px) {
	.nav-user{
		text-align: center;
		.nav-avatar{
			margin-top: 20px;
			display: inline-block;
			.thumb-sm{
				position: relative;
				width: 160px;
				background-color: rgba(255,255,255,0.15);
				padding: 5px;
				&:before{
					content: "";
					position: absolute;
					left: 5px;
					right: 5px;
					bottom: 5px;
					top: 5px;
					border: 4px solid #fff;
					border-radius: 500px;
				}
				.caret{
					display: none;
				}
			}
		}
		.dropdown-menu{
			text-align: left;
			margin-top: 0;
		}
		.nav-msg{
			right:auto;
			left: 10px;
			.dropdown-menu{
				top:-6px;
				width: 260px;
			}
			.arrow.left{
				top: 20px;
			}
		}
	}
	.nav-bar-fixed-top{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 1100;
		+ *{
			padding-top: 50px;
		}
	}
	.nav-bar-fixed-bottom{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1100;
	}
	/* .off screen nav from left or right*/
	html, body{
		overflow-x: hidden;
		min-height: 100%;
	}
	.nav-primary{
		.dropdown-menu{
			position: relative;
			float:none;
			left: 0;
			margin-left: 0;
			padding: 0;
			a{
				padding: 15px;
				border-bottom: 1px solid #eee;
			}
			li:last-child{
				a{
					border-bottom: none;
				}
			}
		}
	}
	.nav-off-screen {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: @off-screen-nav-width;				
		visibility: visible;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		.nav-primary{
			display: block !important;
		}
		.nav-bar-fixed-top{
			width: @off-screen-nav-width;
		}
		&.push-right{
			left: auto;
			right: 0;
			+ *{
				.translate3d(-@off-screen-nav-width, 0px, 0px);
			}
		}
		+ *{
			background-color: @body-bg;
			.transition-transform(0.2s ease-in-out);
			.transition-delay(0s);
			.translate3d(0px, 0px, 0px);
			.backface-visibility(hidden);	
			.translate3d(@off-screen-nav-width, 0px, 0px);
			overflow: hidden;
			position: absolute;
			height: 100%;
			top:0;
			left:0;
			right: 0;
			z-index: 2;
			.nav-off-screen-block {
				display:block !important;
				position: absolute;
				left: 0;
				right:0;
				top: 0;
				bottom: 0;
				z-index: 1950;
			}
		}
	}
	
	.slimScrollDiv,
	.slim-scroll {
		overflow: visible !important;
		height: auto !important;
	}
	.slimScrollBar, 
	.slimScrollRail {
		display: none !important;
	}
}