From d27588b5fb3c5bb3cc49ec8a6bf71c1674dd3290 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Thu, 4 May 2017 14:58:54 -0700
Subject: [PATCH] feat(aio): api label styles

- Moved info bar section in pipe template to be the first section to match other templates
- Fixed label styling for type label
- Added label styling for status label
---
 aio/src/styles/1-layouts/_api-page.scss       | 35 +++++++++++--------
 aio/src/styles/2-modules/_banner.scss         |  3 +-
 .../templates/api/export-base.template.html   |  2 +-
 .../templates/api/includes/what-it-does.html  |  2 +-
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/aio/src/styles/1-layouts/_api-page.scss b/aio/src/styles/1-layouts/_api-page.scss
index aff62ef41d..26cc1585ee 100644
--- a/aio/src/styles/1-layouts/_api-page.scss
+++ b/aio/src/styles/1-layouts/_api-page.scss
@@ -36,29 +36,34 @@
     }
 }
 
-.api-type-label {
+
+.api-header label {
     border-radius: 4px;
     padding: 4px 16px;
-    background-color: $accentblue;
     display: inline;
-    margin: 0 16px;
-
-    @each $name, $symbol in $api-symbols {
-        &.#{$name} {
-            background: map-get($symbol, background);
-        }
-    }
-
+    font-size: 14px;
+    color: white;
+    margin: 0 8px 0 16px;
+    font-weight: 500;
+    text-transform: uppercase;
+    
     @media screen and (max-width: 600px) {
         display: block;
         margin: 8px 0;
     }
 
-    label {
-        font-size: 14px;
-        color: white;
-        font-weight: 500;
-        text-transform: uppercase;
+    &.api-status-label {
+        background-color: $mediumgray;
     }
 
+    &.api-type-label {
+        background-color: $accentblue;
+
+        @each $name, $symbol in $api-symbols {
+            &.#{$name} {
+                background: map-get($symbol, background);
+            }
+        }
+
+    }
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_banner.scss b/aio/src/styles/2-modules/_banner.scss
index cbe380857a..1773713fc5 100644
--- a/aio/src/styles/2-modules/_banner.scss
+++ b/aio/src/styles/2-modules/_banner.scss
@@ -1,6 +1,7 @@
 /* BANNER */
 
 .info-banner {
+    margin: 16px 0;
     justify-content: center;
     background: $white;
     border: 1px solid rgba($lightgray, 0.5);
@@ -17,8 +18,8 @@
 
     p, .text-body {
         color: $darkgray;
-        font-size: 18px;
         line-height: 32px;
         margin: 0;
+        text-align: center;
     }
 }
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/api/export-base.template.html b/aio/tools/transforms/templates/api/export-base.template.html
index 3677198a98..b1435b5c71 100644
--- a/aio/tools/transforms/templates/api/export-base.template.html
+++ b/aio/tools/transforms/templates/api/export-base.template.html
@@ -1,8 +1,8 @@
 {% extends 'base.template.html' -%}
 
 {% block body %}
-  {% include "includes/what-it-does.html" %}
   {% include "includes/info-bar.html" %}
+  {% include "includes/what-it-does.html" %}
   {% include "includes/security-notes.html" %}
   {% include "includes/deprecation.html" %}
   {% include "includes/how-to-use.html" %}
diff --git a/aio/tools/transforms/templates/api/includes/what-it-does.html b/aio/tools/transforms/templates/api/includes/what-it-does.html
index faf96fa59a..b492b932a7 100644
--- a/aio/tools/transforms/templates/api/includes/what-it-does.html
+++ b/aio/tools/transforms/templates/api/includes/what-it-does.html
@@ -1,5 +1,5 @@
 {%- if doc.whatItDoes %}
-<div class="what-it-does">
+<div class="what-it-does info-banner">
   {$ doc.whatItDoes | marked $}
 </div>
 {% endif %}
\ No newline at end of file