_star-rating.scss

// Rating Scale component
// ===


// Configurable variables
// ---
//
// 1. Scales size of entire component (<1 decrease, >1 increase).
// 2. Sets a standard size for the entire component.
// 3. Swaps out the standard star(s) colour. Default is grey.
// 4. Swaps out the emphasized star(s) colour. Default is yellow.

$rating-item--multiplier: 1 !default;
$rating-item--base: 16px !default;
$rating-item--color: #ccc !default;
$rating-item--color-filled: #f4d214 !default;


// Rating Scale Root (whole thing)
// ---

.c-star-ratings {
    display: flex;
    align-items: center;
}


// Rating Scale Item (individual star)
// ---
//
// Note: These rating stars are built entirely with CSS; the :before and :after
//       pseudo elements are similar to how we build CSS triangles. Each of the
//       pseudos correspond to certain points of the star, and are molded using
//       border-width and rotation to be placed accordingly.

.c-star-ratings__item,
.c-star-ratings__item:before,
.c-star-ratings__item:after {
    content: "";

    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}


// Rating Scale Item: top left, bottom right star points
// ---

.c-star-ratings__item {
    position: relative;

    margin-right: $rating-item--multiplier*($rating-item--base/4);
    border-width: 0 $rating-item--multiplier*10px $rating-item--multiplier*7px;
    border-bottom-color: currentColor;

    color: $rating-item--color;

    transform: rotate(35deg);

    &.c--filled {
        color: $rating-item--color-filled;
    }
}


// Rating Scale Item: top middle star point
// ---

.c-star-ratings__item:before {
    position: absolute;
    top: -$rating-item--multiplier*5px;
    left: -$rating-item--multiplier*6px;

    border-width: 0 $rating-item--multiplier*3px $rating-item--multiplier*8px;
    border-bottom-color: currentColor;

    transform: rotate(-35deg);
}


// Rating Scale Item: top right, bottom left star points
// ---

.c-star-ratings__item:after {
    position: absolute;
    top: 0;
    left: -$rating-item--multiplier*10px;

    border-width: 0 $rating-item--multiplier*10px $rating-item--multiplier*7px;
    border-bottom-color: currentColor;

    transform: rotate(-70deg);
}


// Rating Scale Value (number value)
// ---

.c-star-ratings__value {
    flex: 1 1 auto;
    padding-left: $rating-item--multiplier*($rating-item--base/4);

    font-weight: bold;
    font-size: $rating-item--multiplier*$rating-item--base;
    line-height: 1;
}