Header buttons

Author: modularcoder

src/app/_common/header/buttons/buttons.hbs

@@ -1,14 +1,16 @@
-<div class="header-block header-block-buttons">
-	<a href="https://github.com/modularcode/modular-admin-html" class="btn btn-primary-outline btn-sm rounded-s header-btn">
+<div class="header-block header-block-buttons" >
+	<a href="https://github.com/modularcode/modular-admin-html" 
+		class="btn btn-default btn-sm rounded-s header-btn">
 		<i class="fa fa-github-alt"></i>
 		View on GitHub
 	</a>
-	<a href="https://github.com/modularcode/modular-admin-html/archive/master.zip" class="btn btn-primary-outline btn-sm rounded-s header-btn">
+	<a href="https://github.com/modularcode/modular-admin-html/releases/download/v{{pkg.version}}/modular-admin-html-{{pkg.version}}.zip" 
+		class="btn btn-default btn-sm rounded-s header-btn">
 		<i class="fa fa-cloud-download"></i>
 		Download .zip
 	</a>
-	<button type="button" class="btn btn-primary-outline btn-sm rounded-s buttons header-btn">
+	{{!-- <button type="button" class="btn btn-default btn-sm rounded-s buttons header-btn">
 		<i class="fa fa-share-alt"></i>
 		Share
-	</button>
+	</button> --}}
 </div>

src/app/_common/header/buttons/buttons.scss

@@ -2,19 +2,16 @@
 	text-align: center;
 	margin-left: auto;
 	margin-right: auto;
+	white-space: nowrap;
 
-	.header-btn {
-		border: 1px solid $color-text;
-		color: $color-text;
-	}
-
-	.header-btn:hover {
-		border: 1px solid $color-primary;
-		color: #ffffff;
-	}
+	.btn.header-btn {
+		background-color: transparent;
+		border: none;
+		color: lighten($color-text, 10%);
 
-	.header-btn:focus {
-		border: 1px solid $color-primary;
-		color: #ffffff;
+		&:hover,
+		&:focus {
+			color: darken($color-text, 10%);
+		}
 	}
 }

src/app/_common/header/nav/nav.scss

@@ -1,5 +1,6 @@
 .header .header-block-nav {
 	margin-left: auto;
+	white-space: nowrap;
 
 	@include clearfix();
 
@@ -14,10 +15,13 @@
 		list-style: none;
 	}
 
+	& > ul {
+		display: table;
+	}
+
 	// First level items
 	& > ul > li {
-		// display: inline-block;
-		float: left;
+		display: table-cell;
 		position: relative;
 
 		&:before {

src/app/_common/header/nav/notifications/notifications.scss

@@ -28,6 +28,7 @@
 
 
 	.notifications-dropdown-menu {
+		white-space: normal;
 		left: auto;
 		right: 0;
 		min-width: 350px;

src/app/_common/header/nav/profile/profile.scss

@@ -35,6 +35,7 @@
 		left: auto;
 		right: 0;
 		min-width: 180px;
+		white-space: normal;
 
 		&:before {
 			position: absolute;

src/app/_common/header/search/search.scss

@@ -1,5 +1,6 @@
 .header .header-block-search {
 	$line-height: $header-height - 30px;
+	margin-right: auto;
 
 	// float: left;
 	padding-left: $content-padding-x-md;
@@ -46,6 +47,7 @@
 			border: none;
 			padding-left: 25px;
 			height: 40px;
+			max-width: 150px;
 
 			@include media-down(sm) {
 				max-width: 140px;