fix(aio): api search input fix and style

aio/src/app/embedded/api/api-list.component.html

@@ -23,8 +23,8 @@
   </div>
 
   <div class="form-search">
-    <i class="material-icons">search</i>
     <input #filter placeholder="Filter" (input)="setQuery($event.target.value)">
+    <i class="material-icons">search</i>
   </div>
 </div>
 

aio/src/app/embedded/api/api-list.component.scss

@@ -57,7 +57,7 @@ $lightgrey: #F5F6F7;
 }
 
 .l-content-small {
-  padding: $unit * 6;
+  padding: 16px;
   max-width: 1100px;
   margin: 0;
 
@@ -69,40 +69,6 @@ $lightgrey: #F5F6F7;
   }
 }
 
-.l-flex-wrap {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/*
-* Banner
-*/
-.banner {
-  background: rgba($blue-grey-50, .24);
-  border-bottom: 1px solid $blue-grey-50;
-  box-sizing: border-box;
-  font-size: 18px;
-  font-weight: 200;
-  padding: ($unit * 4) ($unit * 6);
-  min-height: 97px;
-
-  include respond-to('mobile') {
-    padding: ($unit * 2);
-  }
-
-  &.is-plain {
-    background: $white;
-    height: auto;
-    overflow: visible;
-  }
-  p, .text-body {
-    color: $blue-grey-500;
-    font-size: 18px;
-    line-height: 32px;
-    margin: 0;
-  }
-}
-
 /*
 * SEARCH BAR
 */
@@ -164,7 +130,6 @@ $form-select-width: 200px;
 
 .form-select-menu {
   position: relative;
-  width: $form-select-width;
 }
 
 .form-select-button {

aio/src/styles/1-layouts/_layout-global.scss

@@ -16,4 +16,9 @@ l-relative {
 
 .is-visible {
     display: block!important;
+}
+
+.l-flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
 }

aio/src/styles/2-modules/_api-list.scss

@@ -0,0 +1,23 @@
+
+aio-api-list {
+    div.form-search i.material-icons {
+        width: 20px;
+        pointer-events: none;
+    }
+
+    .form-search input {
+        width: 182px;
+    }
+}
+
+aio-api-list > div {
+    display: flex;
+    margin: 32px auto;
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
+
+    > div {
+        margin: 8px;
+    }
+}

aio/src/styles/2-modules/_banner.scss

@@ -0,0 +1,30 @@
+/* Banner */
+
+.banner {
+    justify-content: center;
+    background: $white;
+    box-sizing: border-box;
+    font-size: 18px;
+    font-weight: 200;
+    padding: 16px;
+    min-height: 97px;
+
+
+    @media (max-width: 480px) {
+        padding: 16px;
+    }
+
+    &.is-plain {
+        background: $white;
+        height: auto;
+        overflow: visible;
+    }
+
+
+    p, .text-body {
+        color: $darkgray;
+        font-size: 18px;
+        line-height: 32px;
+        margin: 0;
+    }
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -15,4 +15,6 @@
    @import 'subsection';
    @import 'buttons';
    @import 'hero';
-   @import 'announcement-bar';
+   @import 'announcement-bar';
+   @import 'banner';
+   @import 'api-list';