From 43a9619e57c4e38fa91c035d98900f989c004370 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Tue, 28 Mar 2017 17:15:02 -0700
Subject: [PATCH] feat(aio): overall margin, code, alert styles

---
 .../app/embedded/api/api-list.component.scss  |  2 +-
 .../app/embedded/code/code-tabs.component.ts  |  2 +-
 aio/src/app/embedded/code/code.component.ts   |  2 +-
 .../app/layout/top-menu/top-menu.component.ts |  1 +
 aio/src/styles/0-base/_typography.scss        | 20 +++--
 aio/src/styles/1-layouts/_content-layout.scss |  5 +-
 aio/src/styles/1-layouts/_footer.scss         |  4 +-
 aio/src/styles/1-layouts/_search-results.scss |  2 +-
 aio/src/styles/1-layouts/_sidenav.scss        |  2 +-
 aio/src/styles/1-layouts/_top-menu.scss       | 10 +--
 aio/src/styles/2-modules/_alert.scss          | 10 ++-
 aio/src/styles/2-modules/_code.scss           | 85 ++++++++-----------
 aio/src/styles/2-modules/_filetree.scss       |  2 +-
 aio/src/styles/2-modules/_hamburger.scss      |  4 +-
 aio/src/styles/2-modules/_images.scss         |  4 +-
 aio/src/styles/2-modules/_table.scss          |  2 +-
 aio/src/styles/_constants.scss                |  1 +
 aio/src/styles/_mixins.scss                   |  2 +-
 18 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/aio/src/app/embedded/api/api-list.component.scss b/aio/src/app/embedded/api/api-list.component.scss
