@heycar-uikit/core/review-rating/styles/default.css

The React UI library from HeyCar

:root {
  /* heycar mint color */

  /* mica blue color */
  --color-mica-blue-500: #164ca3;

  /* sunbeam blue color */

  /* mustang yellow color */

  /* old ferrari red color */

  /* -- fantasy name of "green" color to be defined -- */

  /* -- fantasy name of "whatsapp" color to be defined -- */

  /* -- fantasy name of "red" color to be defined -- */

  /* tarmac grey color */
  --color-tarmac-grey-100: #e6e6e6;
  --color-tarmac-grey-500: #838383;
  --color-tarmac-grey-700: #303030;

  /* brand colors */
}
/* Depricated. Do Not Use */
:root {
  --shadow-m: 0 4px 12px rgba(38, 38, 38, 0.08);
}
:root {
  /* Font families */
  --font-family-system: Objektiv, sans-serif, 'Helvetica Neue', Helvetica, Arial;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
}
/*
  Heading
*/
/*
  Sub-Heading
*/
/*
  Body
*/
/*
  Caption
*/
/*
  Overline
*/
/*
  Button
*/
/*
  Button Old - DO NOT USE
*/
/* If this is ever changed please update breakpoints.json as well */
/* Mobile */
/* Tablet */
/* Desktop */
/* Default theme (light) */
:root {
  /*
    Colors
  */
  --color-primary-500: var(--color-mica-blue-500);
  --color-neutral-100: var(--color-tarmac-grey-100);
  --color-neutral-500: var(--color-tarmac-grey-500);
  --color-neutral-700: var(--color-tarmac-grey-700);

  /*
    Sizes
  */
}
body {
  color: var(--color-neutral-700);
}
.review-rating__wrapper_1l51k {
  position: relative;

  /* Center the circle content  */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.review-rating__wrapper_1l51k svg {
    width: 100%;
  }
.review-rating__wrapper_1l51k.review-rating__xs_1l51k {
    width: 56px;
    height: 56px;
  }
.review-rating__wrapper_1l51k.review-rating__xs_1l51k .review-rating__arrow_1l51k {
      height: 4px;
    }
.review-rating__wrapper_1l51k.review-rating__xs_1l51k .review-rating__plainCircle_1l51k {
      width: 32px;
      height: 32px;
    }
.review-rating__wrapper_1l51k.review-rating__xs_1l51k .review-rating__completeScore_1l51k .review-rating__score_1l51k {
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family-system);
        font-size: 16px;
      }
.review-rating__wrapper_1l51k.review-rating__xs_1l51k .review-rating__completeScore_1l51k .review-rating__max_1l51k {
        display: none;
      }
.review-rating__wrapper_1l51k.review-rating__xs_1l51k .review-rating__scoreCircle_1l51k,
    .review-rating__wrapper_1l51k.review-rating__xs_1l51k .review-rating__scoreCircleTrack_1l51k {
      stroke-width: 2.8;
    }
.review-rating__wrapper_1l51k.review-rating__s_1l51k {
    width: 96px;
    height: 96px;
  }
.review-rating__wrapper_1l51k.review-rating__s_1l51k .review-rating__arrow_1l51k {
      height: 6.8px;
    }
.review-rating__wrapper_1l51k.review-rating__s_1l51k .review-rating__plainCircle_1l51k {
      width: 56px;
      height: 56px;
    }
.review-rating__wrapper_1l51k.review-rating__s_1l51k .review-rating__completeScore_1l51k {
      font-size: 10px;
      font-weight: var(--font-weight-medium);
      font-family: var(--font-family-system);
    }
.review-rating__wrapper_1l51k.review-rating__s_1l51k .review-rating__completeScore_1l51k .review-rating__score_1l51k {
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family-system);
      }
.review-rating__wrapper_1l51k.review-rating__s_1l51k .review-rating__scoreCircle_1l51k,
    .review-rating__wrapper_1l51k.review-rating__s_1l51k .review-rating__scoreCircleTrack_1l51k {
      stroke-width: 2;
    }
