diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts index b61fac3c0b..d2853fbd5c 100644 --- a/public/docs/_examples/toh-1/ts/app/app.component.ts +++ b/public/docs/_examples/toh-1/ts/app/app.component.ts @@ -13,10 +13,14 @@ export class Hero { template: `

{{title}}

{{hero.name}} details!

-
{{hero.id}}
+
+
id:
+
{{hero.id}}
+
- - +
` }) diff --git a/public/docs/_examples/toh-1/ts/demo.css b/public/docs/_examples/toh-1/ts/demo.css new file mode 100644 index 0000000000..049f701554 --- /dev/null +++ b/public/docs/_examples/toh-1/ts/demo.css @@ -0,0 +1,8 @@ +body{ + color: #5E5E5E; +} + +dt { + float: left; + clear: left; +} diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html index f784483eaa..b6a58e3b38 100644 --- a/public/docs/_examples/toh-1/ts/index.html +++ b/public/docs/_examples/toh-1/ts/index.html @@ -1,10 +1,11 @@ - + Angular 2 Tour of Heroes + diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts index 5d10fc55a9..3875c73ed8 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -28,25 +28,33 @@ const HEROES: Hero[] = [

My Heroes

-

{{selectedHero.name}} details!

-
{{selectedHero.id}}
-
- - -
+

{{selectedHero.name}} details!

+
+
id:
+
{{selectedHero.id}}
+
+
+ +
`, // #docregion styles styles: [` .selected { background-color: #CFD8DC !important; - color: white; + color: black; } .heroes { margin: 0 0 2em 0; @@ -64,13 +72,15 @@ const HEROES: Hero[] = [ height: 1.6em; border-radius: 4px; } - .heroes li.selected:hover { + .heroes li.selected:hover, + .heroes li.selected:focus{ background-color: #BBD8DC !important; - color: white; + color: black; } - .heroes li:hover { - color: #607D8B; - background-color: #DDD; + .heroes li:hover, + .heroes li:focus{ + color: white; + background-color: #6469dd; left: .1em; } .heroes .text { @@ -82,7 +92,7 @@ const HEROES: Hero[] = [ font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; + background-color: #4E6570; line-height: 1em; position: relative; left: -1px; diff --git a/public/docs/_examples/toh-2/ts/demo.css b/public/docs/_examples/toh-2/ts/demo.css new file mode 100644 index 0000000000..049f701554 --- /dev/null +++ b/public/docs/_examples/toh-2/ts/demo.css @@ -0,0 +1,8 @@ +body{ + color: #5E5E5E; +} + +dt { + float: left; + clear: left; +} diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html index 485409815c..fd58e81273 100644 --- a/public/docs/_examples/toh-2/ts/index.html +++ b/public/docs/_examples/toh-2/ts/index.html @@ -1,10 +1,11 @@ - + Angular 2 Tour of Heros + diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts index bbe047a629..95f3cb34c2 100644 --- a/public/docs/_examples/toh-3/ts/app/app.component.ts +++ b/public/docs/_examples/toh-3/ts/app/app.component.ts @@ -29,8 +29,12 @@ const HEROES: Hero[] = [

My Heroes

@@ -40,7 +44,7 @@ const HEROES: Hero[] = [ styles: [` .selected { background-color: #CFD8DC !important; - color: white; + color: black; } .heroes { margin: 0 0 2em 0; @@ -58,13 +62,15 @@ const HEROES: Hero[] = [ height: 1.6em; border-radius: 4px; } - .heroes li.selected:hover { + .heroes li.selected:hover, + .heroes li.selected:focus{ background-color: #BBD8DC !important; - color: white; + color: black; } - .heroes li:hover { - color: #607D8B; - background-color: #DDD; + .heroes li:hover, + .heroes li:focus{ + color: white; + background-color: #6469dd; left: .1em; } .heroes .text { @@ -76,7 +82,7 @@ const HEROES: Hero[] = [ font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; + background-color: #4E6570; line-height: 1em; position: relative; left: -1px; diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts index a2f1942904..aecda5e1f6 100644 --- a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts @@ -15,11 +15,15 @@ import { Hero } from './hero'; // #docregion template template: `
-

{{hero.name}} details!

-
{{hero.id}}
+

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- - +
` diff --git a/public/docs/_examples/toh-3/ts/demo.css b/public/docs/_examples/toh-3/ts/demo.css new file mode 100644 index 0000000000..049f701554 --- /dev/null +++ b/public/docs/_examples/toh-3/ts/demo.css @@ -0,0 +1,8 @@ +body{ + color: #5E5E5E; +} + +dt { + float: left; + clear: left; +} diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html index e9c099696b..b432cf5ff1 100644 --- a/public/docs/_examples/toh-3/ts/index.html +++ b/public/docs/_examples/toh-3/ts/index.html @@ -1,10 +1,11 @@ - + Angular 2 Tour of Heroes + diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts index cf2b42a034..7632b2ce25 100644 --- a/public/docs/_examples/toh-4/ts/app/app.component.ts +++ b/public/docs/_examples/toh-4/ts/app/app.component.ts @@ -16,8 +16,12 @@ import { HeroService } from './hero.service';

My Heroes

@@ -27,7 +31,7 @@ import { HeroService } from './hero.service'; styles: [` .selected { background-color: #CFD8DC !important; - color: white; + color: black; } .heroes { margin: 0 0 2em 0; @@ -45,13 +49,15 @@ import { HeroService } from './hero.service'; height: 1.6em; border-radius: 4px; } - .heroes li.selected:hover { + .heroes li.selected:hover, + .heroes li.selected:focus{ background-color: #BBD8DC !important; - color: white; + color: black; } - .heroes li:hover { - color: #607D8B; - background-color: #DDD; + .heroes li:hover, + .heroes li:focus{ + color: white; + background-color: #6469dd; left: .1em; } .heroes .text { @@ -63,7 +69,7 @@ import { HeroService } from './hero.service'; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; + background-color: #4E6570; line-height: 1em; position: relative; left: -1px; diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts index b36b0ae36c..f23f624ca8 100644 --- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts @@ -6,13 +6,15 @@ import { Hero } from './hero'; selector: 'my-hero-detail', template: `
-

{{hero.name}} details!

+

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- {{hero.id}} -
-
- - +
` diff --git a/public/docs/_examples/toh-4/ts/demo.css b/public/docs/_examples/toh-4/ts/demo.css new file mode 100644 index 0000000000..049f701554 --- /dev/null +++ b/public/docs/_examples/toh-4/ts/demo.css @@ -0,0 +1,8 @@ +body{ + color: #5E5E5E; +} + +dt { + float: left; + clear: left; +} diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html index e9c099696b..b432cf5ff1 100644 --- a/public/docs/_examples/toh-4/ts/index.html +++ b/public/docs/_examples/toh-4/ts/index.html @@ -1,10 +1,11 @@ - + Angular 2 Tour of Heroes + diff --git a/public/docs/_examples/toh-5/ts/app/app.component.css b/public/docs/_examples/toh-5/ts/app/app.component.css index 071e665767..e97e0bac9c 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.css +++ b/public/docs/_examples/toh-5/ts/app/app.component.css @@ -1,7 +1,7 @@ /* #docregion */ h1 { font-size: 1.2em; - color: #999; + color: #747474; margin-bottom: 0; } h2 { @@ -18,12 +18,13 @@ nav a { border-radius: 4px; } nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; + color: #44667d; } nav a.active { color: #039be5; } +nav a:hover, +nav a:focus { + color: #23338c; + background-color: #CFD8DC; +} diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.css b/public/docs/_examples/toh-5/ts/app/dashboard.component.css index f6263074f0..bd9f53fc27 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.css +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.css @@ -29,16 +29,23 @@ h3 { color: #eee; max-height: 120px; min-width: 120px; - background-color: #607D8B; + background-color: #4E6570; border-radius: 2px; } -h4 { +.hero{ + display: block; position: relative; + -webkit-margin-before: 1.33em; + -webkit-margin-after: 1.33em; + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + font-weight: bold; } -.module:hover { +.module:hover, +.module:focus { background-color: #EEE; cursor: pointer; - color: #607d8b; + color: #4b626d; } .grid-pad { padding: 10px 0; diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.html b/public/docs/_examples/toh-5/ts/app/dashboard.component.html index 67ac6aa459..346c6ac049 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.html +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.html @@ -1,11 +1,10 @@ -

Top Heroes

+

Top Heroes

-
- -
-

{{hero.name}}

-
+
+ {{hero.name}}
+
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index 6dd4b1abc2..3e96a0710a 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -4,6 +4,7 @@ import { Component, OnInit } from '@angular/core'; // #docregion import-router import { Router } from '@angular/router'; // #enddocregion import-router +import { ROUTER_DIRECTIVES } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -14,8 +15,9 @@ import { HeroService } from './hero.service'; templateUrl: 'app/dashboard.component.html', // #enddocregion template-url // #docregion css - styleUrls: ['app/dashboard.component.css'] + styleUrls: ['app/dashboard.component.css'], // #enddocregion css + directives: [ROUTER_DIRECTIVES] }) // #docregion component export class DashboardComponent implements OnInit { @@ -23,10 +25,10 @@ export class DashboardComponent implements OnInit { heroes: Hero[] = []; // #docregion ctor - constructor( - private router: Router, - private heroService: HeroService) { + constructor(private router: Router, + private heroService: HeroService) { } + // #enddocregion ctor ngOnInit() { @@ -34,10 +36,8 @@ export class DashboardComponent implements OnInit { .then(heroes => this.heroes = heroes.slice(1, 5)); } + // TODO Move in docs // #docregion goto-detail - gotoDetail(hero: Hero) { - let link = ['/detail', hero.id]; - this.router.navigate(link); - } + // .... // #enddocregion goto-detail } diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.css b/public/docs/_examples/toh-5/ts/app/hero-detail.component.css index ab2437efd8..3c4397608f 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.css +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.css @@ -1,9 +1,8 @@ /* #docregion */ -label { - display: inline-block; +label, +dt{ width: 3em; - margin: .5em 0; - color: #607D8B; + color: #4e6671; font-weight: bold; } input { @@ -20,11 +19,12 @@ button { border-radius: 4px; cursor: pointer; cursor: hand; } -button:hover { +button:hover, +button:focus { background-color: #cfd8dc; } button:disabled { background-color: #eee; - color: #ccc; + color: #ccc; cursor: auto; } diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html index cf96fc2169..c207886f07 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html @@ -2,13 +2,16 @@

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- {{hero.id}}
-
- - +
-
\ No newline at end of file +
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 61edccb90e..685067fef2 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -7,6 +7,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; // #enddocregion import-activated-route +import { Router } from '@angular/router'; + import { Hero } from './hero'; // #docregion import-hero-service import { HeroService } from './hero.service'; @@ -27,12 +29,14 @@ export class HeroDetailComponent implements OnInit, OnDestroy { // #enddocregion implement hero: Hero; sub: any; + redirect: any; // #docregion ctor - constructor( - private heroService: HeroService, - private route: ActivatedRoute) { + constructor(private heroService: HeroService, + private route: ActivatedRoute, + private router: Router) { } + // #enddocregion ctor // #docregion ng-oninit @@ -44,18 +48,26 @@ export class HeroDetailComponent implements OnInit, OnDestroy { .then(hero => this.hero = hero); }); // #enddocregion get-id + } + // #enddocregion ng-oninit // #docregion ng-ondestroy ngOnDestroy() { this.sub.unsubscribe(); } + // #enddocregion ng-ondestroy // #docregion go-back goBack() { - window.history.back(); + if (window.history.length > 1) { + window.history.back(); + } else { + this.router.navigate(['/']); + } } + // #enddocregion go-back } diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.css b/public/docs/_examples/toh-5/ts/app/heroes.component.css index 35e45af98d..09cb219979 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.css +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.css @@ -1,6 +1,6 @@ .selected { background-color: #CFD8DC !important; - color: white; + color: black; } .heroes { margin: 0 0 2em 0; @@ -8,24 +8,29 @@ padding: 0; width: 15em; } -.heroes li { +.heroes button { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; - padding: .3em 0; - height: 1.6em; + /*padding: .3em 0;*/ + /*height: 1.6em;*/ + text-align: left; + width: 15em; + height: 2.7em; border-radius: 4px; } -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.heroes li.selected:hover { +.heroes button.selected:hover, +.heroes button.selected:focus{ background-color: #BBD8DC !important; + color: black; +} +.heroes button:hover, +.heroes button:focus{ color: white; + background-color: #6469dd; + left: 0.8em; } .heroes .text { position: relative; @@ -36,13 +41,13 @@ font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; + background-color: #4E6570; line-height: 1em; position: relative; - left: -1px; + left: -8px; top: -4px; height: 1.8em; - margin-right: .8em; + /*margin-right: .8em;*/ border-radius: 4px 0 0 4px; } button { diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.html b/public/docs/_examples/toh-5/ts/app/heroes.component.html index db41c4692e..5ff3602baa 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.html +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.html @@ -2,10 +2,10 @@

My Heroes

@@ -15,5 +15,5 @@

{{selectedHero.name | uppercase}} is my hero

- + View Details diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts index c0dbd9c8e7..019c0ce0ea 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { Router, ROUTER_DIRECTIVES } from '@angular/router'; import { Hero } from './hero'; import { HeroService } from './hero.service'; @@ -11,8 +11,9 @@ import { HeroService } from './hero.service'; selector: 'my-heroes', // #enddocregion heroes-component-renaming templateUrl: 'app/heroes.component.html', - styleUrls: ['app/heroes.component.css'] - // #docregion heroes-component-renaming + styleUrls: ['app/heroes.component.css'], + // #docregion heroes-component-renaming, + directives: [ROUTER_DIRECTIVES] }) // #enddocregion heroes-component-renaming, metadata // #docregion class, heroes-component-renaming @@ -20,6 +21,7 @@ export class HeroesComponent implements OnInit { // #enddocregion heroes-component-renaming heroes: Hero[]; selectedHero: Hero; + redirect: string = encodeURIComponent('/heroes'); constructor( private router: Router, @@ -35,8 +37,5 @@ export class HeroesComponent implements OnInit { onSelect(hero: Hero) { this.selectedHero = hero; } - gotoDetail() { - this.router.navigate(['/detail', this.selectedHero.id]); - } // #docregion heroes-component-renaming } diff --git a/public/docs/_examples/toh-5/ts/demo.css b/public/docs/_examples/toh-5/ts/demo.css new file mode 100644 index 0000000000..71ae29b4eb --- /dev/null +++ b/public/docs/_examples/toh-5/ts/demo.css @@ -0,0 +1,9 @@ +body, button{ + color: #5E5E5E; +} + +dt { + float: left; + clear: left; +} + diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html index 4df64edba1..1baca8cf32 100644 --- a/public/docs/_examples/toh-5/ts/index.html +++ b/public/docs/_examples/toh-5/ts/index.html @@ -1,5 +1,5 @@ - + @@ -12,6 +12,7 @@ + diff --git a/public/docs/_examples/toh-6/ts/app/app.component.css b/public/docs/_examples/toh-6/ts/app/app.component.css index 071e665767..e97e0bac9c 100644 --- a/public/docs/_examples/toh-6/ts/app/app.component.css +++ b/public/docs/_examples/toh-6/ts/app/app.component.css @@ -1,7 +1,7 @@ /* #docregion */ h1 { font-size: 1.2em; - color: #999; + color: #747474; margin-bottom: 0; } h2 { @@ -18,12 +18,13 @@ nav a { border-radius: 4px; } nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; + color: #44667d; } nav a.active { color: #039be5; } +nav a:hover, +nav a:focus { + color: #23338c; + background-color: #CFD8DC; +} diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.css b/public/docs/_examples/toh-6/ts/app/dashboard.component.css index ce6e963a5f..65f288f696 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.css +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.css @@ -30,16 +30,23 @@ h3 { color: #eee; max-height: 120px; min-width: 120px; - background-color: #607D8B; + background-color: #4E6570; border-radius: 2px; } -h4 { +.hero span{ + display: block; position: relative; + -webkit-margin-before: 1.33em; + -webkit-margin-after: 1.33em; + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + font-weight: bold; } -.module:hover { +.module:hover, +.module:focus { background-color: #EEE; cursor: pointer; - color: #607d8b; + color: #4b626d; } .grid-pad { padding: 10px 0; diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html index 028eab6eb3..1f091b3fe1 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.html +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html @@ -1,11 +1,15 @@ -

Top Heroes

+

Top Heroes

- -
- -
-

{{hero.name}}

+ +
+
+ {{hero.name}}
+
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.css b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css index ab2437efd8..3c4397608f 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.css +++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css @@ -1,9 +1,8 @@ /* #docregion */ -label { - display: inline-block; +label, +dt{ width: 3em; - margin: .5em 0; - color: #607D8B; + color: #4e6671; font-weight: bold; } input { @@ -20,11 +19,12 @@ button { border-radius: 4px; cursor: pointer; cursor: hand; } -button:hover { +button:hover, +button:focus { background-color: #cfd8dc; } button:disabled { background-color: #eee; - color: #ccc; + color: #ccc; cursor: auto; } diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.html b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html index 38af5f707e..c04f45bf58 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.html +++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html @@ -2,12 +2,15 @@

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- {{hero.id}}
-
- - -
+ +
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.css b/public/docs/_examples/toh-6/ts/app/heroes.component.css index 35e45af98d..489aac644a 100644 --- a/public/docs/_examples/toh-6/ts/app/heroes.component.css +++ b/public/docs/_examples/toh-6/ts/app/heroes.component.css @@ -1,6 +1,6 @@ .selected { background-color: #CFD8DC !important; - color: white; + color: black; } .heroes { margin: 0 0 2em 0; @@ -18,14 +18,16 @@ height: 1.6em; border-radius: 4px; } -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.heroes li.selected:hover { +.heroes li.selected:hover, +.heroes li.selected:focus{ background-color: #BBD8DC !important; + color: black; +} +.heroes li:hover, +.heroes li:focus{ color: white; + background-color: #6469dd; + left: .1em; } .heroes .text { position: relative; @@ -36,7 +38,7 @@ font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; + background-color: #4E6570; line-height: 1em; position: relative; left: -1px; diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.html b/public/docs/_examples/toh-6/ts/app/heroes.component.html index 05afc9ea2f..99c8f77265 100644 --- a/public/docs/_examples/toh-6/ts/app/heroes.component.html +++ b/public/docs/_examples/toh-6/ts/app/heroes.component.html @@ -1,7 +1,13 @@

My Heroes