Hover Color Stops Working for Green Stars

[seanieboi]

I'm submitting a...

[X] Bug report  
[ ] Feature request

Current behavior

When more than 6 stars are selected the fill stops working for the green stars

Expected behavior

Hover fill keeps working

Minimal reproduction of the problem with instructions

Add the following config:

<star-rating
[starType]="'svg'"
size="large"
[hoverEnabled]="true"
[numOfStars]="8"
>

Or go to https://biophoton.github.io/angular-star-rating/#/property-bindings and change amount of stars to 10

Environment

"angular-star-rating": "^4.0.0-beta.3"
"css-star-rating": "^1.2.4"
Angular version: 5


Browser:

- [X] Chrome (desktop) version 72

[corentinthibaud]

To make it work, before importing scss from css-star-rating, make sure to define the variable $maxNumOfStars to the number of stars you have + 1.
This is due to the fact that you can not pass variable from TypeScript to SCSS files directly.