From 146b30796ebcf73a61cd3c1d116c2decdf58f4a0 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Mon, 27 Mar 2017 15:37:11 -0700
Subject: [PATCH] feat(aio): code blocks, copy bttn, a tag hover

---
 .../app/embedded/code/code-tabs.component.ts  |  2 +-
 aio/src/app/embedded/code/code.component.ts   |  3 +-
 aio/src/styles/0-base/_typography.scss        |  5 ++-
 aio/src/styles/1-layouts/_search-results.scss |  7 +++-
 aio/src/styles/2-modules/_code.scss           | 33 ++++++++++++++-----
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/aio/src/app/embedded/code/code-tabs.component.ts b/aio/src/app/embedded/code/code-tabs.component.ts
index 374e93ffdf..ae30a7e848 100644
--- a/aio/src/app/embedded/code/code-tabs.component.ts
+++ b/aio/src/app/embedded/code/code-tabs.component.ts
@@ -18,7 +18,7 @@ export interface TabInfo {
   selector: 'code-tabs',
   template: `
     <md-tab-group>
-      <md-tab *ngFor="let tab of tabs">
+      <md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
         <template md-tab-label>
           <span class="{{tab.class}}">{{ tab.title }}</span>
         </template>
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index 21cc48b6c2..d910e5c27e 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -23,8 +23,9 @@ const copiedLabel = 'Copied!';
 @Component({
   selector: 'aio-code',
   template: `
-    <button class="copy-button" #copyButton (click)="doCopy()">{{ buttonLabel }}</button>
+    
     <pre class="prettyprint lang-{{language}}">
+    <button class="material-icons copy-button" #copyButton (click)="doCopy()">content_copy</button>
       <code class="animated fadeIn" #codeContainer></code>
     </pre>
     `
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 12dd23069a..55e70b5735 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -107,7 +107,7 @@
       text-align: left;
     }
 
-    p code {
+    p > code {
       font-family: $code-font;
       font-size: 90%;
       color: $blue;
@@ -120,6 +120,9 @@
 
     .sidenav-content a {
       color: $blue;
+      &:hover {
+        color: $mediumgray;
+      }
     }
 
 //   }
diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss
index 77818891c6..e11cf6fce1 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/1-layouts/_search-results.scss
@@ -11,12 +11,16 @@ aio-search-results {
     width: 100%;
     max-height: 40%;
     position: fixed;
-    display: flex;
     top: 0;
     left: 0;
     right: 0;
     background-color: $darkgray;
     border: 24px solid $darkgray;
+
+    @include bp(tiny) {
+        display: block;
+        max-height: 60%;
+    }
 }
 
 .search-area {
@@ -43,5 +47,6 @@ aio-search-results {
 
     @include bp(tiny) {
         width: 100%;
+        display: block;
     }
 }
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index c5b2bf0ee6..bb65b0bac0 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -5,8 +5,8 @@ code-tabs md-tab-body {
     border-radius: 5px;
     color: $darkgray;
     display: block;
-    padding: 10px;
-    margin: 24px auto;
+    padding: 8px;
+    margin: 16px auto;
 }
 
 code-example header {
@@ -29,16 +29,33 @@ code-tabs.is-anti-pattern md-tab-body {
   border: 0.5px solid $anti-pattern;
 }
 
+code-tabs div .mat-tab-body-content {
+  height: auto;
+}
+
+code-tabs .mat-tab-body-wrapper md-tab-body .mat-tab-body {
+  overflow-y: hidden;
+}
+
+code-tabs mat-tab-body-content .fadeIn {
+  animation: opacity 2s ease-in;
+}
+
 aio-code pre {
     display: flex;
-    line-height: 1.5;
-
-    margin: 0px;
     padding: 0px;
     white-space: pre-wrap;
-    li {
-      line-height: 60%;
-    }
+}
+
+.copy-button {
+  top: -16px;
+  right: -16px;
+  color: $lightgray;
+  background-color: transparent;
+  border: none;
+  &:hover {
+    color: $mediumgray;
+  }
 }
 
 $blue-grey-50: #ECEFF1;