UNPKG

@adobe/spectrum-css

Version:

The Spectrum CSS top-level backwards compatible package

67 lines (63 loc) 1.57 kB
.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; }