topbar search

pages/_includes/cards/card.html

@@ -12,7 +12,7 @@
 			{% if include.show-form %}
 			<form action="">
 				<div class="input-group">
-					<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
+					<input type="text" class="form-control form-control-sm" placeholder="Search something&hellip;" name="s">
 					<span class="input-group-btn ml-2">
 							<button class="btn btn-sm btn-default" type="submit">
 								<span class="fe fe-search"></span>

pages/_includes/cards/form-elements.html

@@ -35,7 +35,7 @@
             <div class="form-group">
                <label class="form-label">Input group</label>
                <div class="input-group">
-                  <input type="text" class="form-control" placeholder="Search for...">
+                  <input type="text" class="form-control" placeholder="Search for&hellip;">
                   <span class="input-group-append">
 							<button class="btn btn-primary" type="button">Go!</button>
 						</span>
@@ -71,7 +71,7 @@
                <label class="form-label">Separated inputs</label>
                <div class="row row-xs">
                   <div class="col">
-                     <input type="text" class="form-control" placeholder="Search for...">
+                     <input type="text" class="form-control" placeholder="Search for&hellip;">
                   </div>
                   <span class="col-auto">
 							<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
@@ -82,7 +82,7 @@
                <label class="form-label">ZIP Code</label>
                <div class="row row-sm">
                   <div class="col">
-                     <input type="text" class="form-control" placeholder="Search for...">
+                     <input type="text" class="form-control" placeholder="Search for&hellip;">
                   </div>
                   <span class="col-auto align-self-center">
 							<span class="form-help" data-toggle="popover" data-placement="top"

pages/_includes/cards/project-box.html

@@ -12,7 +12,7 @@
             </a>
         </div>
         <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis dolorem earum et, fugiat illum
-            incidunt modi ne... </p>
+            incidunt modi ne&hellip; </p>
         {% include ui/avatar-list.html text="+5" %}
     </div>
 </div>

pages/_includes/layout/header.html

