Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mixin to display a list of links like label tags - used on www.ownsit.com.au
@mixin tags {
ul {
margin: 0;
li {
list-style: none;
display: inline-block;
&:before {
content: '';
background: url(../assets/images/tag.png) no-repeat center left;
background-size: cover;
display: inline-block;
height: 21px;
width: 19px;
float: left;
}
&:hover,
&:focus {
&:before {
background: url(../assets/images/tag-hover.png) no-repeat center left;
}
a {
background: #FFF;
color: $wanderlust;
}
}
a {
font-size: rem-calc(12);
color: #FFF;
background: $wanderlust;
display: inline-block;
height: 21px;
line-height: 19px;
padding-right: rem-calc(5);
padding-left: rem-calc(5);
float: left;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment