Search box

foundation/public/css/erpnext-org-theme.css

@@ -77,3 +77,12 @@
 .page-shadow {
   box-shadow: 0 0 30px -5px var(--light-grey);
 }
+.search-icon {
+  fill: var(--dark-grey);
+  height: 1rem;
+  width: 1rem;
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+}

foundation/public/less/erpnext-org-theme.less

@@ -10,3 +10,14 @@
 .page-shadow {
 	box-shadow: 0 0 30px -5px var(--light-grey);
 }
+
+.search-icon {
+	fill: var(--dark-grey);
+	height: 1rem;
+	width: 1rem;
+
+	position: absolute;
+	right: 1rem;
+	top:  50%;
+	transform: translateY(-50%);
+}

foundation/templates/includes/navbar/navbar.html

@@ -1,13 +1,16 @@
 <nav class="navbar" role="navigation">
-	<div class="flex space-between align-item-center border-bottom ph4 pv1">
+	<div class="flex space-between align-item-center border-bottom ph4 pv2">
 		<div class="left">
 			<a class="logo flex align-item-center" href="{{ url_prefix }}{{ home_page or "/"}}">
 				<img class="logo-img mr1" src="/assets/foundation/img/erpnext-logo.svg" alt="Open Source ERP Software">
 			<span>ERPNext.org</span>
 			</a>
 		</div>
-		<div class="right">
+		<div class="right flex align-item-center">
-			{% include 'templates/includes/search_box.html' %}
+			{% include 'foundation/templates/includes/search-box.html' %}
+			<a class="p1 hover-light-grey border-radius" href="/login">
+				Login
+			</a>
 		</div>
 	</div>
 </nav>

foundation/templates/includes/search-box.html

@@ -0,0 +1,9 @@
+<div class="relative mr2">
+    <input class="pv1 pl2 pr4 border" type="text" name="query" placeholder="Search this site">
+    <svg class="search-icon" viewBox="0 0 22.780561 22.145968" height="83.701294" width="86.099762">
+        <defs id="defs2" />
+        <g transform="translate(-54.311708,-94.201033)">
+            <path d="m 63.786067,94.201033 c -5.217031,0 -9.474359,4.25784 -9.474359,9.474867 0,5.21703 4.257328,9.47436 9.474359,9.47436 2.056783,0 3.963124,-0.6635 5.519557,-1.78491 l 4.386813,4.38836 a 1.9845977,1.9845977 0 1 0 2.806546,-2.80654 l -4.460708,-4.46071 a 1.9845734,1.9845734 0 0 0 -0.06408,-0.0594 c 0.81602,-1.39869 1.286742,-3.02121 1.286742,-4.75113 0,-5.217027 -4.257844,-9.474867 -9.474871,-9.474867 z m 0,2.646353 c 3.78711,0 6.830073,3.041407 6.830073,6.828514 0,3.78711 -3.042963,6.83007 -6.830073,6.83007 -3.787117,0 -6.82801,-3.04296 -6.82801,-6.83007 0,-3.787107 3.040893,-6.828514 6.82801,-6.828514 z" />
+        </g>
+    </svg>
+</div>

foundation/templates/includes/sidebar/sidebar.html

@@ -4,7 +4,7 @@
             <a class="fg-white" href="">Service Providers</a>
         </li>
         {% for list_item in ['Chapters', 'Fellowship', 'Blog'] %}
-        <li class="ph4 pv1">
+        <li class="ph4 pv1 hover-light-grey">
             <a href="">{{ list_item }}</a>
         </li>
         {% endfor %}