sportsbet-mobile/client/style/navbar.import.less

Sportsbet mobile

.navbar {

	.container {
		.navigation-header {
			padding-top: 10px;
			padding-bottom: 10px;
			width: 100%;
			div {
				&.nav-search {
					display: inline-flex;
					width: 10%;
					.fa {
						&.fa-search {
							color: #FFF;
							font-size: 26px;
							margin-left: 7px;
						}
					}
				}
				&.logo-balance {
					display: inline-block;
					width: 78%;
					text-align: center;
					margin: 0px auto;
					div {
						position: absolute;
						top: 5px;
						width: 78%;
						img {
							width: 100px;
						}
					}
					.balance {
						color: #FFF;
						align-items: center;
						height: 20px;
						font-size: 18px;
						.figure {
							color: #ffc61a;
						}
					}
				}
				&.hmenu {
					display: inline-flex;
					width: 10%;
					.fa {
						&.hamburger {
							color: #FFF;
							float: right;
							margin-left: 7px;
							font-size: 26px;
						}
					}
				}
			}
		}
	}

	margin-bottom: 0px;

	nav {
		height: 46px;
	}

	.navbar-brand {
		text-align: center;
		margin: 0px auto;
		display: block;
	}

	.navbar-header {
		background: #05060a;
		border-bottom: 2px solid #89C331;
		padding-bottom: 10px;
		padding-top: 10px;
		zoom: 0.6;
		height: 60px;
	}

	.btn-holder {
		display: inline;
		float: right;
		position: absolute;
		right: 15px;
		top: 30px;

		.btn {
			display: initial;
			width: auto;
			padding: 10px 10px 7px 10px;
			line-height: 11px;
			font-size: 16px;
		}
	}

	.search {
		width: 40px;
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 15;
	}

	.loged-user {
		position: absolute;
		width: 100%;
		top: 20px;
		text-shadow: 0px 1px 0px #5b900c;

		.user {
			position: absolute;
			right: 20px;
		}

	}

	nav {
		ul, li {
			padding: 0px;
			margin: 0px;
			list-style: none;
		}

		li {
			width: 25%;
			float: left;
			display: block;
			text-align: center;

			a {
				display: block;
				background: #262626;
				color: #fff;
				font-size: 16px;
				font-weight: bolder;
				padding: 13px 0;
				text-decoration: none;
			}

			a.active, a:hover, a:focus {
				background: #89c331;
				text-shadow: 0px 1px 0px rgb(91, 144, 12);
			}
		}
	}

	.live-badge {
		//background: red;
		//font-size: 11px;
		//font-weight: normal;
		//text-shadow: none;
		//border-radius: 3px;
		//display: inline-block;
		//position: absolute;
		//padding-left: 10px;
		//padding-right: 10px;
		//padding-top: 5px;
		//padding-bottom: 5px;
		//top: 54px;
		//right: 132px;

		color: red;
		text-shadow: none;
		opacity: 0.7;
		font-weight: 500;
	}



}

.cabinet {

	.navbar-header {
		border-bottom: 2px solid #FFC000;
	}
	nav li a.active, nav li a:hover, nav li a:focus {
		background: #FFC000;
		text-shadow: 0px 1px 0px #FFD555;
		color: #282C38;
	}

	nav li a {
		display: block;
		background: #262626;
	}
}

.no-login .navbar-brand {
	text-align: left;
	margin: 0px auto;
	display: block;

	img {
		margin-left: 80px;
	}
}

.userbox {
	width: 0%;
	min-width: 0px;
	position: fixed;
	right: -50px;
	top: 160px;
	color: #fff;
	padding-top: 10px;
	z-index: 9;
	zoom: 0.75;
	opacity: 0;
	transition: all 0.3s linear;

	&.active {
		opacity: 1;
		transition: all 0.3s linear;
		right: 0px;
		min-width: 250px;
		top: 100px;

		.nav-logo {
			position: absolute;
			top: -44px;
			width: 167px;
		}

	}

	.close {
		float: right;
		font-size: 20px;
		font-weight: bold;
		line-height: 20px;
		color: #FFFFFF;
		text-shadow: 0 1px 0 #0C1302;
		opacity: 1;
		filter: alpha(opacity=20);
		position: absolute;
		z-index: 10;
		top: -35px;
		right: 7px;
		font-size: 30px;
		background: #4E7611;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		width: 30px;
		height: 30px;
		font-size: 25px;
		text-align: center;
		line-height: 28px;
		zoom: 1.5;
	}

	ul {
		margin-top: 10px;
	}

	ul, li {
		padding: 0px;
		margin: 0px;
		list-style: none;
	}

	li a {
		width: 100%;
		display: block;
		padding-top: 10px;
		padding-bottom: 10px;
		color: #fff;
		font-size: 18px;
		text-decoration: none;
		cursor: pointer;

		span {
			display: inline-block;
			background: #4E7611;
			margin-right: 10px;
			padding: 7px;
			border-radius: 18px;
			width: 20px;
			height: 20px;
			i {
				font-size: 14px;
				margin-top: 1px;
				margin-left: 3px;
				&.fa-bookmark-o, &.fa-phone, &.fa-sign-out {
					margin-left: 5px;
				}
				&.fa-history {
					margin-left: 5px;
				}
			}
		}

		&:hover {
			background: #78AB2B;
		}

		//&:before {
		//	content: '';
		//	background: #4e7611 url(/images/icons.png) 0px 2px no-repeat;
		//	height: 45px;
		//	width: 45px;
		//	position: absolute;
		//	-webkit-border-radius: 50px;
		//	-moz-border-radius: 50px;
		//	border-radius: 50px;
		//	left: 10px;
		//	top: 20px;
		//}
	}



	//.bets a:before {
	//	background-position-y: -47px;
	//}
	//.history a:before {
	//	background-position-y: -95px;
	//}
	//.support a:before {
	//	background-position-y: -144px;
	//}
	//.about a:before {
	//	background-position-y: -192px;
	//}
	//.logout a:before {
	//	background-position-y: -240px;
	//}

	hr {
		background: #4e7611;
		border: none;
		height: 2px;
		margin-bottom: 0;
	}

	.user-info {
		position: relative;
		width: 96%;

		.holder {
			font-size: 18px;
			display: inline-block;
			line-height: 21px;
			width: 100%;

			.nav-user {

			}

			.nav-balance {
				margin-top: 5px;

				.figure {
					display: inline-block;
					color: #ffc61a;
				}
			}

			span {
				display: block;
			}
		}

		img {
			display: block;
			position: absolute;
			top: -3px;
			left: 10px;
		}
	}

	.navbar-footer {
		div {
			display: inline-block;
			width: 32%;
			margin-top: 20px;
			img {
				width: 50px;
				height: 50px;
			}
		}

	}

}

.userbox.collapse {
	opacity: 0;
	right: 10000px;
}

.userbox.collapse.in {
	opacity: 1;
	right: 0;
}