From 4c566dbfbb38743875881bf37e8a37f4e6680198 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Sat, 1 Apr 2017 00:22:02 -0700
Subject: [PATCH] fix(aio): api search input fix and style

---
 .../app/embedded/api/api-list.component.html  |  2 +-
 .../app/embedded/api/api-list.component.scss  | 37 +------------------
 aio/src/styles/1-layouts/_layout-global.scss  |  5 +++
 aio/src/styles/2-modules/_api-list.scss       | 23 ++++++++++++
 aio/src/styles/2-modules/_banner.scss         | 30 +++++++++++++++
 aio/src/styles/2-modules/_modules-dir.scss    |  4 +-
 6 files changed, 63 insertions(+), 38 deletions(-)
 create mode 100644 aio/src/styles/2-modules/_api-list.scss
 create mode 100644 aio/src/styles/2-modules/_banner.scss

diff --git a/aio/src/app/embedded/api/api-list.component.html b/aio/src/app/embedded/api/api-list.component.html
index f62d65d843..7d52965de5 100644
--- a/aio/src/app/embedded/api/api-list.component.html
+++ b/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>
 
diff --git a/aio/src/app/embedded/api/api-list.component.scss b/aio/src/app/embedded/api/api-list.component.scss
index 4b4569dba6..8ab4b96292 100644
--- a/aio/src/app/embedded/api/api-list.component.scss
+++ b/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 {
diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss
index 150a3179b7..e92354fc23 100644
--- a/aio/src/styles/1-layouts/_layout-global.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
new file mode 100644
index 0000000000..d927140faa
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_banner.scss b/aio/src/styles/2-modules/_banner.scss
new file mode 100644
index 0000000000..b7d136f9a4
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index 314fbbd614..502ce46fb8 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -15,4 +15,6 @@
    @import 'subsection';
    @import 'buttons';
    @import 'hero';
-   @import 'announcement-bar';
\ No newline at end of file
+   @import 'announcement-bar';
+   @import 'banner';
+   @import 'api-list';
\ No newline at end of file