navbar fixes

pages/_includes/layout/navbar-search.html

@@ -2,6 +2,6 @@
 
 <div class="d-none d-{{ breakpoint }}-block {% if include.class %} {{ include.class }}{% endif %}">
 	<form action="." method="get">
-		{% include ui/form/input-icon.html prepend=true light=include.dark %}
+		{% include ui/form/input-icon.html prepend=true icon-class="text-muted" dark=include.dark %}
 	</form>
 </div>

pages/_includes/layout/navbar.html

@@ -22,7 +22,7 @@
 	<div class="navbar collapse navbar-collapse {% if include.dark-secondary %}navbar-dark{% else %}navbar-light{% endif %}" id="navbar-menu">
 		<div class="container-xl">
 			{% include layout/navbar-menu.html %}
-			{% include layout/navbar-search.html breakpoint=breakpoint dark=dark-secondary %}
+			{% include layout/navbar-search.html breakpoint=breakpoint dark=include.dark-secondary %}
 		</div>
 	</div>
 </div>

pages/_includes/ui/form/input-icon.html

 {% capture addon %}
 	{% if include.loader %}
-		<span class="input-icon-addon">
+		<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
 			{% include ui/spinner.html class="text-muted" size="sm" %}
 		</span>
 	{% else %}
 		{% assign icon = include.icon | default: 'search' %}
-		<span class="input-icon-addon">
+		<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
 			{% include ui/icon.html icon=icon %}
 		</span>
 	{% endif %}
@@ -16,7 +16,7 @@
 		{{ addon }}
 	{% endif %}
 
-	<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
+	<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.dark %} form-control-dark{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
 
 	{% unless include.prepend %}
 		{{ addon }}

pages/_layouts/default.html

@@ -5,15 +5,11 @@ layout: base
 {% assign page-header = page.page-header | default: layout.page-header %}
 
 <div class="page">
-	{% include layout/navbar.html %}
 	{% include layout/navbar.html dark=true %}
-
-	{% comment %}
 	{% include layout/navbar.html dark=true background="#7952b3" %}
 	{% include layout/navbar.html %}
-	{% endcomment %}
-
-	{% comment %}{% include layout/topnav.html %}{% endcomment %}
+	{% include layout/navbar.html secondary=true %}
+	{% include layout/navbar.html secondary=true dark-secondary=true %}
 
 	{% comment %}
 	{% include layout/navbar-primary.html %}

scss/layout/_navbar.scss

+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-up($next) {
+
+      }
+    }
+  }
+}
+
 /**
 Navbar
  */

scss/ui/_forms.scss

@@ -77,12 +77,23 @@ Form control
 }
 
 .form-control-light {
+  background-color: $gray-100;
+  border-color: transparent;
+}
+
+.form-control-dark {
   background-color: rgba($black, .1);
   color: $white;
   border-color: transparent;
 
   &:focus {
-    background-color: inherit;
+    background-color: rgba($black, .1);
+    box-shadow: none;
+    border-color: rgba($white, .24);
+  }
+
+  &::placeholder {
+    color: rgba($white, $text-muted-opacity);
   }
 }