feat(aio): api pages styling

- Banner class code consolidation for API pages - Set up temporary table of contents class and file - API pages title styling - Add color styling to doc-type listed on each API details page - Classes and SCSS variables refactor - Mobile optimization on headers, info-banner, and API pages - API page table custom styling - API Class Overview template code overview into table format
2017-04-25 09:33:09 -07:00
parent 35a2dfc177
commit bb52e22ecf
18 changed files with 259 additions and 166 deletions
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@ -58,6 +58,17 @@
      margin: 8px 0px;
    }

+    h1, h2 {
+      @media screen and (max-width: 600px) {
+        margin: 16px 0;
+      }
+    }
+
+    h3, h4, h5, h6 {
+      @media screen and (max-width: 600px) {
+        margin: 8px 0;
+      }
+    }

    .mat-tab-body-wrapper h2 {
      margin-top: 0;
--- a/aio/src/styles/1-layouts/_api-page.scss
+++ b/aio/src/styles/1-layouts/_api-page.scss
@ -4,4 +4,48 @@
    pre {
        white-space: pre-line;
    }
+
+    table.api-table {
+        min-width: 680px;
+        
+        tbody {
+            pre {
+                white-space: normal;
+                margin: 4px;
+                padding: 4px 16px;
+            }
+
+            td, th {
+                padding: 0;
+            }
+        }
+
+    }
+}
+
+.api-type-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);
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        display: block;
+        margin: 8px 0;
+    }
+
+    label {
+        font-size: 14px;
+        color: white;
+        font-weight: 500;
+        text-transform: uppercase;
+    }
+
 }
