From 0c7eb93889beb3dd8d7f98ab5f3b5c66f95a5753 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Sun, 11 Jun 2017 21:38:34 +0100
Subject: [PATCH] fix(aio): tidy up layout of api filter page

* Remove the "info-banner" styling from the filters.
* Fix alignment of the search box on a narrow screen (closes #17395)
* Remove unnecessary whitespace before section headers
---
 .../app/embedded/api/api-list.component.html  |  2 +-
 aio/src/styles/2-modules/_api-list.scss       | 32 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/aio/src/app/embedded/api/api-list.component.html b/aio/src/app/embedded/api/api-list.component.html
index fa0dc36761..893947fcaf 100644
--- a/aio/src/app/embedded/api/api-list.component.html
+++ b/aio/src/app/embedded/api/api-list.component.html
@@ -1,4 +1,4 @@
-<div class="l-flex-wrap info-banner api-filter">
+<div class="l-flex-wrap api-filter">
 
   <aio-select (change)="setType($event.option)"
               [options]="types"
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index 11742ccaec..df98fae588 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -1,11 +1,7 @@
 /* API EDIT ICON */
 #api {
-  .info-banner .material-icons {
+  .api-filter .material-icons {
     right: 48px;
-
-    @media screen and (max-width: 600px) {
-        left: 50px;
-    }
   }
 }
 
@@ -25,21 +21,25 @@ aio-api-list {
       display: flex;
       flex-direction: column;
       margin: 0 auto;
+
+      h2 {
+        margin-top: 16px;
+      }
     }
 }
 
-aio-api-list > div {
-    display: flex;
-    margin: 32px auto;
+.api-filter {
+  display: flex;
+  margin: 0 auto;
 
-    @media (max-width: 600px) {
-        flex-direction: column;
-        margin: 16px auto;
-    }
+  @media (max-width: 600px) {
+      flex-direction: column;
+      margin: 16px auto;
+  }
 
-    .form-select-menu, .form-search {
-        margin: 8px;
-    }
+  .form-select-menu, .form-search {
+      margin: 8px;
+  }
 }
 
 $phone-breakpoint: 480px;
@@ -165,7 +165,7 @@ $tablet-breakpoint: 800px;
 
 .docs-content .api-list {
   list-style: none;
-  margin: 0 0 48px -8px;
+  margin: 0 0 32px -8px;
   padding: 0;
   overflow: hidden;