From 4918cd241f0d9edceb0112d4530401be28360589 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Thu, 23 Mar 2017 11:58:59 -0700
Subject: [PATCH] feat(aio): search results and code margins styling

---
 aio/src/app/app.component.html                |  4 ++--
 aio/src/styles/1-layouts/_search-results.scss | 10 +++++++++-
 aio/src/styles/2-modules/_code.scss           | 12 ++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 689dff72ec..6753e99794 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -17,6 +17,8 @@
   </section>
 </md-sidenav-container>
 
+<aio-search-results #searchResults></aio-search-results>
+
 <footer>
   <div class="footer">
     <p>Powered by Google ©2010-2017. Code licensed under an <a href="/license">MIT-style License</a>.</p>
@@ -25,5 +27,3 @@
     <p class="version-info">Version Info | {{ (versionInfo | async)?.full }}</p>
   </div>
 </footer>
-
-<aio-search-results #searchResults></aio-search-results>
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss
index 63b79a0401..0833724fa8 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/1-layouts/_search-results.scss
@@ -1,12 +1,16 @@
 aio-search-results {
     z-index: 10;
+    padding: 20px;
 }
 
 .search-results {
+    display: flex;
+    flex-direction: row;
+    overflow: scroll;
     padding: 80px 20px 20px;
     color: $offwhite;
     width: 100%;
-    height: auto;
+    max-height: 40%;
     position: fixed;
     display: flex;
     top: 0;
@@ -16,6 +20,9 @@ aio-search-results {
 }
 
 .search-area {
+    display: flex;
+    flex-direction: column;
+    margin: 0px 10px;
     h2 {
         font-size: 16px;
         margin: 10px 0px 5px;
@@ -24,6 +31,7 @@ aio-search-results {
         font-size: 14px;
         color: $lightgray;
         text-decoration: none;
+        font-weight: 300;
         &:hover {
             color: $blue;
             font-weight: 500;
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 895f976b9a..798522cde9 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -3,13 +3,21 @@
     color: $darkgray;
 }
 
-.code-shell code {
+code-example[language=bash] code {
+    width: 100%;
+}
+
+.prettyprint {
+    margin: 24px auto;
+    display: flex;
+}
+
+.prettyprint.lang-bash code {
     @include codeblock($darkgray);
     color: $codegreen;
 }
 
 .code-example pre, code-example pre {
-    margin: 0px;
     padding: 0px;
     white-space: pre-wrap;
 }
\ No newline at end of file