User:Lexar/Main Page/Template:Benjas/scss

Here is the scss file used to construct the mobile menu in the responsive wiki.

If you have any improvements... add or modify the line followed by '//edited by <username>' on that same line

$hover-color:#eaeaea;
$normal-color:url('https://wiki.teamfortress.com/w/images/6/60/User_Lexar_bar-back.png') #fff repeat-x center top;

$tf2-build: TF2 Build, 'TF2 Build', Arial;
#mobile-menu {
	width: 100%;
	height: 38px;
	background: $normal-color;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	* {
		line-height: 1;
	}
	.mobile-menu-button {
		height: 100%;
		float: left;
		position: relative;
		cursor:pointer;
		background:url('https://wiki.teamfortress.com/w/images/1/1b/User_Lexar_menu-button2.png') repeat-x center top;
		width:50px;
		-webkit-transition: all 250ms linear;
		-moz-transition: all 250ms linear;
		-o-transition: all 250ms linear;
		-ms-transition: all 250ms linear;
		transition: all 250ms linear;
		.button-bar {
			float: left;
			position: relative;
			width: 36px;
			height: 4px;
			background: #c1c1c1;
			margin-top: 6px;
			margin-left: 10px;
			clear:both;
			display:none;
		}
	}
	.mobile-menu-button:hover, .mobile-menu-button.active {
		background:url('img/menu-button-hover2.png') repeat-x center top;
	}
	#page-menu, #account-menu {
		//font-weight: bold;
		background: url('https://wiki.teamfortress.com/w/images/f/fa/User_Lexar_menu-button-hover2.png') repeat-x;
		float: left;
		margin-left: 12px;
		height: 16px;
		font-size: 16px;
		padding: 9px 11px 13px;
		color: #fff;
		cursor: pointer;
		font-family: $tf2-build;
		-webkit-transition: all 250ms linear;
		-moz-transition: all 250ms linear;
		-o-transition: all 250ms linear;
		-ms-transition: all 250ms linear;
		transition: all 250ms linear;
		.arrow-anim {
			display:inline;
			img {
				-webkit-transition: all 250ms linear;
				-moz-transition: all 250ms linear;
				-o-transition: all 250ms linear;
				-ms-transition: all 250ms linear;
				transition: all 250ms linear;
			}
		}
	}
	#account-menu:hover, #account-menu.down, #page-menu:hover, #page-menu.down {
		background: url('https://wiki.teamfortress.com/w/images/3/38/User_Lexar_bar-back-hover.png') repeat-x;
		-webkit-transition: all 500ms linear;
		-moz-transition: all 500ms linear;
		-o-transition: all 500ms linear;
		-ms-transition: all 500ms linear;
		transition: all 500ms linear;
	}
	.down {
		.arrow-anim img {
			-moz-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			transform: rotate(90deg);
		}
	}
	#account-list, #tab-menu {
		list-style: none;
		padding: 0px;
		float: left;
		margin-left: 12px;
		max-height:0px;
		display:block;
		position: absolute;
		overflow: hidden;
		background: #b5b5b5;
		top:38px;
		height:38px;
		left:0px;
		width:100%;
		margin:0px;
		-webkit-transition: all 100ms linear;
		-moz-transition: all 100ms linear;
		-o-transition: all 100ms linear;
		-ms-transition: all 100ms linear;
		transition: all 100ms linear;
		li {
			float: left;
			position: relative;
			background: #b5b5b5;
			-webkit-transition: background-image 250ms linear;
			-moz-transition: background-image 250ms linear;
			-o-transition: background-image 250ms linear;
			-ms-transition: background-image 250ms linear;
			transition: background-image 250ms linear;
			span {
				float: left;
				display: block;
				a{
					height:38px;
					box-sizing:border-box;
					color: #fff;
					text-decoration: none;
					//font-weight: bold;
					font-family: $tf2-build;
					font-size: 14px;
					padding: 11px 11px 12px;
					display: block;
					-webkit-transition: all 250ms linear;
					-moz-transition: all 250ms linear;
					-o-transition: all 250ms linear;
					-ms-transition: all 250ms linear;
					transition: all 250ms linear;
				}
				a:hover {
					-webkit-transition: all 500ms linear;
					-moz-transition: all 500ms linear;
					-o-transition: all 500ms linear;
					-ms-transition: all 500ms linear;
					transition: all 500ms linear;
				}
			}
		}
		li.f-right {
			float:right;
		}
		li:hover {
			background: url('https://wiki.teamfortress.com/w/images/3/38/User_Lexar_bar-back-hover.png') repeat-x;
			-webkit-transition: background-image 250ms linear;
			-moz-transition: background-image 250ms linear;
			-o-transition: background-image 250ms linear;
			-ms-transition: background-image 250ms linear;
			transition: background-image 250ms linear;
		}
		li.selected {
			background: url('https://wiki.teamfortress.com/w/images/3/38/User_Lexar_bar-back-hover.png') repeat-x;
		}
	}
	#account-list.down, #tab-menu.down {
		display:block;
		height:38px;
		z-index:5;
		-webkit-transition: all 100ms linear;
		-moz-transition: all 100ms linear;
		-o-transition: all 100ms linear;
		-ms-transition: all 100ms linear;
		transition: all 100ms linear;
		max-height: 40px;
	}
	#search-expand {
		float: right;
		position: relative;
		width: 64px;
		height: 38px;
		background: url('https://wiki.teamfortress.com/w/images/e/ed/User_Lexar_search-out.png') no-repeat;
		background-color: transparent;
		cursor: pointer;
		-webkit-transition: all 250ms linear;
		-moz-transition: all 250ms linear;
		-o-transition: all 250ms linear;
		-ms-transition: all 250ms linear;
		transition: all 250ms linear;
		display:block;
	}
	#search-expand:hover {
		background: url('https://wiki.teamfortress.com/w/images/c/c1/User_Lexar_search-out-hover.png') no-repeat;
		-webkit-transition: all 250ms linear;
		-moz-transition: all 250ms linear;
		-o-transition: all 250ms linear;
		-ms-transition: all 250ms linear;
		transition: all 250ms linear;
	}
	#search-expand.out {
		background: url('https://wiki.teamfortress.com/w/images/d/d2/User_Lexar_search-out-active.png') no-repeat;
	}
	#p-search{
		display: block;
		overflow: hidden;
		height: 38px !important;
		float: right;
		margin: 0px !important;
		width: 0px !important;
		max-width: none !important;
		background: none !important;
		-webkit-transition: all 250ms linear;
		-moz-transition: all 250ms linear;
		-o-transition: all 250ms linear;
		-ms-transition: all 250ms linear;
		transition: all 250ms linear;
		#searchform {
			margin: 0px;
			position: relative;
			height: 38px;
			margin-top: 18px !important;
		}
	}
	#p-search.out {
		width:65% !important;
		-webkit-transition: all 250ms linear;
		-moz-transition: all 250ms linear;
		-o-transition: all 250ms linear;
		-ms-transition: all 250ms linear;
		transition: all 250ms linear;
	}
	div#simpleSearch {
		position: absolute;
		float: left;
		left: 0px;
		top: 0px;
		width: 100% !important;
		margin: 0px !important;
		height: 38px;
		background: none !important;
		#searchInput {
			margin: 0px !important;
			border: 0px !important;
			height: 38px !important;
			width: 70% !important;
			box-sizing: border-box;
			padding: 0px 10px !important;
			float: left;
			background: #eaeaea !important;
			color: #565656 !important;
			border-radius: 0px !important;
		}
		#searchButton {
			float: right !important;
			width: 30% !important;
			height: 38px !important;
			border: 0 !important;
			text-align: center;
			cursor: pointer !important;
			background: #cdcdcd !important;
			font-weight: bold;
			font-size: 18px;
			text-transform: uppercase;
			color: #565656;
			font-family: TF2 Build, "TF2 Build", Arial;
			margin: 0px !important;
			text-indent: 0px !important;
			top: auto !important;
			right: auto !important;
		}
	}
	#mobile-ul-main {
		max-height: 0px;
		overflow:hidden;
		position: absolute;
		top: 38px;
		left: 0px;
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
		background: $hover-color;
		-webkit-transition: all 500ms linear;
		-moz-transition: all 500ms linear;
		-o-transition: all 500ms linear;
		-ms-transition: all 500ms linear;
		transition: all 500ms linear;
		li {
			h3 {
				margin:0px 0px;
				padding:5px 22px 7px;
				line-height:1;
				padding-left:22px;
				height:15px;
				cursor:pointer;
				a, span {
					font-size: 15px;
					color: #838383;
					font-weight: normal;
					height: 15px;
					text-decoration:none;
					cursor:pointer;
				}
				img {
					-webkit-transition: all 150ms linear;
					-moz-transition: all 150ms linear;
					-o-transition: all 150ms linear;
					-ms-transition: all 150ms linear;
					transition: all 150ms linear;
					vertical-align: baseline;
				}
			}
			h3:hover, h3.down {
				background: #c5c5c5;
			}
			h3.down {
				margin-bottom: 1px;
				img {
					-moz-transform: rotate(90deg);
					-webkit-transform: rotate(90deg);
					-o-transform: rotate(90deg);
					-ms-transform: rotate(90deg);
					transform: rotate(90deg);
				}
			}
		}
		ul {
			display:block;
			max-height:0px;
			overflow:hidden;
			padding: 0px;
			padding-left: 19px;
			border-bottom: solid 1px #eaeaea;
			-webkit-transition: all 500ms linear;
			-moz-transition: all 500ms linear;
			-o-transition: all 500ms linear;
			-ms-transition: all 500ms linear;
			transition: all 500ms linear;
			li {
				list-style:none;
				float:left;
				display: block;
				a {
					display:block;
					color:#838383;
					text-decoration: none;
					padding: 4px 15px;
					font-size:14px;
				}
				a:hover {
					background: #c5c5c5;
				}
			}
			.clearing {
				height:0;
				clear:both;
			}
		}
		.clearing {
			height:0;
			clear:both;
		}
		ul.open {
			max-height:100px;
			-webkit-transition: all 500ms linear;
			-moz-transition: all 500ms linear;
			-o-transition: all 500ms linear;
			-ms-transition: all 500ms linear;
			transition: all 500ms linear;
			display:block;
			border-bottom: solid 1px #cecece;
			padding:2px 0px;
			padding-left:19px;
		}
	}
	#mobile-ul-main.down {
		z-index: 5;
		max-height:300px;
		-webkit-transition: all 500ms linear;
		-moz-transition: all 500ms linear;
		-o-transition: all 500ms linear;
		-ms-transition: all 500ms linear;
		transition: all 500ms linear;
	}
}
@media screen and (min-width:769px) {
	#mobile-menu {
		display:none;
	}
}