clipbucket/upload/styles/cb_28/theme/scss/_header.scss

@import "mymixins";
/* placeholder input styles */
.search input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */
	color: $search-txt;
}
.search input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: $search-txt;
}
.search input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: $search-txt;
	opacity: 1;
}
.search input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: $search-txt;
}
/**/
#header {
	padding: 0 10px;
	font-size: 14px;
	line-height: 16px;
	color: $black;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 5;
	background:$white;
	.icon-down-arrow{
		font-size: 11px;
		line-height: 34px;
		@include vertical-bottom();
		margin: 0 0 0 6px;
	}
	.search-drop .icon-down-arrow{
		line-height: 22px;
	}
	.btn-upload .icon-down-arrow{
		line-height: 20px;
	}
	.menu-holder{
		display: table;
		width: 100%;
		.col{
			display: table-cell;
			vertical-align: middle;
			padding: 0 0 0 10px;
			text-align: left;
			&.search{
				width: 446px;
			}
			&.btn-holder{
				width: 260px;
				&.logged-out{
					width: 220px;
				}
			}
		}
	}
	.main-links{
		@include vertical-middle();
		&>ul{
			font-size: 16px;
			line-height: 36px;
			@include list-style();
			&>li{
				@include vertical-top();
				&>a{
					color: $black;
					display: block;
					padding:12px;
					&:focus,
					&:hover{
						color:$black;
						text-decoration: none;
						position: relative;
						&:after{
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 3px;
							background: $blue;
						}
					}
				}
				&.active a{
					font-weight: 600;
					text-decoration: none;
					position: relative;
					&:after{
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 3px;
						background: $blue;
					}
				}
			}
		}
	}
	.navbar{
		min-height: inherit;
		margin: 0;
		background: none;
		border: none;
		padding: 0;
	}
	.container-fluid{
		padding: 0;
	}
	.navbar-collapse{
		padding: 0;
		.search{
			padding: 0;
		}
		@include boxsizing();
	}
	//
	.search {
		form.search-form{
			border-radius: 4px;
		}
		.cbsearchtype{
			background: $lt-grey;
			width: 100%;
			padding: 0 40px 0 94px;
			text-align: left;
			border-radius: 4px;
			position: relative;
			&:after{
				@include after();
			}
			.btn-default{
				height: 34px;
				padding: 0;
				font-weight:400;
				font-size: 14px;
				line-height: 34px;
				border: none;
				background: none;
				box-shadow: none;
				color: $black;
				&.btn-search{
					background: $blue;
					color: $white;
					font-size: 20px;
					width: 40px;
					border-radius: 0 4px 4px 0;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			.search-drop{
				width:94px;
				position: absolute;
				left: 0;
				top: 0;
				color: $black;
				background: darken($lt-grey,5%);
				border-radius: 4px 0 0 4px;
				.btn-default{
					padding: 6px;
					line-height: 20px;
					width: 100%;
					.search-type{
						@include vertical-middle();
					}
				}
			}
		}
		input[type="text"]{
			padding: 3px 10px;
			height: 34px;
			color: $search-txt;
			font-size: 14px;
			line-height:20px;
			background: none;
			box-shadow: none;
			border: none !important;
		}
	}
	.dropdown-menu{
		margin: 0;
		padding: 0;
		box-shadow: none;
		border: none;
		border-radius: 0 0 4px 4px;
		overflow: hidden;
		>li{
			>a{
				line-height: 24px;
				color: #404040;
				border-top: $default-border;
				i.glyphicon{
					color:$orange;
				}
				&:hover{
					color: $white;
					background:$blue;
				}
			}
			&:first-child >a{
				border: none;
			}
		}
		.divider{
			margin: 0;
		}
		> .active > a,
		> .active > a:hover,
		> .active > a:focus{
			background:$blue;
			color:$white;
		}
	}
	.right-menu .dropdown-menu,
	.search-drop .dropdown-menu{
		padding: 13px 0 0;
	}
}
.search-icon{
	font:17px/20px $font-icon;
}
.navbar-header{
	padding: 10px 0;
	float: none;
	display: table-cell;
	vertical-align: middle;
	width: 200px;
}
.btn-search-toggle{
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 20px;
	font-weight: 400;
	padding:5px 4px 9px;
	color:$search-toggle;
	&:active,
	&:focus,
	&:hover{
		color:$search-toggle;
	}
}
.logo{
	width: 200px;
	height: 40px;
	margin: 0;
	font-size: 0;
	line-height:0;
}
.logo a{
	display: block;
	height: 100%;
	height: 100%;
	position: relative;
	color:$white;
	font-size:0;
	line-height:0;
	&:hover{
		text-decoration: none;
	}
	span{
		@include text-replacement();
		font-size: 0;
		line-height: 0;
	}
	img{
		width: 100%;
	}
}
/**/

/**/
.header-holder{
	position: relative;
	display: table;
	width: 100%;
	.navbar-collapse{
		display: table-cell !important;
		vertical-align: middle;
	}
}


.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus{

}
.navbar-default {
	.navbar-toggle{
		padding: 0;
		margin: 0 0 0 5px;
		width: 34px;
		height: 34px;
		border: none;
		background: none;
		box-shadow: none;
		&:hover,
		&:focus{
			background: none;
			box-shadow: none;
		}
		span{
			display: block;
			margin: 6px 0 0;
			height: 4px;
			border-radius: 2px;
			background: #000;
			&:first-child{
				margin: 0;
			}
		}
	}
	.navbar-nav > .open > a.user-area,
	.navbar-nav > .open > a.user-area:focus,
	.navbar-nav > .open > a.user-area:hover{
		background: none;
	}
	.navbar-nav.navbar-right:last-child{
		margin: 0;
	}
	.right-menu{
		margin: 0;
		font-size: 14px;
		&.navbar-nav{
			> li{
				padding: 0 0 0 10px;
				> a{
					padding: 0;
					color: $black;
					&.btn-upload{
						font-size: 14px;
						line-height: 22px;
						font-weight: 600;
						border: 2px solid $black;
						border-radius: 4px;
						padding: 4px 12px;
						.icon-upload{
							@include vertical-top();
							line-height: 20px;
							margin: 0 10px 0 0;
						}
						&:hover,
						&:focus{
							color:$white;
							background: $black;
						}
					}
					&.user-area{
						display: block;
						font-weight: 600;
						&:focus{
							background: none;
							box-shadow: none;
						}
						img{
							display: inline-block;
							vertical-align: middle;
							margin: 0 10px;
							width: 36px;
							height: 36px;
							border-radius: 50%;
						}
						span{
							display: inline-block;
							vertical-align: middle;
							margin: 0 10px 0 0;
						}
					}
				}
			}
		}
		/**/
		.btn-default{
			border: none;
			text-transform: capitalize;
			background:none;
			height: 34px;
			line-height: 34px;
			font-size: 14px;
			line-height: 34px;
			font-weight: 400;
			padding: 0;
			border: none;
			color: $black;
			box-shadow: none;
			&:hover,
			&:focus,
			&:active,
			&.active{
				background: none;
				color: $black;
			}
		}
		.upload_link,
		.navbar-sm-login-links{
			.btn-default{
				font-size: 14px;
				line-height: 22px;
				font-weight: 600;
				border: 2px solid $white;
				border-radius: 4px;
				padding: 4px 6px;
				&:hover,
				&:active{
					color:$white;
				}
				&.btn-newacc{
					border-color: $black;
					&:hover,
					&:active{
						background: $black;
					}
				}
				&.btn-login{
					&:hover,
					&:active{
						background: $green;
					}
				}
				 
			}
		}

		.open > .dropdown-toggle.btn-default{
			background: none;
			color: $white;
		}
		.btn-success:hover{
			background:$green;
		}
	}
}
/**/
@media only screen and (max-width: 1259px) {
	
	#header{
		.main-links > ul > li > a{
			padding: 12px 6px;
		}
		.menu-holder .col{
			text-align: center;
			&.search{
				width: 280px;
			}
			&.btn-holder{
				width: 180px;
				&.logged-out{
					width: 150px;
				}
			}
		}
		.btn-upload{
			padding: 4px 8px;
			.icon-upload{
				margin: 0;
			}
			span,
			.icon-down-arrow{
				display: none;
			}
		}
	}
}
@media only screen and (max-width: 991px){
	.logo{
		float: left;
	}
	/**/
	.header-holder{
		display: block;
		.navbar-header{
			display: block;
			width: 100%;
			.search{
				width: 300px;
				float: right;
			}
		}
		.navbar-collapse{
			display: block !important;
		}

	}
	#header{
		.menu-holder{
			display: block;
		}
		
	}

	/**/
	.btn-search-toggle{
		float: right;
	}
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}
@media only screen and (max-width: 991px){
	
}
@media only screen and (max-width: 767px) {
	
}