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   position: relative;
  10   cursor: pointer;
  11   background-color: #EEE;
  12   margin: .5em;
  13   padding: .3em 0;
  14   height: 1.6em;
  15   border-radius: 4px;
  16 }
  17
  18 .heroes li:hover {
  19   color: #607D8B;
  20   background-color: #DDD;
  21   left: .1em;
  22 }
  23
  24 .heroes a {
  25   color: #333;
  26   text-decoration: none;
  27   position: relative;
  28   display: block;
  29   width: 250px;
  30 }
  31
  32 .heroes a:hover {
  33   color:#607D8B;
  34 }
  35
  36 .heroes .badge {
  37   display: inline-block;
  38   font-size: small;
  39   color: white;
  40   padding: 0.8em 0.7em 0 0.7em;
  41   background-color:#405061;
  42   line-height: 1em;
  43   position: relative;
  44   left: -1px;
  45   top: -4px;
  46   height: 1.8em;
  47   min-width: 16px;
  48   text-align: right;
  49   margin-right: .8em;
  50   border-radius: 4px 0 0 4px;
  51 }