@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
81 lines (73 loc) • 2.04 kB
CSS
div.star-rating-select {
cursor: pointer;
display: inline-block;
}
span.star-rating-select__radio {
display: inline-flex;
position: relative;
vertical-align: text-top;
}
span.star-rating-select__radio svg {
display: inline-block;
fill: currentColor;
pointer-events: none;
stroke: currentColor;
stroke-width: 0;
vertical-align: middle;
}
span.star-rating-select__radio-icon {
display: inline-flex;
outline-offset: 1px;
}
span.star-rating-select__radio-icon svg {
height: 16px;
width: 16px;
}
span.star-rating-select__radio input.star-rating-select__control[type="radio"] {
cursor: pointer;
font-size: 100%;
height: 16px;
margin: 0;
min-width: 16px;
opacity: 0;
padding: 0;
position: absolute;
width: 16px;
z-index: 1;
}
span.star-rating-select__radio
input.star-rating-select__control[type="radio"]:focus
+ span.star-rating-select__radio-icon {
outline: 1px auto;
outline-color: var(--radio-outline, var(--color-foreground-secondary));
outline-offset: 2px;
}
span.star-rating-select__radio
input.star-rating-select__control[type="radio"]:focus:not(:focus-visible)
+ span.star-rating-select__radio-icon {
outline: none;
}
div.star-rating-select span.star-rating-select__radio-icon svg {
--color-star-rating-full: var(--color-star-rating-unfilled, transparent);
}
div.star-rating-select
input.star-rating-select__control--filled
+ span.star-rating-select__radio-icon
svg,
div.star-rating-select
input.star-rating-select__control[type="radio"]:checked
+ span.star-rating-select__radio-icon
svg {
--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)
);
}