-<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
-   {% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
-</header>

pages/_includes/layout/topnav.html

+<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
+   {% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=false white-logo=include.dark %}
+</header>
+
+{% comment %}
+{% if page.nav-position == "top" or page.nav-position == "all" %}
 <header class="navbar navbar-expand-md">
 	<div class="container">
       {% include layout/menu.html %}
 	</div>
 </header>
+{% endif %}
+{% endcomment %}

pages/_includes/parts/input-icon.html

 <div class="form-group">
 	<label class="form-label">Icon input</label>
 	<div class="input-icon mb-3">
-		<input type="text" class="form-control" placeholder="Search for...">
+		<input type="text" class="form-control" placeholder="Search for&hellip;">
 		<span class="input-icon-addon">
 			{% include ui/icon.html icon="search" %}
 		</span>
@@ -12,4 +12,4 @@
 		</span>
 		<input type="text" class="form-control" placeholder="Username">
 	</div>
-</div>
\ No newline at end of file
+</div>

pages/_includes/parts/navbar.html

@@ -11,10 +11,22 @@
    <a href="{{ site.base }}" class="navbar-brand text-inherit">
       {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
       {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-      {% if include.logo %}<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
+      {% if include.logo %}
+         <img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo mr-3">
+         <img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo mr-3">
+      {% endif %}
       {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
    </a>
 
+   {% if include.search %}
+   <div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
+      <div class="input-icon">
+         <span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
+         <input type="text" class="form-control" placeholder="Search">
+      </div>
+   </div>
+   {% endif %}
+
    {% if include.plus-left %}
    <a href="#" class="btn btn-primary">
       {% include ui/icon.html icon="plus" %}
@@ -59,18 +71,6 @@
          </li>
       </ul>
       {% endif %}
-
-      {% if include.search %}
-      <!-- Navbar Search -->
-      <form class="input-group m-2 my-lg-0 ">
-                <span class="input-group-prepend">
-                    <button type="button"
-                            class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
-                </span>
-         <input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
-                data-plugin="typeahead">
-      </form>
-      {% endif %}
    </div>
 
    <ul class="nav navbar-menu order-1 order-lg-2">
@@ -129,8 +129,8 @@
          <a href="#" data-toggle="dropdown"
             class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
             {% if include.user-menu == 1 %}
-               {% include ui/avatar.html src=person.photo %}
-               <span class="ml-2 d-none d-lg-block leading-none">
+            {% include ui/avatar.html src=person.photo %}
+            <span class="ml-2 d-none d-lg-block leading-none">
                   <span>{{ person.full_name }}</span>
                   <span class="text-muted d-block mt-1 text-h6">Administrator</span>
                </span>
@@ -157,14 +157,14 @@
                {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
             </a>
             <a class="dropdown-item" href="#">
-               {% include ui/icon.html icon="send" class="dropdown-icon" %}  Message
+               {% include ui/icon.html icon="send" class="dropdown-icon" %} Message
             </a>
             <div class="dropdown-divider"></div>
             <a class="dropdown-item" href="#">
-               {% include ui/icon.html icon="help-circle" class="dropdown-icon" %}  Need help?
+               {% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
             </a>
             <a class="dropdown-item" href="#">
-               {% include ui/icon.html icon="log-out" class="dropdown-icon" %}  Sign out
+               {% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
             </a>
          </div>
       </li>

pages/_includes/ui/spinner.html

 {% assign elem = include.element | default: 'div' %}
 <{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status">
-   <span class="sr-only">loading...</span>
+   <span class="sr-only">loading&hellip;</span>
 </{{ elem }}>

pages/_layouts/default.html

@@ -9,13 +9,7 @@ layout: base
    {% endif %}
 
    <div class="main-content flex-fill d-flex flex-column mw-100">
-      {% include layout/header.html %}
-
-      {% comment %}
-      {% if page.nav-position == "top" or page.nav-position == "all" %}
       {% include layout/topnav.html %}
-      {% endif %}
-      {% endcomment %}
 
       <div class="d-flex flex-fill">
 

scss/_variables.scss

@@ -105,6 +105,9 @@ $avatar-sizes: (
   "xl": 6rem
 ) !default;
 
+/**
+Fonts
+ */
 $font-size-base: 1rem !default;
 $font-weight-base: 400 !default;
 $line-height-base: 1.375 !default;
@@ -116,7 +119,7 @@ Typography
  */
 $headings-font-weight: 600 !default;
 
-$small-font-size: 80% !default;
+$small-font-size: 87.5% !default;
 
 $h1-font-size: $font-size-base * 1.875 !default;
 $h2-font-size: $font-size-base * 1.5 !default;
@@ -129,13 +132,51 @@ $blockquote-font-size: $h4-font-size !default;
 $lead-font-size: $h3-font-size !default;
 
 /**
-Ribbons
+Sizing
  */
-$ribbon-margin: .25rem !default;
+$spacer: 1rem !default;
+$spacers: (
+  0: 0rem,
+  1: .25rem,
+  2: .5rem,
+  4: 1rem,
+  5: 1.5rem,
+  6: 2rem,
+  7: 2.5rem,
+  8: 3rem,
+) !default;
 
-$loader-size: 2.5rem !default;
+$size-spacers: (
+  9: 4rem,
+  10: 5rem,
+  11: 6rem,
+  12: 8rem,
+  13: 10rem,
+  14: 12rem,
+  15: 14rem,
+  16: 16rem,
+  17: 18rem,
+  18: 20rem,
+  auto: auto,
+  px: 1px,
+  full: 100%
+) !default;
+
+$size-max-spacers: (
+  xs: 20rem,
+  sm: 24rem,
+  md: 28rem,
+  lg: 32rem,
+  xl: 36rem,
+  2 xl: 42rem,
+  3 xl: 48rem,
+  4 xl: 56rem,
+  5 xl: 64rem,
+  6 xl: 72rem,
+  full: 100%
+) !default;
 
-$sizes: (
+$sizes-percentage: (
   1: 1%,
   25: 25%,
   50: 50%,
@@ -144,6 +185,13 @@ $sizes: (
   auto: auto
 ) !default;
 
+/**
+Ribbons
+ */
+$ribbon-margin: .25rem !default;
+
+$loader-size: 2.5rem !default;
+
 $generate-social-colors: true !default;
 $generate-color-hues: true !default;
 $generate-colors: true !default;

scss/utils/_sizing.scss

@@ -10,41 +10,21 @@
 .min-w-0	{ min-width: 0 !important; }
 .min-w-full	{ min-width: 100% !important; }
 
-.h-1	{ height: .25rem !important; }
-.h-2	{ height: .5rem !important; }
-.h-3	{ height: .75rem !important; }
-.h-4	{ height: 1rem !important; }
-.h-6	{ height: 1.5rem !important; }
-.h-8	{ height: 2rem !important; }
-.h-10	{ height: 2.5rem !important; }
-.h-12	{ height: 3rem !important; }
-.h-16	{ height: 4rem !important; }
-.h-24	{ height: 6rem !important; }
-.h-32	{ height: 8rem !important; }
-.h-48	{ height: 12rem !important; }
-.h-64	{ height: 16rem !important; }
-.h-auto	{ height: auto !important; }
-.h-px	{ height: 1px !important; }
-.h-full	{ height: 100% !important; }
-.h-screen	{ height: 100vh !important; }
+@each $size-name, $size in $sizes-percentage {
+  .w-#{$size-name}p { width: $size !important; }
+  .h-#{$size-name}p { height: $size !important; }
+}
+
+@each $size-name, $size in map_merge($spacers, $size-spacers) {
+  .w-#{$size-name} { width: $size !important; }
+  .h-#{$size-name} { height: $size !important; }
+}
 
-.w-1	{ width: .25rem !important; }
-.w-2	{ width: .5rem !important; }
-.w-3	{ width: .75rem !important; }
-.w-4	{ width: 1rem !important; }
-.w-6	{ width: 1.5rem !important; }
-.w-8	{ width: 2rem !important; }
-.w-10	{ width: 2.5rem !important; }
-.w-12	{ width: 3rem !important; }
-.w-16	{ width: 4rem !important; }
-.w-24	{ width: 6rem !important; }
-.w-32	{ width: 8rem !important; }
-.w-48	{ width: 12rem !important; }
-.w-64	{ width: 16rem !important; }
-.w-auto	{ width: auto !important; }
-.w-px	{ width: 1px !important; }
-
-.w-full	{ width: 100% !important; }
+.h-screen	{ height: 100vh !important; }
 .w-screen	{ width: 100vw !important; }
 
+@each $size-name, $size in $size-max-spacers {
+  .max-w-#{$size-name} { max-width: $size !important; }
+  .max-h-#{$size-name} { max-height: $size !important; }
+}