@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
54 lines (51 loc) • 1.65 kB
CSS
svg.star-rating {
display: inline-block;
fill: currentColor;
height: 16px;
pointer-events: none;
stroke: currentColor;
stroke-width: 0;
vertical-align: middle;
width: 84px;
}
svg.star-rating__icon {
height: 16px;
width: 16px;
}
div.star-rating[data-stars^="1"] svg:nth-child(-n + 1),
div.star-rating[data-stars^="2"] svg:nth-child(-n + 2),
div.star-rating[data-stars^="3"] svg:nth-child(-n + 3),
div.star-rating[data-stars^="4"] svg:nth-child(-n + 4),
div.star-rating[data-stars^="5"] svg:nth-child(-n + 5) {
--color-star-rating-full: var(
--color-star-rating-filled,
var(--color-foreground-primary)
);
--color-star-rating-full-stroke: var(
--color-star-rating-filled-stroke,
var(--color-foreground-primary)
);
--color-star-rating-half-stroke: var(
--color-star-rating-filled-stroke,
var(--color-foreground-primary)
);
}
div.star-rating[data-stars="0-5"] svg:first-child,
div.star-rating[data-stars="1-5"] svg:nth-child(2),
div.star-rating[data-stars="2-5"] svg:nth-child(3),
div.star-rating[data-stars="3-5"] svg:nth-child(4),
div.star-rating[data-stars="4-5"] svg:nth-child(5) {
--color-star-rating-half: var(
--color-star-rating-filled,
var(--color-foreground-primary)
);
--color-star-rating-full: var(--color-star-rating-unfilled, transparent);
--color-star-rating-full-stroke: var(
--color-star-rating-unfilled-stroke,
var(--color-neutral-600)
);
--color-star-rating-half-stroke: var(
--color-star-rating-filled-stroke,
var(--color-foreground-primary)
);
}