Rating

Source

• Rating.css

Example

<div class="x-rating accent-warning">
    <input type="radio" name="rating" value="1" aria-label="Rate 1/5">
    <input type="radio" name="rating" value="2" aria-label="Rate 2/5">
    <input type="radio" name="rating" value="3" aria-label="Rate 3/5">
    <input type="radio" name="rating" value="4" aria-label="Rate 4/5">
    <input type="radio" name="rating" value="5" aria-label="Rate 5/5">
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/rating/props/default.css" layer(theme);
@import "winduum/src/components/rating/default.css" layer(utilities);
@import "winduum/src/components/rating/invalid.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-rating-inline-size: 8rem;
    --x-rating-block-size: 2.5rem;
  }
}

Winduum CSS Code

winduum/src/components/rating/props/default.css

:root, :host {
  --x-rating-inline-size: 1.25rem;
  --x-rating-block-size: 1.25rem;
  --x-rating-gap: 0.25rem;
  --x-rating-opacity: 0.2;
  --x-rating-icon-mask: url('data:image/svg+xml, <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /></svg>');
}

winduum/src/components/rating/default.css

.x-rating {
  --x-rating-color: var(--color-accent);

  display: flex;
  align-items: center;
  border-radius: var(--radius-full);

  &:has(:focus-visible) {
    outline: 2px dotted var(--color-accent);
    outline-offset: 3px;
  }

  :where(input) {
    inline-size: var(--x-rating-inline-size);
    block-size: var(--x-rating-block-size);
    color: var(--x-rating-color);
    opacity: var(--x-rating-opacity);
    transition: var(--transition-opacity);
    display: grid;
    box-sizing: content-box;

    &:not(:last-child) {
      border-inline-end-width: var(--x-rating-gap);
      border-inline-color: transparent;
    }

    &::before {
      mask: var(--x-rating-icon-mask);
      background-color: currentColor;
      content: "";
    }
  }

  &:has(:checked) input {
    opacity: 100%;

    &:where(:checked ~ input) {
      opacity: var(--x-rating-opacity);
    }
  }

  &:hover input {
    opacity: 100%;

    &:hover ~ input {
      opacity: var(--x-rating-opacity);
    }
  }
}

winduum/src/components/rating/invalid.css

.x-rating {
  :user-invalid {
    --x-rating-color: var(--x-rating-invalid-color, var(--color-error));
  }
}