ratti/dist/ratti.css

React Star Rating - Zero dependency, a highly-configurable, accessible rating component for React applications with TypeScript support.

@property --fill-stop{syntax: "<percentage>"; inherits: false; initial-value: 0%;}.star-rating{display:flex;align-items:center;gap:var(--star-gap, 4px);--star-size: 24px;--star-gap: 4px;--star-color: #f59e0b;--star-hover-color: #fbbf24;--star-selected-color: #f59e0b;--star-disabled-color: #94a3b8;--star-icon-on-bg: #ffffff;--star-bg-default: #dddddd;--star-bg-selected: var(--star-selected-color);--star-active-bg-color: var(--star-selected-color);--star-transition: all .2s ease;--star-hover-scale: 1.1;--star-active-scale: .95;--star-outline: 2px solid var(--star-hover-color);--star-outline-offset: 3px;--star-radius: 4px;-webkit-tap-highlight-color:transparent;position:relative}.star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;background:none;border:none;cursor:pointer;position:relative;width:var(--star-size);height:var(--star-size);color:var(--star-color);transition:var(--star-transition)}.star-rating:not(.disabled):not(.readonly) .star-item:hover{transform:scale(var(--star-hover-scale))}.star-rating.variant-default:not(.disabled):not(.readonly) .star-item:hover{color:var(--star-hover-color)}.star-rating:not(.disabled):not(.readonly) .star-item:active{transform:scale(var(--star-active-scale))}.star-rating:focus-visible{outline:none;outline-offset:0;border-radius:var(--star-radius)}.star-item.keyboard-focused{outline:2px dashed var(--star-hover-color);outline-offset:1px}.star-rating.disabled{cursor:not-allowed;opacity:var(--star-disabled-opacity, .6)}.star-rating.disabled .star-item{color:var(--star-disabled-color);pointer-events:none}.star-rating.readonly{cursor:default}.star-rating.readonly .star-item{pointer-events:none}.star-background{width:calc(var(--star-size) + var(--star-bg-padding, 8px));height:calc(var(--star-size) + var(--star-bg-padding, 8px));transition:--fill-stop var(--star-fill-transition-duration, .1s);--active-bg: var(--star-active-bg-color, var(--star-bg-selected));--inactive-bg: var(--star-bg-default);--fill-stop: calc(var(--star-fill-percentage, 0) * 100%);background:linear-gradient(to right,var(--active-bg) var(--fill-stop),var(--inactive-bg) var(--fill-stop));display:flex;align-items:center;justify-content:center}.star-background--circle{border-radius:var(--star-circle-radius, 50%)}.star-background--square{border-radius:var(--star-square-radius, 4px)}.star-item.keyboard-focused.star-background{outline:2px dashed var(--star-icon-on-bg);outline-offset:2px}.star-background .star-icon{fill:var(--star-icon-on-bg);stroke:var(--star-icon-on-bg)}