@roadtrip/css/styles/components/_rating.css

CSS framework for Roadtrip Design System

/*
 * Rating
 *
 * Index
 * - Stars
 * - Star
 * - Rating number
 *
 */

/* STARS
 -------------------- */

.rating .rating-stars {
  display: inline-flex;
  flex-shrink: 0;
}

/* STAR
 -------------------- */

.rating .rating-star {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--road-surface-disabled);
}

.rating .rating-star-active {
  fill: var(--road-rating);
}

.rating.rating-small .rating-star {
  width: 1rem;
  height: 1rem;
}

.rating.rating-extra-small .rating-star {
  width: 1rem;
  height: 1rem;
}


/* RATING NUMBER
 -------------------- */

.rating .rating-number {
  margin-left: 0.5rem;
  font-size: var(--road-link-medium);
  color: var(--road-on-surface);
  text-decoration: underline;
}

.rating.rating-small .rating-number {
  font-size: var(--road-link-small);
}

.rating.rating-extra-small .rating-number {
  font-size: var(--road-link-extra-small);
}

.rating .read-only{
  text-decoration: none;
}