5: Add In-app Navigation

[examples/angular-tour-of-heroes] / src / app / heroes / heroes.component.css

diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css
index 9759a42..2ad3fef 100644 (file)
--- a/src/app/heroes/heroes.component.css
+++ b/src/app/heroes/heroes.component.css
@@ -6,28 +6,33 @@
   width: 15em;
 }
 .heroes li {
-  cursor: pointer;
   position: relative;
-  left: 0;
+  cursor: pointer;
   background-color: #EEE;
   margin: .5em;
   padding: .3em 0;
   height: 1.6em;
   border-radius: 4px;
 }
+
 .heroes li:hover {
   color: #607D8B;
   background-color: #DDD;
   left: .1em;
 }
-.heroes li.selected {
-  background-color: #CFD8DC;
-  color: white;
+
+.heroes a {
+  color: #333;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC;
-  color: white;
+
+.heroes a:hover {
+  color:#607D8B;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
@@ -39,6 +44,8 @@
   left: -1px;
   top: -4px;
   height: 1.8em;
+  min-width: 16px;
+  text-align: right;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }