docs(toh-6): Move styles from sample.css to heroes.component.css

closes #1751
Move additional styles from `sample.css` to `hero-search.component.css`.
Edit tutorial to reflect the removal of `sample.css` and the change to `heroes.component.css`.
Edit tutorial to reflect the addition of `hero-search.component.css` file.
Edit `hero-search.component.ts` to include styles from `hero-search.component.css`.
Remove reference to `/public/docs/_examples/toh-6/ts/sample.css` from `/public/docs/_examples/toh-6/ts/index.html`.

Author: Adam-Meisen

public/docs/_examples/toh-6/ts/sample.css …s/toh-6/ts/app/hero-search.component.csspublic/docs/_examples/toh-6/ts/sample.css renamed to public/docs/_examples/toh-6/ts/app/hero-search.component.css public/docs/_examples/toh-6/ts/sample.css renamed to public/docs/_examples/toh-6/ts/app/hero-search.component.css

@@ -1,11 +1,4 @@
 /* #docregion */
-.error {color:red;}
-button.delete-button{
-  float:right;
-  background-color: gray !important;
-  color:white;
-}
-
 .search-result{
   border-bottom: 1px solid gray;
   border-left: 1px solid gray;
@@ -21,4 +14,3 @@ button.delete-button{
   width: 200px;
   height: 20px;
 }
-

public/docs/_examples/toh-6/ts/app/hero-search.component.ts

@@ -11,6 +11,7 @@ import { Hero } from './hero';
 @Component({
   selector: 'hero-search',
   templateUrl: 'app/hero-search.component.html',
+  styleUrls:  ['app/hero-search.component.css'],
   providers: [HeroSearchService]
 })
 export class HeroSearchComponent implements OnInit {

public/docs/_examples/toh-6/ts/app/heroes.component.css

@@ -1,3 +1,4 @@
+/* #docregion */
 .selected {
   background-color: #CFD8DC !important;
   color: white;
@@ -57,3 +58,10 @@ button {
 button:hover {
   background-color: #cfd8dc;
 }
+/* #docregion additions */
+.error {color:red;}
+button.delete-button{
+  float:right;
+  background-color: gray !important;
+  color:white;
+}

public/docs/_examples/toh-6/ts/index.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>

public/docs/ts/latest/tutorial/toh-pt6.jade

@@ -319,7 +319,9 @@ block add-new-hero-via-detail-comp
   The user can *delete* an existing hero by clicking a delete button next to the hero's name.
   Add the following to the heroes component HTML right after the hero name in the repeated `<li>` tag:
 +makeExcerpt('app/heroes.component.html', 'delete')
-
+:marked
+  Add the following to the bottom of the `HeroesComponent` CSS file:
++makeExcerpt('app/heroes.component.css', 'additions')
 :marked
   Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions used in the template.
   Let's start with *add*.
@@ -415,7 +417,9 @@ block observables-section-intro
   The component template is simple &mdash; just a text box and a list of matching search results.
 
 +makeExample('app/hero-search.component.html')
-
+:marked
+  We'll also want to add styles for the new component.
++makeExample('app/hero-search.component.css')
 :marked
   As the user types in the search box, a *keyup* event binding calls the component's `search` method with the new search box value.
 
@@ -559,6 +563,7 @@ block filetree
         .file hero-detail.component.html
         .file hero-detail.component.ts
         .file hero-search.component.html (new)
+        .file hero-search.component.css (new)
         .file hero-search.component.ts (new)
         .file hero-search.service.ts (new)
         .file rxjs-operators.ts
@@ -572,7 +577,6 @@ block filetree
       .file typings ...
       .file index.html
       .file package.json
-      .file sample.css (new)
       .file styles.css
       .file systemjs.config.json
       .file tsconfig.json
@@ -597,30 +601,32 @@ block file-summary
     `toh-6/ts/app/app.component.ts,
      toh-6/ts/app/heroes.component.ts,
      toh-6/ts/app/heroes.component.html,
+     toh-6/ts/app/heroes.component.css,
      toh-6/ts/app/hero-detail.component.ts,
      toh-6/ts/app/hero-detail.component.html,
      toh-6/ts/app/hero.service.ts,
-     toh-6/ts/app/in-memory-data.service.ts,
-     toh-6/ts/sample.css`,
+     toh-6/ts/app/in-memory-data.service.ts`,
     null,
     `app.comp...ts,
      heroes.comp...ts,
      heroes.comp...html,
+     heroes.comp...css,
      hero-detail.comp...ts,
      hero-detail.comp...html,
      hero.service.ts,
-     in-memory-data.service.ts,
-     sample.css`
+     in-memory-data.service.ts`
   )
 
   +makeTabs(
     `toh-6/ts/app/hero-search.service.ts,
     toh-6/ts/app/hero-search.component.ts,
     toh-6/ts/app/hero-search.component.html,
+    toh-6/ts/app/hero-search.component.css,
     toh-6/ts/app/rxjs-operators.ts`,
     null,
     `hero-search.service.ts,
     hero-search.component.ts,
     hero-search.service.html,
+    hero-search.component.css,
     rxjs-operators.ts`
   )