/* * # Semantic - Rating * http://github.com/jlukic/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Rating *******************************/ .ui.rating { display: inline-block; font-size: 0em; vertical-align: baseline; margin: 0em 0.5rem 0em 0em; } .ui.rating:last-child { margin-right: 0em; } .ui.rating:before { display: block; content: ''; visibility: hidden; clear: both; height: 0; } /* Icon */ .ui.rating .icon { cursor: pointer; margin: 0em; width: 1em; height: auto; padding: 0em; color: rgba(0, 0, 0, 0.15); font-weight: normal; font-style: normal; } .ui.rating .icon:before { content: "\2605"; -webkit-transition: color 0.3s ease, opacity 0.3s ease ; -moz-transition: color 0.3s ease, opacity 0.3s ease ; -ms-transition: color 0.3s ease, opacity 0.3s ease ; -o-transition: color 0.3s ease, opacity 0.3s ease ; transition: color 0.3s ease, opacity 0.3s ease ; } /******************************* Types *******************************/ /*------------------- Star --------------------*/ .ui.star.rating .icon { width: 1.2em; } /* Star */ .ui.star.rating .icon:before { content: '\f006'; font-family: 'Icons'; } /* Active Star */ .ui.star.rating .active.icon:before { content: '\f005'; font-family: 'Icons'; } /*------------------- Heart --------------------*/ .ui.heart.rating .icon { width: 1.2em; } .ui.heart.rating .icon:before { content: '\f08a'; font-family: 'Icons'; } /* Active */ .ui.heart.rating .active.icon:before { content: '\f004'; font-family: 'Icons'; } .ui.heart.rating .active.icon { color: #EF404A !important; } /* Hovered */ .ui.heart.rating .hover.icon, .ui.heart.rating .active.hover.icon { color: #FF2733 !important; } /******************************* States *******************************/ /*------------------- Active --------------------*/ /* disabled rating */ .ui.disabled.rating .icon { cursor: default; } /* active icons */ .ui.rating .active.icon { color: #FFCB08 !important; } /*------------------- Hover --------------------*/ /* rating */ .ui.rating.hover .active.icon { opacity: 0.5; } /* icon */ .ui.rating .icon.hover, .ui.rating .icon.hover.active { opacity: 1; color: #FFB70A !important; } /******************************* Variations *******************************/ .ui.small.rating .icon { font-size: 0.75rem; } .ui.rating .icon { font-size: 1rem; } .ui.large.rating .icon { font-size: 1.5rem; vertical-align: middle; } .ui.huge.rating .icon { font-size: 2rem; vertical-align: middle; }