juplo.de Git - examples/angular-tour-of-heroes/blob - src/app/heroes/heroes.component.css

   1 /* HeroesComponent's private CSS styles */
   2 .heroes {
   3   margin: 0 0 2em 0;
   4   list-style-type: none;
   5   padding: 0;
   6   width: 15em;
   7 }
   8 .heroes li {
   9   cursor: pointer;
  10   position: relative;
  11   left: 0;
  12   background-color: #EEE;
  13   margin: .5em;
  14   padding: .3em 0;
  15   height: 1.6em;
  16   border-radius: 4px;
  17 }
  18 .heroes li:hover {
  19   color: #607D8B;
  20   background-color: #DDD;
  21   left: .1em;
  22 }
  23 .heroes li.selected {
  24   background-color: #CFD8DC;
  25   color: white;
  26 }
  27 .heroes li.selected:hover {
  28   background-color: #BBD8DC;
  29   color: white;
  30 }
  31 .heroes .badge {
  32   display: inline-block;
  33   font-size: small;
  34   color: white;
  35   padding: 0.8em 0.7em 0 0.7em;
  36   background-color:#405061;
  37   line-height: 1em;
  38   position: relative;
  39   left: -1px;
  40   top: -4px;
  41   height: 1.8em;
  42   margin-right: .8em;
  43   border-radius: 4px 0 0 4px;
  44 }