From 159c98c202f0315ad5ff0677e7c14f17d718b6c2 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Wed, 22 Mar 2017 20:22:06 -0700
Subject: [PATCH] feat(aio): search result stying, add footer

---
 aio/src/app/app.component.html                | 10 ++++++-
 aio/src/styles/1-layouts/_footer.scss         | 17 +++++++++++
 aio/src/styles/1-layouts/_layouts-dir.scss    |  3 +-
 aio/src/styles/1-layouts/_search-results.scss | 30 ++++++++++++++-----
 4 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 aio/src/styles/1-layouts/_footer.scss

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 9f17aa2949..598a5a2b3f 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -8,7 +8,6 @@
 <md-sidenav-container class="sidenav-container">
 
   <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
-    <div class="version-info vertical-menu-item">{{ (versionInfo | async)?.full }}</div>
     <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
     <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
   </md-sidenav>
@@ -16,5 +15,14 @@
   <section class="sidenav-content">
     <aio-search-results #searchResults></aio-search-results>
     <aio-doc-viewer [doc]="currentDocument | async" (docRendered)="onDocRendered($event)"></aio-doc-viewer>
+
+    <footer>
+      <div class="footer">
+        <p>Powered by Google ©2010-2017. Code licensed under an <a href="/license">MIT-style License</a>.</p>
+        <p>Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+        </p>
+        <p class="version-info">Version Info | {{ (versionInfo | async)?.full }}</p>
+      </div>
+    </footer>
   </section>
 </md-sidenav-container>
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
new file mode 100644
index 0000000000..f4f091ba28
--- /dev/null
+++ b/aio/src/styles/1-layouts/_footer.scss
@@ -0,0 +1,17 @@
+footer .footer {
+    background-color: $blue;
+    color: $offwhite;
+    text-align: center;
+    font-weight: 300;
+    a {
+        color: $offwhite;
+        text-decoration: none;
+        &:hover {
+            color: $darkgray;
+            font-weight: 500;
+        }
+        &:visited {
+        text-decoration: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss
index d16c6e8f6d..fb15941007 100644
--- a/aio/src/styles/1-layouts/_layouts-dir.scss
+++ b/aio/src/styles/1-layouts/_layouts-dir.scss
@@ -5,4 +5,5 @@
 @import 'sidenav';
 @import 'content-layout';
 @import 'search-results';
-@import 'top-menu';
\ No newline at end of file
+@import 'top-menu';
+@import 'footer';
\ 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 54395077f5..be7f9d6207 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/1-layouts/_search-results.scss
@@ -1,15 +1,31 @@
 .search-results {
-    background-color: $lightgray;
     padding: 20px;
+    color: $offwhite;
+    width: 100%;
+    height: auto;
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: $darkgray;
 }
 
-.search-result-item {
-    color: $darkgray;
-    text-decoration: none;
-    &:hover {
-        color: $blue
+.search-area {
+    h2 {
+        font-size: 16px;
+        margin: 10px 0px 5px;
     }
-    &:visited {
+    a {
+        font-size: 14px;
+        color: $lightgray;
         text-decoration: none;
+        &:hover {
+            color: $blue;
+            font-weight: 500;
+        }
+        &:visited {
+        text-decoration: none;
+        }
     }
 }
\ No newline at end of file