Customizing Styles

You have different options to customize the style of angular-star-rating. As a precondition you have to install angular-star-rating.

After the preconditions you can follow the description for the following options:

• Customize variables
• Overriding styling rules

Customize variables

To adopt the styling over variables you have to use the import the styles and override the variables that aeffect the style you want to change.

1. Import angular-star-rating.scss into your project with an import statement @import "~css-star-rating/scss/star-rating";.
2. Make sure all styles are loaded and applied.
3. Insert the variable overrides that effect the styling rule you want to change above the @import statement

/* styles.scss */

/* Override colors by using scss variables */
$color-negative-rating: #0f0 !default;
$color-ok-rating: #f00 !default;
$color-positive-rating: #00f !default;
$color-default-rating: #ff0 !default;


/* Import star-rating styles */
@import "~css-star-rating/scss/star-rating";

Overriding styling rules

1. Import angular-star-rating.scss or '.css' file into your project.
2. Make sure all styles are loaded and applied.
3. Insert the style that override the default once after the other styles

/* styles.scss */

/* Import star-rating styles */
@import "~css-star-rating/scss/star-rating";

/* Override Colors by using style rules */
.rating.color-negative .star-container .star {
  svg {
    fill: #0f0;
  }
  i {
    color: #0f0;
  }
}

.rating.color-ok .star-container .star {
  svg {
    fill: #f00;
  }
  i {
    color: #f00;
  }
}

.rating.color-positive .star-container .star {
  svg {
    fill: #00f;
  }
  i {
    color: #00f;
  }
}

.rating.color-default .star-container .star {
  svg {
    fill: #ff0;
  }
  i {
    color: #ff0;
  }
}