index d59364c575..4b4569dba6 100644
--- a/aio/src/app/embedded/api/api-list.component.scss
+++ b/aio/src/app/embedded/api/api-list.component.scss
@@ -413,7 +413,7 @@ p {
   }
 
   .api-doc-code {
-    border-bottom: 0px;
+    border-bottom: 0;
 
     :hover {
       border-bottom: none;
diff --git a/aio/src/app/embedded/code/code-tabs.component.ts b/aio/src/app/embedded/code/code-tabs.component.ts
index ae30a7e848..e0e4a51499 100644
--- a/aio/src/app/embedded/code/code-tabs.component.ts
+++ b/aio/src/app/embedded/code/code-tabs.component.ts
@@ -17,7 +17,7 @@ export interface TabInfo {
 @Component({
   selector: 'code-tabs',
   template: `
-    <md-tab-group>
+    <md-tab-group class="code-tab-group">
       <md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
         <template md-tab-label>
           <span class="{{tab.class}}">{{ tab.title }}</span>
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index d910e5c27e..8b27869ad5 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -25,7 +25,7 @@ const copiedLabel = 'Copied!';
   template: `
     
     <pre class="prettyprint lang-{{language}}">
-    <button class="material-icons copy-button" #copyButton (click)="doCopy()">content_copy</button>
+      <button class="material-icons copy-button" (click)="doCopy()">content_copy</button>
       <code class="animated fadeIn" #codeContainer></code>
     </pre>
     `
diff --git a/aio/src/app/layout/top-menu/top-menu.component.ts b/aio/src/app/layout/top-menu/top-menu.component.ts
index 5b5539c970..05e2a4026b 100644
--- a/aio/src/app/layout/top-menu/top-menu.component.ts
+++ b/aio/src/app/layout/top-menu/top-menu.component.ts
@@ -8,6 +8,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
       <li><a class="nav-link" href="overview" title="Angular Documentation">Docs</a></li>
       <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url" [title]="node.title">{{ node.title }}</a></li>
     </ul>`,
+
   styleUrls: ['top-menu.component.scss']
 })
 export class TopMenuComponent {
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 55e70b5735..3bdafe5bdb 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -13,7 +13,7 @@
       display:inline-block;
       font-size: 36px;
       font-weight: 400;
-      margin: 12px 0px;
+      margin: 8px 0px;
     }
 
     h1:after {
@@ -21,21 +21,20 @@
       display: block;
       height: 1px;
       width: 40%;
-      margin: 30px 0px 10px;
+      margin: 32px 0px 10px;
       background: $lightgray;
     }
 
     h2 {
       font-size: 30px;
       font-weight: 500;
-      margin: 48px 0px 32px;
+      margin: 32px 0px 24px;
     }
 
     h3 {
       font-size: 24px;
       font-weight: 500;
-      margin: 12px 0px;
-      text-transform: uppercase;
+      margin: 24px 0px;
     }
 
     h4 {
@@ -52,7 +51,7 @@
     }
 
     .mat-tab-body-wrapper h2 {
-      margin-top: 0px;
+      margin-top: 0;
     }
 
     p, ol, ul, ol, li, input, a  {
@@ -77,6 +76,10 @@
       text-transform: uppercase;
     }
 
+    strong {
+      font-weight: 500;
+    }
+
     table {
       border-collapse: collapse;
       border-radius: 2px;
@@ -118,6 +121,11 @@
       border-radius: 4px;
     }
 
+    code {
+      font-family: $code-font;
+      font-size: 90%;
+    }
+
     .sidenav-content a {
       color: $blue;
       &:hover {
diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index cd0891e6dd..ef4685160c 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -1,6 +1,5 @@
 .sidenav-content {
-  padding: 1rem 3rem;
-  height: 100vh;
+  padding: 1rem 3rem 3rem;
   margin: auto;
 }
 
@@ -25,7 +24,7 @@
 
 .l-sub-section {
   color: $blue;
-  margin: 0px 0px 10px 0px;
+  margin: 0 0 10px 0px;
   padding: 10px;
   background: $offwhite;
   border-left: 4px solid $blue;
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
index 859aa3b6cd..01b07787a0 100644
--- a/aio/src/styles/1-layouts/_footer.scss
+++ b/aio/src/styles/1-layouts/_footer.scss
@@ -1,8 +1,10 @@
 footer {
     position: relative;
+    line-height: 24px;
 }
 
 footer .footer {
+    flex: 1;
     padding: 20px;
     z-index: 10;
     background-color: $blue;
@@ -20,7 +22,7 @@ footer .footer {
         }
     }
     p {
-        margin: 0px 0px 5px;
+        margin: 0 0 5px;
     }
 }
 
diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss
index e11cf6fce1..20ab21cb29 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/1-layouts/_search-results.scss
@@ -26,7 +26,7 @@ aio-search-results {
 .search-area {
     display: flex;
     flex-direction: column;
-    margin: 0px 10px;
+    margin: 0 10px;
     h2 {
         font-size: 16px;
         margin: 10px 0px 5px;
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 8aa7abdfcb..c463319f0f 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -34,7 +34,7 @@ aio-nav-menu.top-menu .vertical-menu-item  {
   outline: none;
 
   &:hover {
-    text-shadow: 0px 0px 5px #ffffff;
+    text-shadow: 0 0 5px #ffffff;
     background-color: $lightgray;
   }
 
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 27101c3a63..c1e80e908b 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -10,20 +10,20 @@ aio-top-menu ul {
   flex-direction: row;
   align-items: center;
   list-style-position: inside;
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
 }
 
 aio-top-menu li {
   list-style-type: none;
-  padding: 0px;
+  padding: 0;
 }
 
 md-toolbar.mat-toolbar {
   position: relative;
   z-index: 10;
-  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30);
-  padding: 0 16px 0px 0px;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
+  padding: 0 16px 0 0;
 }
 
 .search-container {
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
index b0f01095b1..eed3f42bb4 100644
--- a/aio/src/styles/2-modules/_alert.scss
+++ b/aio/src/styles/2-modules/_alert.scss
@@ -1,7 +1,6 @@
 .alert {
-    display: flex;
-    padding: 0px 10px;
-    margin: 20px 0px;
+    padding: 16px;
+    margin: 24px 0px;
     font-size: 14px;
     color: $darkgray;
     &.is-critical {
@@ -18,4 +17,9 @@
         border-left: 10px solid $blue;
         background-color: rgba($blue, 0.05);
     }
+
+    p {
+        margin: 0;
+        padding: 8px 16px;
+    }
 }
\ 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 677f535956..c4f0c26bc5 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -43,11 +43,26 @@ code-tabs mat-tab-body-content .fadeIn {
 
 aio-code pre {
     display: flex;
-    padding: 0px;
+    padding: 0;
     white-space: pre-wrap;
 }
 
-.lang-ts .copy-button {
+code ol {
+  font-family: $main-font;
+  color: $lightgray;
+  
+  li {
+    margin: 0;
+    font-family: $code-font;
+    font-size: 90%;
+  }
+}
+
+.prettyprint {
+  position: relative;
+}
+
+.copy-button {
   top: -16px;
   right: -16px;
   color: $lightgray;
@@ -58,8 +73,8 @@ aio-code pre {
   }
 }
 
-.lang- .copy-button {
-  visibility: hidden;
+.code-tab-group div.mat-tab-body-content {
+  height: auto;
 }
 
 $blue-grey-50: #ECEFF1;
@@ -73,36 +88,6 @@ $blue-grey-700: #455A64;
 $blue-grey-800: #37474F;
 $blue-grey-900: #263238;
 
-$pink-50: #FCE4EC;
-$pink-100: #F8BBD0;
-$pink-200: #F48FB1;
-$pink-300: #F06292;
-$pink-400: #EC407A;
-$pink-500: #E91E63;
-$pink-600: #D81B60;
-$pink-700: #C2185B;
-$pink-800: #AD1457;
-$pink-900: #880E4F;
-$pink-A100: #FF80AB;
-$pink-A200: #FF4081;
-$pink-A400: #F50057;
-$pink-A700: #C51162;
-
-$teal-50: #E0F2F1;
-$teal-100: #B2DFDB;
-$teal-200: #80CBC4;
-$teal-300: #4DB6AC;
-$teal-400: #26A69A;
-$teal-500: #009688;
-$teal-600: #00897B;
-$teal-700: #00796B;
-$teal-800: #00695C;
-$teal-900: #004D40;
-$teal-A100: #A7FFEB;
-$teal-A200: #64FFDA;
-$teal-A400: #1DE9B6;
-$teal-A700: #00BFA5;
-
 $white: #FFFFFF;
 
   /*
@@ -126,33 +111,33 @@ $white: #FFFFFF;
     outline: 1px solid rgba($blue-grey-700, .56);
   }
   .kwd {
-    color: $pink-600;
+    color: $darkgray;
   }
   .typ,
   .tag {
-    color: $pink-600;
+    color: $darkred;
   }
   .str,
   .atv {
-    color: $teal-700;
+    color: $blue;
   }
   .atn {
-    color: $teal-700;
+    color: $blue;
   }
   .com {
-    color: $teal-700;
+    color: $mediumgray;
   }
   .lit {
-    color: $teal-700;
+    color: $blue;
   }
   .pun {
     color: $blue-grey-700;
   }
   .pln {
-    color: $blue-grey-700;
+    color: $green-800;
   }
   .dec {
-    color: $teal-700;
+    color: $blue;
   }
 
 
@@ -170,32 +155,32 @@ $white: #FFFFFF;
     }
 
     .kwd {
-      color: $pink-600;
+      color: $darkgray;
     }
     .typ,
     .tag {
-      color: $pink-600;
+      color: $darkred;
     }
     .str,
     .atv {
-      color: $teal-700;
+      color: $blue;
     }
     .atn {
-      color: $teal-700;
+      color: $blue;
     }
     .com {
-      color: $teal-700;
+      color: $mediumgray;
     }
     .lit {
-      color: $teal-700;
+      color: $blue;
     }
     .pun {
       color: $blue-grey-700;
     }
     .pln {
-      color: $blue-grey-700;
+      color: $green-800;
     }
     .dec {
-      color: $teal-700;
+      color: $blue;
     }
   }
diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss
index 99c39370f0..1208c59ff1 100644
--- a/aio/src/styles/2-modules/_filetree.scss
+++ b/aio/src/styles/2-modules/_filetree.scss
@@ -2,7 +2,7 @@
   background: $offwhite;
   box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
   border: 4px solid $lightgray;
-  margin: 0px 0px 5px 0px;
+  margin: 0 0 5px 0;
   padding: 10px;
 
   .file {
diff --git a/aio/src/styles/2-modules/_hamburger.scss b/aio/src/styles/2-modules/_hamburger.scss
index 1d2c481801..1380f1637b 100644
--- a/aio/src/styles/2-modules/_hamburger.scss
+++ b/aio/src/styles/2-modules/_hamburger.scss
@@ -10,8 +10,8 @@
 .hamburger.mat-button {
     transition: color 0.2s;
     height: 100%;
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
 }
 
 .hamburger.mat-button:hover {
diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss
index 5ec712fced..23bfaa48da 100644
--- a/aio/src/styles/2-modules/_images.scss
+++ b/aio/src/styles/2-modules/_images.scss
@@ -4,8 +4,8 @@
   background: $white;
   padding: 20px;
   display: inline-block;
-  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
-  margin: 0px 0px 10px 0px;
+  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
+  margin: 0 0 10px 0;
 
   img {
     border-radius: 4px;
diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss
index 13fd524ff5..79682eae96 100644
--- a/aio/src/styles/2-modules/_table.scss
+++ b/aio/src/styles/2-modules/_table.scss
@@ -15,7 +15,7 @@ table {
       color: $darkgray;
       font-size: 12px;
       font-weight: 500;
-      padding: 0px 24px;
+      padding: 0 24px;
       text-align: left;
       text-transform: uppercase;
     }
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index 53eb4296f2..54734e9370 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -16,6 +16,7 @@ $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
 $codegreen: #17ff0b;
+$green-800: #2E7D32;
 $orange: #FF9800;
 $anti-pattern: $brightred;
 
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index 58799989b7..d467eeeae3 100644
--- a/aio/src/styles/_mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -54,6 +54,6 @@
     background-color: $bgcolor;
     border-radius: 5px;
     padding: 20px;
-    margin: 0px auto; // was 24
+    margin: 0 auto; // was 24
     border: 0.5px solid $lightgray;
 }
\ No newline at end of file