Skip to content

Instantly share code, notes, and snippets.

@senica
Last active Mar 3, 2016
Embed
What would you like to do?
<rate>
<div class={"thumbs-wrapper " + (rating > 0 ? 'up' : rating < 0 ? 'down' : '')}>
<button class="down icon-thumbs-down"></button>
<button class="up icon-thumbs-up"></button>
</div>
<style scoped>
button{
min-width: auto;
min-height: auto;
padding: 4px;
background: none;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
color: #a5bed0;
position: relative;
}
button.up{
top: -4px;
}
button:hover{
background: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.thumbs-wrapper.up button.up{
color: green;
}
.thumbs-wrapper.down button.down{
color: red;
}
.thumbs-wrapper.down button.down:before{
content: "\e90c" !important; /* filled */
}
.thumbs-wrapper.up button.up:before{
content: "\e90e" !important; /* filled */
}
</style>
this.rating = 0;
this.on('mount', function(){
this.update({
rating: 1,
})
});
</rate>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment