X-Git-Url: https://juplo.de/gitweb/?p=examples%2Fangular-tour-of-heroes;a=blobdiff_plain;f=src%2Fapp%2Fheroes%2Fheroes.component.css;h=9759a4211be6324f1917c749aa0407d80f769750;hp=e69de29bb2d1d6434b8b29ae775ad8c2e48c5391;hb=660221eb935d32c78466b125f1b83eb87b8dab31;hpb=45572edb5f831a6e05185eb1d45e255c8d6666fd

diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css
index e69de29..9759a42 100644
--- a/src/app/heroes/heroes.component.css
+++ b/src/app/heroes/heroes.component.css
@@ -0,0 +1,44 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  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 li.selected:hover {
+  background-color: #BBD8DC;
+  color: white;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color:#405061;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}