From cc1ed77dd85afb03a381932cfaa0baf5feb22eeb Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Tue, 11 Apr 2017 19:37:03 -0700
Subject: [PATCH] consolidated and moved api-list scss

---
 .../app/embedded/api/api-list.component.scss  | 477 ------------------
 .../app/embedded/api/api-list.component.ts    |   3 +-
 aio/src/styles/2-modules/_api-list.scss       | 431 ++++++++++++++++
 3 files changed, 432 insertions(+), 479 deletions(-)
 delete mode 100644 aio/src/app/embedded/api/api-list.component.scss

diff --git a/aio/src/app/embedded/api/api-list.component.scss b/aio/src/app/embedded/api/api-list.component.scss
deleted file mode 100644
index 8ab4b96292..0000000000
--- a/aio/src/app/embedded/api/api-list.component.scss
+++ /dev/null
@@ -1,477 +0,0 @@
-/* HACKED FROM aio v.1 */
-
-// TODO:refactor out those parts that should be shared SASS files and import them here
-
-/*
-* Metrics
-*
-* Metrics based on material design 8pt unit
-*/
-
-$unit: 8px;
-$phone-breakpoint: 480px;
-$tablet-breakpoint: 800px;
-
-/*
-* Layer Stacking
-*
-* The approved range that can be used for layering (z-indexes)
-*/
-
-$layer-1: 1;
-$layer-2: 2;
-$layer-3: 3;
-$layer-4: 4;
-$layer-5: 5;
-
-/*
- * Colors from original _colors.scss
- */
-$white: #FFFFFF;
-$black: #000000;
-
-$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 {
-  position: relative;
-}
-
-.l-content-small {
-  padding: 16px;
-  max-width: 1100px;
-  margin: 0;
-
-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    padding: 0;
-    padding-top: ($unit * 3);
-  }
-}
-
-/*
-* SEARCH BAR
-*/
-
-.form-search {
-  position: relative;
-
-  input {
-    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-    box-sizing: border-box;
-    border: 1px solid $white;
-    color: $blue-600;
-    font-size: 16px;
-    height: $unit * 4;
-    line-height: $unit * 4;
-    outline: none;
-    padding: 0 ($unit *2) 0 ($unit * 4);
-    transition: all .2s;
-
-    // PLACEHOLDER TEXT
-    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &::-moz-placeholder { /* Firefox 19+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-ms-input-placeholder { /* IE 10+ */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-    &:-moz-placeholder { /* Firefox 18- */
-      color: $blue-grey-100;
-      font-size: 14px;
-    }
-
-    &:focus {
-      border: 1px solid $blue-400;
-      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
-    }
-  }
-
-  .material-icons {
-    color: $blue-grey-100;
-    font-size: 20px;
-    left: $unit;
-    position: absolute;
-    top: 6px;
-    z-index: $layer-1;
-  }
-}
-
-/*
-* Select Menu
-*/
-
-$form-select-width: 200px;
-
-.form-select-menu {
-  position: relative;
-}
-
-.form-select-button {
-  background: $white;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-  box-sizing: border-box;
-  border: 1px solid $white;
-  color: $blue-grey-600;
-  font-size: 12px;
-  font-weight: 400;
-  height: $unit * 4;
-  line-height: $unit * 4;
-  outline: none;
-  padding: 0 ($unit * 2);
-  text-align: left;
-  width: $form-select-width - ($unit * 2);
-
-  strong {
-    font-weight: 600;
-    margin-right: $unit;
-    text-transform: uppercase;
-  }
-
-  &.has-symbol {
-    .symbol {
-      margin-right: $unit;
-    }
-  }
-}
-
-.form-select-dropdown {
-  background: $white;
-  box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
-  border-radius: 4px;
-  left: -$unit;
-  list-style-type: none;
-  margin: 0;
-  padding: $unit 0;
-  position: absolute;
-  top: -$unit;
-  width: 200px;
-  z-index: $layer-2;
-
-  li {
-    cursor: pointer;
-    font-size: 14px;
-    line-height: $unit * 4;
-    margin: 0;
-    padding: 0 ($unit * 2) 0 ($unit * 5);
-    position: relative;
-    transition: all .2s;
-
-    &:hover {
-      background: $blue-grey-50;
-      color: $blue-500;
-    }
-
-    &.selected {
-      background-color: $blue-grey-100;
-    }
-
-    .symbol {
-      left: $unit * 2;
-      position: absolute;
-      top: $unit;
-      z-index: $layer-5;
-    }
-  }
-}
-
-/*
-* 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 {
-  border-radius: 2px;
-  box-shadow: 0 1px 2px rgba($black, .24);
-  color: $white;
-  display: inline-block;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: $unit * 2;
-  text-align: center;
-  width: $unit * 2;
-
-  // SYMBOL TYPES
-  @each $name, $symbol in $api-symbols {
-    &.#{$name} {
-      background: map-get($symbol, background);
-
-      &:before {
-        content: map-get($symbol, content);
-      }
-    }
-  }
-}
-
-/*
-* API Home Page
-*
-*/
-
-/*
-* API Filter Menu
-*
-*/
-
-.api-filter {
-  .form-select-menu {
-    float: left;
-  }
-
-  .form-search {
-    float: left;
-  }
-}
-
-
-/*
-* API Class List
-*
-*/
-
-.docs-content .api-list {
-  list-style: none;
-  margin: 0 0 ($unit * 6) 0;
-  padding: 0;
-  overflow: hidden;
-
-  li {
-    font-size: 14px;
-    margin: 0 0 ($unit * 2) 0;
-    line-height: 14px;
-    padding: 0;
-    float: left;
-    width: 33%;
-    min-width: 220px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    .symbol {
-      margin-right: $unit;
-    }
-    a {
-      color: $blue-grey-600;
-      display: inline-block;
-      line-height: $unit * 2;
-      padding: 0 ($unit * 2) 0 0;
-      text-decoration: none;
-      transition: all .3s;
-
-      &:hover {
-        background: $blue-grey-50;
-        color: $blue-500;
-      }
-    }
-  }
-}
-
-.docs-content .h2-api-docs,
-.docs-content .h2-api-docs:first-of-type {
-  font-size: 18px;
-  line-height: 24px;
-  margin-top: 0;
-}
-
-.code-links {
-  a {
-    code, .api-doc-code {
-      color: #1E88E5 !important;
-    }
-  }
-}
-
-.openParens {
-  margin-top: 15px;
-}
-
-.endParens {
-  margin-bottom: 20px !important;
-}
-
-p {
-
-  &.selector {
-    margin: 0;
-  }
-
-  &.location-badge {
-    margin: 0 0 16px 16px !important;
-  }
-
-  .api-doc-code {
-    border-bottom: 0;
-
-    :hover {
-      border-bottom: none;
-    }
-  }
-}
-
-.row-margin {
-  margin-bottom: 36px;
-  h2 {
-    line-height: 28px;
-  }
-}
-
-.code-margin {
-  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;
-}
-
-.no-bg-with-indent {
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 16px;
-  margin-top: 6px;
-  margin-bottom: 0;
-  background: none;
-}
-
-.code-background {
-  padding: 0 5px 0;
-
-  span.pln {
-    color: #1E88E5 !important;
-  }
-}
-
-.code-anchor {
-  cursor: pointer;
-  text-decoration: none;
-
-  // Override highlight.js
-  .kwd {
-    color: #1E88E5 !important;
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.api-doc-code {
-  font-size: 14px;
-  color: #1a2326;
-
-  // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
-  &.no-pln {
-    .pln:last-child {
-      display: none;
-    }
-  }
-}
-
-
-@media screen and (max-width: 600px) {
-  .docs-content {
-    // Overrides display flex from angular material.
-    // This was added because Safari doesn't play nice with layout="column".
-    // Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.
-    .layout-xs-column {
-      display: block !important;
-    }
-  }
-
-  .api-doc-code {
-    font-size: 12px;
-  }
-
-  p.location-badge {
-    position: relative;
-    font-size: 11px;
-  }
-}
diff --git a/aio/src/app/embedded/api/api-list.component.ts b/aio/src/app/embedded/api/api-list.component.ts
index 9f1144de67..c252699fc2 100644
--- a/aio/src/app/embedded/api/api-list.component.ts
+++ b/aio/src/app/embedded/api/api-list.component.ts
@@ -28,8 +28,7 @@ class SearchCriteria {
 
 @Component({
   selector: 'aio-api-list',
-  templateUrl: './api-list.component.html',
-  styleUrls: ['./api-list.component.scss']
+  templateUrl: './api-list.component.html'
 })
 export class ApiListComponent implements OnInit {
 
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index d927140faa..f42f0d9cbe 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -1,3 +1,4 @@
+/* API LIST STYLES */
 
 aio-api-list {
     div.form-search i.material-icons {
@@ -20,4 +21,434 @@ aio-api-list > div {
     > div {
         margin: 8px;
     }
+}
+
+$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 {
+  position: relative;
+}
+
+.l-content-small {
+  padding: 16px;
+  max-width: 1100px;
+  margin: 0;
+
+  @media handheld and (max-width: $phone-breakpoint),
+  screen and (max-device-width: $phone-breakpoint),
+  screen and (max-width: $tablet-breakpoint) {
+    padding: 0;
+    padding-top: ($unit * 3);
+  }
+}
+
+/* SEARCH BAR */
+
+.form-search {
+  position: relative;
+
+  input {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    box-sizing: border-box;
+    border: 1px solid $white;
+    color: $blue-600;
+    font-size: 16px;
+    height: 32px;
+    line-height: 32px;
+    outline: none;
+    padding: 0 16px 0 32px;
+    transition: all .2s;
+
+    // PLACEHOLDER TEXT
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+
+    &:focus {
+      border: 1px solid $blue-400;
+      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+    }
+  }
+
+  .material-icons {
+    color: $blue-grey-100;
+    font-size: 20px;
+    left: $unit;
+    position: absolute;
+    top: 6px;
+    z-index: $layer-1;
+  }
+}
+
+/* SELECT MENU */
+
+$form-select-width: 200px;
+
+.form-select-menu {
+  position: relative;
+}
+
+.form-select-button {
+  background: $white;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  border: 1px solid $white;
+  color: $blue-grey-600;
+  font-size: 12px;
+  font-weight: 400;
+  height: 32px;
+  line-height: 32px;
+  outline: none;
+  padding: 0 16px;
+  text-align: left;
+  width: $form-select-width - 16px;
+
+  strong {
+    font-weight: 600;
+    margin-right: 8px;
+    text-transform: uppercase;
+  }
+
+  &.has-symbol {
+    .symbol {
+      margin-right: 8px;
+    }
+  }
+}
+
+.form-select-dropdown {
+  background: $white;
+  box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
+  border-radius: 4px;
+  left: -8px;
+  list-style-type: none;
+  margin: 0;
+  padding: 8px 0;
+  position: absolute;
+  top: -8px;
+  width: 200px;
+  z-index: $layer-2;
+
+  li {
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 32px;
+    margin: 0;
+    padding: 0 16px 0 40px;
+    position: relative;
+    transition: all .2s;
+
+    &:hover {
+      background: $blue-grey-50;
+      color: $blue-500;
+    }
+
+    &.selected {
+      background-color: $blue-grey-100;
+    }
+
+    .symbol {
+      left: 16px;
+      position: absolute;
+      top: 8px;
+      z-index: $layer-5;
+    }
+  }
+}
+
+/* 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 {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba($black, .24);
+  color: $white;
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  width: 16px;
+
+  // SYMBOL TYPES
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+
+      &:before {
+        content: map-get($symbol, content);
+      }
+    }
+  }
+}
+
+/* API HOMEE PAGE */
+
+/* API FILTER MENU */
+
+.api-filter {
+  .form-select-menu {
+    float: left;
+  }
+
+  .form-search {
+    float: left;
+  }
+}
+
+/* API CLASS LIST */
+
+.docs-content .api-list {
+  list-style: none;
+  margin: 0 0 48px 0;
+  padding: 0;
+  overflow: hidden;
+
+  li {
+    font-size: 14px;
+    margin: 0 0 16px 0;
+    line-height: 14px;
+    padding: 0;
+    float: left;
+    width: 33%;
+    min-width: 220px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .symbol {
+      margin-right: $unit;
+    }
+    a {
+      color: $blue-grey-600;
+      display: inline-block;
+      line-height: 16px;
+      padding: 0 16px 0 0;
+      text-decoration: none;
+      transition: all .3s;
+
+      &:hover {
+        background: $blue-grey-50;
+        color: $blue-500;
+      }
+    }
+  }
+}
+
+.docs-content .h2-api-docs,
+.docs-content .h2-api-docs:first-of-type {
+  font-size: 18px;
+  line-height: 24px;
+  margin-top: 0;
+}
+
+.code-links {
+  a {
+    code, .api-doc-code {
+      color: #1E88E5 !important;
+    }
+  }
+}
+
+.openParens {
+  margin-top: 15px;
+}
+
+.endParens {
+  margin-bottom: 20px !important;
+}
+
+p {
+
+  &.selector {
+    margin: 0;
+  }
+
+  &.location-badge {
+    margin: 0 0 16px 16px !important;
+  }
+
+  .api-doc-code {
+    border-bottom: 0;
+
+    :hover {
+      border-bottom: none;
+    }
+  }
+}
+
+.row-margin {
+  margin-bottom: 36px;
+  h2 {
+    line-height: 28px;
+  }
+}
+
+.code-margin {
+  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;
+}
+
+.no-bg-with-indent {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 16px;
+  margin-top: 6px;
+  margin-bottom: 0;
+  background: none;
+}
+
+.code-background {
+  padding: 0 5px 0;
+
+  span.pln {
+    color: #1E88E5 !important;
+  }
+}
+
+.code-anchor {
+  cursor: pointer;
+  text-decoration: none;
+
+  // Override highlight.js
+  .kwd {
+    color: #1E88E5 !important;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.api-doc-code {
+  font-size: 14px;
+  color: #1a2326;
+
+  // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
+  &.no-pln {
+    .pln:last-child {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .docs-content {
+    // Overrides display flex from angular material.
+    // This was added because Safari doesn't play nice with layout="column".
+    // Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.
+    .layout-xs-column {
+      display: block !important;
+    }
+  }
+
+  .api-doc-code {
+    font-size: 12px;
+  }
+
+  p.location-badge {
+    position: relative;
+    font-size: 11px;
+  }
 }
\ No newline at end of file