.review-rating__wrapper_1l51k.review-rating__m_1l51k {
    width: 120px;
    height: 120px;
  }
.review-rating__wrapper_1l51k.review-rating__m_1l51k .review-rating__arrow_1l51k {
      height: 8.5px;
    }
.review-rating__wrapper_1l51k.review-rating__m_1l51k .review-rating__plainCircle_1l51k {
      width: 70px;
      height: 70px;
    }
.review-rating__wrapper_1l51k.review-rating__m_1l51k .review-rating__completeScore_1l51k {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: var(--font-weight-medium);
      font-family: var(--font-family-system);
    }
.review-rating__wrapper_1l51k.review-rating__m_1l51k .review-rating__completeScore_1l51k .review-rating__score_1l51k {
        font-size: 28px;
        letter-spacing: -0.5px;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family-system);
        font-size: 24px;
      }
.review-rating__wrapper_1l51k.review-rating__m_1l51k .review-rating__scoreCircle_1l51k,
    .review-rating__wrapper_1l51k.review-rating__m_1l51k .review-rating__scoreCircleTrack_1l51k {
      stroke-width: 2;
    }
.review-rating__wrapper_1l51k.review-rating__l_1l51k {
    width: 176px;
    height: 176px;
  }
.review-rating__wrapper_1l51k.review-rating__l_1l51k .review-rating__arrow_1l51k {
      height: 12.5px;
    }
.review-rating__wrapper_1l51k.review-rating__l_1l51k .review-rating__plainCircle_1l51k {
      width: 102px;
      height: 102px;
    }
.review-rating__wrapper_1l51k.review-rating__l_1l51k .review-rating__completeScore_1l51k {
      font-size: 16px;
      font-weight: var(--font-weight-regular);
      font-family: var(--font-family-system);
    }
.review-rating__wrapper_1l51k.review-rating__l_1l51k .review-rating__completeScore_1l51k .review-rating__score_1l51k {
        font-size: 28px;
        letter-spacing: -0.5px;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family-system);
      }
.review-rating__wrapper_1l51k.review-rating__l_1l51k .review-rating__scoreCircle_1l51k,
    .review-rating__wrapper_1l51k.review-rating__l_1l51k .review-rating__scoreCircleTrack_1l51k {
      stroke-width: 2;
    }
.review-rating__background_1l51k {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.review-rating__arrow_1l51k {
  transform: rotate(133deg);
  position: absolute;
  width: 100%;
  transition: transform 1s cubic-bezier(0.73, -0.06, 0.4, 1.37);
}
.review-rating__arrow_1l51k path {
    transform: translate(51px, -1px) rotate(332deg);
    transform-origin: center;
  }
.review-rating__plainCircle_1l51k {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  background: #fff;
  border-radius: 100%;
  box-shadow: var(--shadow-m);
}
.review-rating__completeScore_1l51k {
  color: var(--color-neutral-500);
}
.review-rating__completeScore_1l51k .review-rating__score_1l51k {
    color: var(--color-neutral-700);
  }
.review-rating__donut_1l51k {
  position: relative;
  z-index: 1;
}
.review-rating__scoreCircleTrack_1l51k {
  transform: rotate(134deg) translate3d(0, 0, 0);
  transform-origin: center;
  stroke: var(--color-neutral-100);
}
.review-rating__scoreCircle_1l51k {
  transform: rotate(134deg) translate3d(0, 0, 0);
  transform-origin: center;
  stroke: var(--color-primary-500);
  stroke-dasharray: 0, 100;
  opacity: 0;
  transition: opacity 1s ease,
    stroke-dasharray 1s cubic-bezier(0.73, -0.06, 0.42, 1.07);
  will-change: stroke-dasharray;
}
.review-rating__scoreCircle_1l51k.review-rating__active_1l51k {
    opacity: 1;
  }