mobile menu styling

10 years ago · 62a0f56ff6
parent 0adb26d097
commit 62a0f56ff6
1 changed files with 162 additions and 0 deletions
--- a/less/mobile.less
+++ b/less/mobile.less
@ -0,0 +1,162 @@
+#mobile-menu {
+	display: none;
+}
+
+@media (max-width: 1200px) {
+
+}
+
+@media (max-width: 980px) {
+	body {
+		height: 100%;
+	}
+
+	.header {
+		height: 58px;
+		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
+		position: fixed;
+		top: 0px;
+		z-index: 5;
+
+		#main-page-title {
+			bottom: -31px;
+			font-size: 20px;
+			color: #FFF;
+			left: 52px;
+			font-weight: 400;
+		}
+
+		#user_label {
+			right: 0px;
+			bottom: 7px;
+		}
+
+		#main-menu {
+			display: none;
+		}
+	}
+
+	#mobile-menu {
+		width: 31px;
+		background: none;
+		border: none;
+		vertical-align: 10%;
+		margin-right: 10px;
+		margin-left: -15px;
+		outline: none !important;
+		display: block;
+
+		position: absolute;
+		top: 22px;
+		left: 22px;
+
+		.bar {
+			width: 100%;
+			height: 2px;
+			background: #fff;
+			margin-bottom: 3px;
+			border-radius: 10px;
+		}
+	}
+
+	#menu {
+		background-color: #1D1F20;
+		background-image: linear-gradient(145deg, #1D1F20, #404348);
+
+		a {
+			color: #fff;
+			text-decoration: none;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+	}
+
+	.menu-header-title {
+		font-weight: 400;
+		letter-spacing: 0.5px;
+		margin: 0;
+	}
+
+	.menu-section {
+		margin: 25px 0;
+	}
+
+	.menu-section-title {
+		text-transform: uppercase;
+		color: #85888d;
+		font-weight: 200;
+		font-size: 13px;
+		letter-spacing: 1px;
+		padding: 0 20px;
+		margin:0;
+	}
+
+	.menu-section-list {
+		padding:0;
+		margin: 10px 0;
+		list-style:none;
+
+		a {
+			display: block;
+			padding: 10px 20px;
+		}
+
+		a:hover {
+			background-color: rgba(255, 255, 255, 0.1);
+			text-decoration: none;
+		}
+	}
+
+	#panel {
+		background: white;
+		min-height: 100%;
+		padding-top: 80px;
+	}
+
+	.slideout-menu {
+		position: fixed;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		z-index: 0;
+		width: 256px;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+		display: none;
+	}
+
+
+	.slideout-panel {
+		position: relative;
+		z-index: 1;
+	}
+
+	.slideout-open,
+	.slideout-open body,
+	.slideout-open .slideout-panel {
+		overflow: hidden;
+		overflow-y: hidden !important;
+	}
+
+	.slideout-open .slideout-menu {
+		display: block;
+	}
+
+	html {
+		height: 100%;
+		overflow-y: hidden;
+	}
+	
+	.slideout-open {
+		overflow-y: hidden;
+		height: 100%;
+	}
+
+	body {
+		overflow-y: scroll;
+		overflow-x: hidden;
+	}
+}