@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
67 lines (63 loc) • 1.57 kB
CSS
.spectrum-Rating:hover .spectrum-Rating-icon .spectrum-Rating-starActive,
.spectrum-Rating-icon.is-selected .spectrum-Rating-starActive {
display: block;
}
.spectrum-Rating:hover .spectrum-Rating-icon .spectrum-Rating-starInactive,
.spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive {
display: none;
}
.spectrum-Rating-icon .spectrum-Rating-starActive,
.spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive {
display: none;
}
.spectrum-Rating-icon .spectrum-Rating-starInactive,
.spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive {
display: block;
}
.spectrum-Rating {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 120px;
border-radius: 4px;
cursor: pointer;
}
.spectrum-Rating.is-disabled,
.spectrum-Rating.is-readOnly {
cursor: default;
pointer-events: none;
}
.spectrum-Rating-input {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0.0001;
pointer-events: none;
}
.spectrum-Rating-icon {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 18px;
padding: 7px 0;
}
.spectrum-Rating-icon.is-currentValue:after {
border-radius: 2px;
content: '';
height: 2px;
position: absolute;
bottom: 2px;
left: 4px;
right: 4px;
}
.spectrum-Rating-starActive,
.spectrum-Rating-starInactive {
width: 18px;
height: 18px;
margin: 0 auto;
}