--- a/aio/src/styles/1-layouts/_layouts-dir.scss
+++ b/aio/src/styles/1-layouts/_layouts-dir.scss
@ -10,4 +10,5 @@
@import 'footer';
@import 'layout-global';
@import 'not-found';
-@import 'api-page';
+@import 'api-page';
+@import 'table-of-contents';
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@ -130,4 +130,4 @@ header.bckground-sky.l-relative {

 .text-uppercase {
  text-transform: uppercase;
-}
+}
--- a/aio/src/styles/1-layouts/_table-of-contents.scss
+++ b/aio/src/styles/1-layouts/_table-of-contents.scss
@ -0,0 +1,10 @@
+nav#main-table-of-contents {
+    width: 200px;
+    height: 900px;
+    position: fixed;
+    right: 0;
+    top: 50px;
+    bottom: 100px;
+    margin-left: 32px;
+    background-color: $blue;
+}
--- a/aio/src/styles/2-modules/_api-info-bar.scss
+++ b/aio/src/styles/2-modules/_api-info-bar.scss
@ -1,5 +1,13 @@
-.info-bar {
-    padding: 32px;
-    border-radius: 4px;
-    background-color: rgba($blue, 0.1);
+.api-info-bar {
+    max-width: 800px;
+    text-align: center;
+
+    span {
+        margin: 0 16px;
+
+        @media screen and (max-width: 600px) {
+            display: block;
+        }
+
+    }
 }
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@ -1,8 +1,11 @@
 /* API EDIT ICON */
 #api {
-  .info-bar .material-icons {
-    top: 24px;
+  .info-banner .material-icons {
    right: 48px;
+
+    @media screen and (max-width: 600px) {
+        left: 50px;
+    }
  }
 }

@ -18,11 +21,6 @@ aio-api-list {
        width: 182px;
    }

-    .api-filter.banner {
-        border: 1px solid rgba($lightgray, 0.5);
-        border-radius: 4px;
-    }
-
    .api-list-container {
      display: flex;
      flex-direction: column;
@ -33,8 +31,10 @@ aio-api-list {
 aio-api-list > div {
    display: flex;
    margin: 32px auto;
+    
    @media (max-width: 600px) {
        flex-direction: column;
+        margin: 16px auto;
    }

    > div {
@ -45,32 +45,6 @@ aio-api-list > div {
 $phone-breakpoint: 480px;
 $tablet-breakpoint: 800px;

-$layer-1: 1;
-$layer-2: 2;
-$layer-3: 3;
-$layer-4: 4;
-$layer-5: 5;
-
-
-$amber-700: #FFA000;
-$blue-400: #42A5F5;
-$blue-500: #2196F3;
-$blue-600: #1E88E5;
-$blue-800: #1565C0;
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$green-500: #4CAF50;
-$green-800: #2E7D32;
-$light-green-600: #7CB342;
-$pink-600: #D81B60;
-$purple-600: #8E24AA;
-$teal-500: #009688;
-
-$lightgrey: #F5F6F7;
-
-
 /* LAYOUT */

 .docs-content {
@ -219,51 +193,6 @@ $form-select-width: 200px;

 /* API SYMBOLS */

-/* VARIABLES */
-
-$api-symbols: (
-  all: (
-    content: ' ',
-    background: $white
-  ),
-  decorator: (
-    content: '@',
-    background: $blue-800
-  ),
-  directive: (
-    content: 'D',
-    background: $pink-600
-  ),
-  pipe: (
-    content: 'P',
-    background: $blue-grey-600
-  ),
-  class: (
-    content: 'C',
-    background: $blue-500
-  ),
-  interface: (
-    content: 'I',
-    background: $teal-500
-  ),
-  function: (
-    content: 'F',
-    background: $green-500
-  ),
-  enum: (
-    content: 'E',
-    background: $amber-700
-  ),
-  const: (
-    content: 'K',
-    background: $purple-600
-  ),
-  type-alias: (
-    content: 'T',
-    background: $light-green-600
-  )
-);
-
 /* SYMBOL CLASS */

 .symbol {
@ -278,6 +207,7 @@ $api-symbols: (
  width: 16px;

  // SYMBOL TYPES
+  // Symbol mapping variables in *constants*
  @each $name, $symbol in $api-symbols {
    &.#{$name} {
      background: map-get($symbol, background);
@ -311,6 +241,10 @@ $api-symbols: (
  padding: 0;
  overflow: hidden;

+  @media screen and (max-width: 600px) {
+        margin: 0;
+    }
+
  li {
    font-size: 14px;
    margin: 0 0 16px 0;
@ -396,16 +330,6 @@ p {
  margin-bottom: $unit;
 }

-.hr-margin {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid $lightgrey;
-  margin-top: 15px;
-  margin-bottom: 20px;
-  padding: 0;
-}
-
 .no-bg {
  background: none;
  padding: 0;
--- a/aio/src/styles/2-modules/_banner.scss
+++ b/aio/src/styles/2-modules/_banner.scss
@ -1,26 +1,20 @@
-/* Banner */
+/* BANNER */

-.banner {
+.info-banner {
    justify-content: center;
    background: $white;
+    border: 1px solid rgba($lightgray, 0.5);
+    border-radius: 4px;
    box-sizing: border-box;
-    font-size: 18px;
-    font-weight: 200;
    padding: 16px;
-    min-height: 97px;
+    background: $white;
+    height: auto;
+    overflow: visible;

-
-    @media (max-width: 480px) {
-        padding: 16px;
+    @media screen and (max-width: 600px) {
+        text-align: center;
    }

-    &.is-plain {
-        background: $white;
-        height: auto;
-        overflow: visible;
-    }
-
-
    p, .text-body {
        color: $darkgray;
        font-size: 18px;
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@ -114,19 +114,6 @@ aio-code.headed-code {
  transform: none;
 }

-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-200: #B0BEC5;
-$blue-grey-300: #90A4AE;
-$blue-grey-400: #78909C;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$blue-grey-700: #455A64;
-$blue-grey-800: #37474F;
-$blue-grey-900: #263238;
-
-$white: #FFFFFF;
-
 /* SCREEN COLORS */

  .pnk,
--- a/aio/src/styles/2-modules/_hr.scss
+++ b/aio/src/styles/2-modules/_hr.scss
@ -8,7 +8,6 @@ hr {
    display: block;
    height: 1px;
    border: 0;
-    border-top: 1px solid $lightgray;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0;
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@ -5,6 +5,13 @@ $unit: 8px;
 $main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
 $code-font: "Droid Sans Mono", monospace;

+// Z-LAYER
+$layer-1: 1;
+$layer-2: 2;
+$layer-3: 3;
+$layer-4: 4;
+$layer-5: 5;
+
 // COLOR PALETTE
 $blue: #1976D2;
 $accentblue: #1E88E5;
@ -18,11 +25,78 @@ $mist: #ECEFF1;
 $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
-$codegreen: #17ff0b;
-$green-800: #2E7D32;
 $orange: #FF9800;
 $anti-pattern: $brightred;

+// API & CODE COLORS
+$amber-700: #FFA000;
+$blue-400: #42A5F5;
+$blue-500: #2196F3;
+$blue-600: #1E88E5;
+$blue-800: #1565C0;
+$blue-grey-50: #ECEFF1;
+$blue-grey-100: #CFD8DC;
+$blue-grey-200: #B0BEC5;
+$blue-grey-300: #90A4AE;
+$blue-grey-400: #78909C;
+$blue-grey-500: #607D8B;
+$blue-grey-600: #546E7A;
+$blue-grey-700: #455A64;
+$blue-grey-800: #37474F;
+$blue-grey-900: #263238;
+$codegreen: #17ff0b;
+$green-500: #4CAF50;
+$green-800: #2E7D32;
+$light-green-600: #7CB342;
+$pink-600: #D81B60;
+$purple-600: #8E24AA;
+$teal-500: #009688;
+$lightgrey: #F5F6F7;
+
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
 $redgradient: linear-gradient(145deg,$darkred,$brightred);
+
+// API LABEL COLOR AND SYMBOLS MAP
+$api-symbols: (
+  all: (
+    content: ' ',
+    background: $white
+  ),
+  decorator: (
+    content: '@',
+    background: $blue-800
+  ),
+  directive: (
+    content: 'D',
+    background: $pink-600
+  ),
+  pipe: (
+    content: 'P',
+    background: $blue-grey-600
+  ),
+  class: (
+    content: 'C',
+    background: $blue-500
+  ),
+  interface: (
+    content: 'I',
+    background: $teal-500
+  ),
+  function: (
+    content: 'F',
+    background: $green-500
+  ),
+  enum: (
+    content: 'E',
+    background: $amber-700
+  ),
+  const: (
+    content: 'K',
+    background: $purple-600
+  ),
+  type-alias: (
+    content: 'T',
+    background: $light-green-600
+  )
+);