Create modifier for a ToolBar with just Search.

ui_framework/components/tool_bar/_tool_bar.scss

@@ -10,3 +10,12 @@
 .kuiToolBarSection {
   @include barSection;
 }
+
+/**
+ * 1. Override Bar styles and put Search on the left side.
+ */
+.kuiToolBar--searchOnly {
+  .kuiToolBarSearch {
+    margin-left: 0 !important; /* 1 */
+  }
+}

ui_framework/components/tool_bar/_tool_bar_search.scss

@@ -1,9 +1,10 @@
 .kuiToolBarSearch {
+  @include barSection;
+
   display: flex;
   flex: 1 1 auto;
   max-width: 800px;
   line-height: $lineHeight;
-  margin-right: $toolBarSectionSpacing * 0.5;
 }
 
 .kuiToolBarSearchBox {

ui_framework/dist/ui_framework.css

@@ -1061,6 +1061,13 @@ body {
     margin-left: 10px;
     /* 1 */ }
 
+/**
+ * 1. Override Bar styles and put Search on the left side.
+ */
+.kuiToolBar--searchOnly .kuiToolBarSearch {
+  margin-left: 0 !important;
+  /* 1 */ }
+
 .kuiToolBarFooter {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1111,13 +1118,34 @@ body {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 25px;
+  margin-right: 25px;
+  display: flex;
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   max-width: 800px;
-  line-height: 1.5;
-  margin-right: 25px; }
+  line-height: 1.5; }
+  .kuiToolBarSearch:first-child {
+    margin-left: 0; }
+  .kuiToolBarSearch:last-child {
+    margin-right: 0; }
+  .kuiToolBarSearch:only-child {
+    margin-left: auto;
+    /* 1 */ }
+  .kuiToolBarSearch > * {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto; }
+  .kuiToolBarSearch > * + * {
+    margin-left: 10px;
+    /* 1 */ }
 
 .kuiToolBarSearchBox {
   -webkit-box-flex: 1;

ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx

@@ -11,6 +11,10 @@ export default createExample([{
   ),
   html: require('./tool_bar.html'),
   hasDarkTheme: false,
+}, {
+  title: 'ToolBar with Search only',
+  html: require('./tool_bar_search_only.html'),
+  hasDarkTheme: false,
 }, {
   title: 'ToolBarFooter',
   description: (

ui_framework/doc_site/src/views/tool_bar/tool_bar_search_only.html

@@ -0,0 +1,12 @@
+<div class="kuiToolBar kuiToolBar--searchOnly">
+  <div class="kuiToolBarSearch">
+    <div class="kuiToolBarSearchBox">
+      <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
+      <input
+        class="kuiToolBarSearchBox__input"
+        type="text"
+        placeholder="Search..."
+      >
+    </div>
+  </div>
+</div>