Skip to content

Instantly share code, notes, and snippets.

Created April 24, 2018 18:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Hero list stylesheet
/* HeroesComponent's private CSS styles */
.selected {
background-color: #CFD8DC !important;
color: white;
.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.selected:hover {
background-color: #BBD8DC !important;
color: white;
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
.heroes .text {
position: relative;
top: -3px;
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment