/*! * Star Rating * @version: 3.4.0 * @author: Paul Ryley (http://geminilabs.io) * @url: https://github.com/pryley/star-rating.js * @license: MIT */ .gl-star-rating[data-star-rating] { position: relative; display: block; } .gl-star-rating[data-star-rating] > select { overflow: hidden; visibility: visible !important; position: absolute !important; top: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: circle(1px at 0 0); clip-path: circle(1px at 0 0); white-space: nowrap; } .gl-star-rating[data-star-rating] > select::before, .gl-star-rating[data-star-rating] > select::after { display: none !important; } .gl-star-rating-ltr[data-star-rating] > select { left: 0; } .gl-star-rating-rtl[data-star-rating] > select { right: 0; } .gl-star-rating[data-star-rating] > select:focus + .gl-star-rating-stars::before { opacity: 0.5; display: block; position: absolute; width: 100%; height: 100%; content: ''; outline: dotted 1px currentColor; pointer-events: none; } .gl-star-rating-stars { position: relative; display: inline-block; height: 26px; vertical-align: middle; cursor: pointer; } select[disabled] + .gl-star-rating-stars { cursor: default; } .gl-star-rating-stars > span { display: inline-block; width: 24px; height: 24px; background-size: 24px; background-repeat: no-repeat; background-image: url(../img/star-empty.svg); margin: 0 4px 0 0; } .gl-star-rating-stars > span:last-of-type { margin-right: 0; } .gl-star-rating-rtl[data-star-rating] .gl-star-rating-stars > span { margin: 0 0 0 4px; } .gl-star-rating-rtl[data-star-rating] .gl-star-rating-stars > span:last-of-type { margin-left: 0; } .gl-star-rating-stars.s10 > span:nth-child(1), .gl-star-rating-stars.s20 > span:nth-child(-1n+2), .gl-star-rating-stars.s30 > span:nth-child(-1n+3), .gl-star-rating-stars.s40 > span:nth-child(-1n+4), .gl-star-rating-stars.s50 > span:nth-child(-1n+5), .gl-star-rating-stars.s60 > span:nth-child(-1n+6), .gl-star-rating-stars.s70 > span:nth-child(-1n+7), .gl-star-rating-stars.s80 > span:nth-child(-1n+8), .gl-star-rating-stars.s90 > span:nth-child(-1n+9), .gl-star-rating-stars.s100 > span { background-image: url(../img/star-full.svg); } .gl-star-rating-text { display: inline-block; position: relative; height: 26px; line-height: 26px; font-size: 0.8em; font-weight: 600; color: #fff; background-color: #1a1a1a; white-space: nowrap; vertical-align: middle; padding: 0 12px 0 6px; margin: 0 0 0 12px; } .gl-star-rating-text::before { position: absolute; top: 0; left: -12px; width: 0; height: 0; content: ""; border-style: solid; border-width: 13px 12px 13px 0; border-color: transparent #1a1a1a transparent transparent; } .gl-star-rating-rtl[data-star-rating] .gl-star-rating-text { padding: 0 6px 0 12px; margin: 0 12px 0 0; } .gl-star-rating-rtl[data-star-rating] .gl-star-rating-text::before { left: unset; right: -12px; border-width: 13px 0 13px 12px; border-color: transparent transparent transparent #1a1a1a; }