askmethat-rating
Version:
Simple plugin providing to use fonts as rating
64 lines (63 loc) • 1.99 kB
CSS
.amt-rating-container {
position: relative; }
.amt-rating-container:focus ul, .amt-rating-container:hover ul {
transform: scale(1);
opacity: 1; }
.amt-rating-container ul {
list-style: none;
position: absolute;
padding: 0 20px 30px 20px ;
color: #09c;
background: #fafafa;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
transition: all .25s;
transform: scale(0);
opacity: 0;
z-index: 10;
width: calc( 130px * 2); }
.amt-rating-container ul.top {
top: -175px;
left: calc(50% - 130px); }
.amt-rating-container ul.bottom {
top: 35px;
left: calc(50% - 130px); }
.amt-rating-container ul li {
height: 25px; }
.amt-rating-container ul li .fa {
font-size: 16px; }
.amt-rating-container ul li .fa.fa-inner {
position: relative;
display: inline-block;
vertical-align: middle; }
.amt-rating-container ul li .fa.fa-under {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
pointer-events: none; }
.amt-rating-container ul li .progress {
display: inline-grid;
vertical-align: middle;
height: 20px;
width: 150px;
position: relative;
background: #333;
background: -webkit-linear-gradient(#ccc, #eee);
background: -moz-linear-gradient(#ccc, #eee);
background: -o-linear-gradient(#ccc, #eee);
background: linear-gradient(#ccc, #eee);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); }
.amt-rating-container ul li .progress:before {
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
color: #000;
top: 2px;
left: 0;
right: 0; }
.amt-rating-container ul li .progress .value {
background-color: #7CC3FF;
display: inline-block;
height: 100%; }