projects
/
examples
/
angular-tour-of-heroes
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
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 {
width: 15em;
}
.heroes li {
- cursor: pointer;
position: relative;
position: relative;
-
left: 0
;
+
cursor: pointer
;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
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: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;
.heroes .badge {
display: inline-block;
font-size: small;
@@
-39,6
+44,8
@@
left: -1px;
top: -4px;
height: 1.8em;
left: -1px;
top: -4px;
height: 1.8em;
+ min-width: 16px;
+ text-align: right;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
margin-right: .8em;
border-radius: 4px 0 0 4px;
}