Css Star Rating is a css only star rating lib based on best practice UX/UI methodes. It is written in scss and fully customizable.

By Michael Hladky
Last update: Dec 10, 2022
Comments: 16

Css Star Rating ⭐ ⭐ ⭐ ⭐ ⭐

⭐ Css Star Rating is a pure css star rating plugin based on best practice UX/UI methods. ⭐

Css Star Rating is written in scss and fully customizable over variables.
Easily compose your own rating component over a rich set of css modifiers for any kind of UI state.

Demo

Demos in the KSS style guide

Features

Browser support

IE	Firefox	Chrome	Safari	Opera
11	50	55	10	41

Related Projects

Css	Angular1 (>=1.5)	Angular (>=2)

Css Star Rating	Angular1 Star Rating	Angular Star Rating

Demo

KSS documentation

Install

Get Css Star Rating:

clone & build this repository
download as .zip
via npm: by running $ npm install css-star-rating from your console
via bower: by running $ bower install css-star-rating from your console

Load library

<link rel="stylesheet" href="bower_components/css-star-rating/dist/css/star-rating.css">

Copy asstes (optional) If you want to use svg as icon type copy the
star-rating.icons.svg image form bower_components/css-star-rating/dist/images/star-rating.css to your roots assets folder.

Use it

<div class="rating large star-icon direction-rtl value-1 half color-default label-top">
   <div class="label-value">1.5</div>
    <div class="star-container">
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
    </div>
</div>

Css Modifiers

.value-[N]:
The actual star rating value. The color of the stars depends on the rating number

.value-0
.value-1
.value-2
.value-3
.value-4
.value-5

<div class="rating value-3">
   <div class="star-container">
        ...stars...
    </div>
</div>

.half:
If set, every rating value will have a half star at the end.

.half

<div class="rating value-3 half">
   <div class="star-container">
        ...stars...
    </div>
</div>

text:
The text next to the stars.

(Just additional HTML)

<div class="rating value-3">
   <div class="label-value">My text</div>
   <div class="star-container">
        ...stars...
    </div>
</div>

.label-[VISIBILITY]:
The position of the label.

.label-visible
.label-hidden

<div class="rating value-3 label-hidden">
   <div class="label-value">3.5</div>
   <div class="star-container">
        ...stars...
    </div>
</div>

.label-[POSITION]:
The position of the label.

.label-top
.label-right
.label-bottom
.label-left

<div class="rating value-3 label-right">
   <div class="label-value">Good</div>
   <div class="star-container">
        ...stars...
    </div>
</div>

.space:
If the start use the whole space or not.

<div class="rating value-3 space-between">
   <div class="star-container">
        ...stars...
    </div>
</div>

.[SIZE]:
The height and width of the stars.

.small
.medium
.large

<div class="rating value-3 large">
   <div class="star-container">
        ...stars...
    </div>
</div>

color-[COLOR_NAME]:
Static color of stars.

.color-default
.color-negative
.color-ok
.color-positive

<div class="rating value-3 color-negative">
   <div class="star-container">
        ...stars...
    </div>
</div>

.disabled: The click callback is disabled, colors are transparent

<div class="rating value-3 disabled">
   <div class="star-container">
        ...stars...
    </div>
</div>

.direction-[DIRECTION]:
The direction of the stars and label.

.direction-rtl
.direction-ltr

<div class="rating value-3 direction-rtl">
   <div class="star-container">
        ...stars...
    </div>
</div>

.[ANIMATION_SPEED]:
The duration of the animation in ms.

.immediately
.noticeable
.slow

<div class="rating value-3 slow">
   <div class="star-container">
        ...stars...
    </div>
</div>

starType:
The type of start resource to use.

.star-svg
.star-icon (star character)
.custom-icon (i.e. font-awesome)

<div class="rating value-3 star-icon">
   <div class="star-container">
        <!-- font icons-->
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i> 
        </div>
        <!-- or svg icons-->
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-half">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>

Themes

As a bonus there are some themes as classes. theme-[NAME]:
The type of start resource to use.

.theme-google-places
.theme-kununu

<div class="rating value-3 theme-google-places">
   <div class="star-container">
        ...stars...
    </div>
</div>

Github

https://github.com/BioPhoton/css-star-rating

Comments(16)

compound selector no longer extend

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

      @extend .star.direction-rtl;
             ^
      Compound selectors may no longer be extended.
Consider `@extend .star, .direction-rtl` instead.
See http://bit.ly/ExtendCompound for details.

    ╷
297 │       @extend .star.direction-rtl;
    │               ^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/css-star-rating/scss/_elements.scss 297:15  root stylesheet

2

Remove compound selector extends.

Newer versions of Sass, notably the one used by Angular 8, forbid extending compound selectors (http://bit.ly/ExtendCompound). This change makes the library compatible with modern Sass. Verified by comparing the styleguide before and after.

"Half stars" not working although set ".half" class

First of all, thanks for your library. Its awesome and I really like it. But when I tried to your demo as below, although ".half" class is set, rating value does not have a half star at the end.

<div class="rating large star-icon direction-rtl value-1 half color-default label-top">
   <div class="label-value">1.5</div>
    <div class="star-container">
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
        <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
        </div>
    </div>
</div>

I also attach output when run above html code. output Did I miss something? Please help me to resolved it.

Thanks and best regards,

4

chore(deps): bump loader-utils from 2.0.2 to 2.0.3
Bumps loader-utils from 2.0.2 to 2.0.3.
Release notes

Sourced from loader-utils's releases.
v2.0.3

2.0.3 (2022-10-20)

Bug Fixes
- security: prototype pollution exploit (#217) (a93cf6f)
Changelog

Sourced from loader-utils's changelog.
2.0.3 (2022-10-20)

Bug Fixes
- security: prototype pollution exploit (#217) (a93cf6f)
Commits
- 7162619 chore(release): 2.0.3
- a93cf6f fix(security): prototype polution exploit (#217)
- 90c7c4b chore(release): 2.0.2
- 8c2d24e fix: base64 generation and unicode characters (#197)
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
5

Support for Angular v9

Error: Uncaught (in promise): Error: Importing StarRatingModule which does not have a ɵmod property

Is this library deprecated? I don't see any development since years.
6

Build Warning

I'm submitting a...

[x] Bug report [ ] Feature request

Current behavior

Build warning occurs when building an app that uses this package with the https://github.com/BioPhoton/angular-star-rating package:

Expected behavior

No build warning for invalid animation. This occurs from this line: https://github.com/BioPhoton/css-star-rating/blob/master/dist/scss/_modifiers.scss#L351, which compiles to transition: all none

1.2.4 - Files are missing

Hello,

I use angular-star-rating which is using css-star-rating. I found that angular-star-rating is working when using [email protected] but has a big problem when compiling [email protected]

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed: 
@import "~css-star-rating/dist/scss/star-rating.scss";
^
      File to import not found or unreadable: ~css-star-rating/dist/scss/star-rating.scss.
Parent style sheet: /home/[...]/angular/node_modules/angular-star-rating/assets/scss/star-rating.scss
      in /home/[...]/angular/node_modules/angular-star-rating/assets/scss/star-rating.scss (line 1, column 1)
Error: 
@import "~css-star-rating/dist/scss/star-rating.scss";
^
      File to import not found or unreadable: ~css-star-rating/dist/scss/star-rating.scss.
Parent style sheet: /home/[...]/angular/node_modules/angular-star-rating/assets/scss/star-rating.scss
      in /home/[...]/angular/node_modules/angular-star-rating/assets/scss/star-rating.scss (line 1, column 1)
    at options.error (/home/[...]/angular/node_modules/node-sass/lib/index.js:291:26)
 @ ./src/styles.scss 4:14-191
 @ multi ./src/styles.scss

This issue appears with version 1.2.4.

As you can see below, version 1.2.4 is missing a lot of files ! (both versions are downloaded by npm)

1.2.4 css-star-rating's content (Doesn't Work)

 └──     css/ 
 │  ├────     star-rating.css  
 │  └────     star-rating.min.css  
 └──     images/ 
 │  └────     star-rating.icons.svg  
 └──     kss-documentation/ 
 │  ├────     elements.kss.scss  
 │  ├────     modifiers.kss.scss  
 │  ├────     styleguide.kss.scss  
 │  └────     themes.kss.scss  
 ├──     LICENSE  
 ├──     package.json  
 ├──     README.md  
 └──     scss/ 
 │  ├────     _elements.scss  
 │  ├────     _modifiers.scss  
 │  ├────     star-rating.scss  
 │  ├────     _themes.scss  
 │  └────     _variables.scss

1.1.3 css-star-rating's content (Works well !)

 ├──     bower.json  
 ├──     CHANGELOG.md  
 └──     dist/ 
 │  └────     css/ 
 │  │  ├────     star-rating.css  
 │  │  └────     star-rating.min.css  
 │  └────     images/ 
 │  │  └────     star-rating.icons.svg  
 │  └────     scss/ 
 │  │  ├────     _elements.scss  
 │  │  ├────     _modifiers.scss  
 │  │  ├────     star-rating.scss  
 │  │  ├────     _themes.scss  
 │  │  └────     _variables.scss  
 ├──     LICENSE  
 ├──     package.json  
 ├──     README.md  
 └──     resources/ 
 │  └────     images/ 
 │  │  └────     browsers/ 
 │  │  │  ├────     chrome.png  
 │  │  │  ├────     firefox.png  
 │  │  │  ├────     ie.png  
 │  │  │  ├────     opera.png  
 │  │  │  └────     safari.png  
 │  │  ├────     example-usage.gif  
 │  │  ├────     example-usage.PNG  
 │  │  └────     family/ 
 │  │  │  ├────     angular1.png  
 │  │  │  ├────     angular.png  
 │  │  │  └────     css3.png  
 │  │  ├────     prop-animation_speed-immediately.gif  
 │  │  ├────     prop-animation_speed-noticeable.gif  
 │  │  ├────     prop-animation_speed-slow.gif  
 │  │  ├────     prop-color-default.PNG  
 │  │  ├────     prop-color-negative.PNG  
 │  │  ├────     prop-color-ok.PNG  
 │  │  ├────     prop-color-positive.PNG  
 │  │  ├────     prop-direction-ltr.PNG  
 │  │  ├────     prop-direction-rtl.PNG  
 │  │  ├────     prop-disabled-false.PNG  
 │  │  ├────     prop-disabled-true.PNG  
 │  │  ├────     prop-get_color-function.PNG  
 │  │  ├────     prop-labe-hiddel.PNG  
 │  │  ├────     prop-label-bottom.PNG  
 │  │  ├────     prop-label-left.PNG  
 │  │  ├────     prop-label-right.PNG  
 │  │  ├────     prop-label-top.PNG  
 │  │  ├────     prop-label-visible.PNG  
 │  │  ├────     prop-num_of_stars.PNG  
 │  │  ├────     prop-show_half_stars-false.PNG  
 │  │  ├────     prop-show_half_stars-true.PNG  
 │  │  ├────     prop-size-large.PNG  
 │  │  ├────     prop-size-medium.PNG  
 │  │  ├────     prop-size-small.PNG  
 │  │  ├────     prop-space-around.PNG  
 │  │  ├────     prop-space-between.PNG  
 │  │  ├────     prop-space-default.PNG  
 │  │  ├────     prop-text.PNG  
 │  │  ├────     prop-type-custom_icon.PNG  
 │  │  ├────     prop-type-icon.PNG  
 │  │  ├────     prop-type-svg.PNG  
 │  │  ├────     prop-value.PNG  
 │  │  ├────     star-color-default.PNG  
 │  │  ├────     star-color-middle.PNG  
 │  │  ├────     star-color-negative.PNG  
 │  │  ├────     star-color-positive.PNG  
 │  │  ├────     star-empty.png  
 │  │  ├────     star-filled.png  
 │  │  ├────     star-fill-empty.png  
 │  │  ├────     star-fill-filled.PNG  
 │  │  ├────     star-fill-half.PNG  
 │  │  ├────     star-icon-character.PNG  
 │  │  ├────     star-icon-svg.PNG  
 │  │  ├────     star-rating-options.PNG  
 │  │  ├────     star-size-larg.PNG  
 │  │  ├────     star-size-medium.PNG  
 │  │  └────     star-size-small.PNG  
 └──     src/ 
 │  └────     assets/ 
 │  │  └────     star-rating.icons.svg  
 │  └────     sc5-styleguide/ 
 │  │  ├────     elements.sc5.scss  
 │  │  ├────     modifiers.sc5.scss  
 │  │  ├────     styleguide.scss  
 │  │  ├────     styles.css  
 │  │  └────     themes.scss  
 │  └────     scss/ 
 │  │  ├────     _elements.scss  
 │  │  ├────     _modifiers.scss  
 │  │  ├────     star-rating.scss  
 │  │  ├────     _themes.scss  
 │  │  └────     _variables.scss

Can you fix it please ? Thank you for your work. :)

Have a nice day !

8

Update package.json main to point to dist css file

package.json's main currently points to the non-existant dist/index.js file. The real main entry point for css-star-rating is the css file itself. By setting that to the main, it can be easily integrated with projects that support loading node modules (such as by using WebPack) as a simple @import 'css-star-rating'.
9

Add clear element

Add visual element for clearing the stars.

NOTE: Even if this is no interactive element it will implemented here in terms of layout and design. This is the base to make it interactive in JavaScript based implementations of this lib.
10

Mark Range variables as Default

Allows range variables (specifically maxNumOfStars) to be overridden by the importing SCSS file.

Fixes https://github.com/BioPhoton/angular-star-rating/issues/61
11

chore(deps): bump json5 from 2.2.0 to 2.2.3
Bumps json5 from 2.2.0 to 2.2.3.
Release notes

Sourced from json5's releases.
v2.2.3
- Fix: [email protected] is now the 'latest' release according to npm instead of v1.0.2. (#299)
v2.2.2
- Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
v2.2.1
- Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)
Changelog

Sourced from json5's changelog.
v2.2.3 [code, diff]
- Fix: [email protected] is now the 'latest' release according to npm instead of v1.0.2. (#299)
v2.2.2 [code, diff]
- Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
v2.2.1 [code, diff]
- Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)
Commits
- c3a7524 2.2.3
- 94fd06d docs: update CHANGELOG for v2.2.3
- 3b8cebf docs(security): use GitHub security advisories
- f0fd9e1 docs: publish a security policy
- 6a91a05 docs(template): bug -> bug report
- 14f8cb1 2.2.2
- 10cc7ca docs: update CHANGELOG for v2.2.2
- 7774c10 fix: add proto to objects and arrays
- edde30a Readme: slight tweak to intro
- 97286f8 Improve example in readme
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
12

chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes

Sourced from decode-uri-component's releases.
v0.2.2
- Prevent overwriting previously decoded tokens 980e0bf
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1
- Switch to GitHub workflows 76abc93
- Fix issue where decode throws - fixes #6 746ca5d
- Update license (#1) 486d7e2
- Tidelift tasks a650457
- Meta tweaks 66e1c28
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1
Commits
- a0eea46 0.2.2
- 980e0bf Prevent overwriting previously decoded tokens
- 3c8a373 0.2.1
- 76abc93 Switch to GitHub workflows
- 746ca5d Fix issue where decode throws - fixes #6
- 486d7e2 Update license (#1)
- a650457 Tidelift tasks
- 66e1c28 Meta tweaks
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
13

chore(deps): bump loader-utils from 2.0.2 to 2.0.4
Bumps loader-utils from 2.0.2 to 2.0.4.
Release notes

Sourced from loader-utils's releases.
v2.0.4

2.0.4 (2022-11-11)

Bug Fixes
- ReDoS problem (#225) (ac09944)
v2.0.3

2.0.3 (2022-10-20)

Bug Fixes
- security: prototype pollution exploit (#217) (a93cf6f)
Changelog

Sourced from loader-utils's changelog.
2.0.4 (2022-11-11)

Bug Fixes
- ReDoS problem (#225) (ac09944)
2.0.3 (2022-10-20)

Bug Fixes
- security: prototype pollution exploit (#217) (a93cf6f)
Commits
- 6688b50 chore(release): 2.0.4
- ac09944 fix: ReDoS problem (#225)
- 7162619 chore(release): 2.0.3
- a93cf6f fix(security): prototype polution exploit (#217)
- 90c7c4b chore(release): 2.0.2
- 8c2d24e fix: base64 generation and unicode characters (#197)
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
14

chore(deps): bump terser from 5.12.1 to 5.14.2
Bumps terser from 5.12.1 to 5.14.2.
Changelog

Sourced from terser's changelog.
v5.14.2
- Security fix for RegExps that should not be evaluated (regexp DDOS)
- Source maps improvements (#1211)
- Performance improvements in long property access evaluation (#1213)
v5.14.1
- keep_numbers option added to TypeScript defs (#1208)
- Fixed parsing of nested template strings (#1204)
v5.14.0
- Switched to @jridgewell/source-map for sourcemap generation (#1190, #1181)
- Fixed source maps with non-terminated segments (#1106)
- Enabled typescript types to be imported from the package (#1194)
- Extra DOM props have been added (#1191)
- Delete the AST while generating code, as a means to save RAM
v5.13.1
- Removed self-assignments (varname=varname) (closes #1081)
- Separated inlining code (for inlining things into references, or removing IIFEs)
- Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)
v5.13.0
- All calls to eval() were removed (#1171, #1184)
- source-map was updated to 0.8.0-beta.0 (#1164)
- NavigatorUAData was added to domprops to avoid property mangling (#1166)
Commits
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.

Half star rating is not working

.half class not working for the half star rating. It gives me the full star rating. Here is the code below.

  <div class="rating small star-icon half color-ok value-3">
        <div class="star-container">
          <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
          </div>
          <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
          </div>
          <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
          </div>
          <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
          </div>
          <div class="star">
            <i class="star-empty"></i>
            <i class="star-half"></i>
            <i class="star-filled"></i>
          </div>
        </div>
      </div>

16

Add "bp-" prefix to prevent class collapse #9

I test it using the styleguide 🍕😄

But the dist folder also has the same files of src, I've don't know if it is a problem.

Can you test it? @BioPhoton

Css Star Rating is a css only star rating lib based on best practice UX/UI methodes. It is written in scss and fully customizable.

Css Star Rating ⭐ ⭐ ⭐ ⭐ ⭐

⭐ Css Star Rating is a pure css star rating plugin based on best practice UX/UI methods. ⭐

Demo

Features

Browser support

Related Projects

Demo

Install

Css Modifiers

Themes

Github

Comments(16)

compound selector no longer extend

Remove compound selector extends.

"Half stars" not working although set ".half" class

chore(deps): bump loader-utils from 2.0.2 to 2.0.3

v2.0.3

2.0.3 (2022-10-20)

Bug Fixes

2.0.3 (2022-10-20)

Bug Fixes

Support for Angular v9

Build Warning

I'm submitting a...

Current behavior

Expected behavior

1.2.4 - Files are missing

1.2.4 css-star-rating's content (Doesn't Work)

1.1.3 css-star-rating's content (Works well !)

Update package.json main to point to dist css file

Add clear element

Mark Range variables as Default

chore(deps): bump json5 from 2.2.0 to 2.2.3

v2.2.3

v2.2.2

v2.2.1

v2.2.3 [code, diff]

v2.2.2 [code, diff]

v2.2.1 [code, diff]

chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

v0.2.2

v0.2.1

chore(deps): bump loader-utils from 2.0.2 to 2.0.4

v2.0.4

2.0.4 (2022-11-11)

Bug Fixes

v2.0.3

2.0.3 (2022-10-20)

Bug Fixes

2.0.4 (2022-11-11)

Bug Fixes

2.0.3 (2022-10-20)

Bug Fixes

chore(deps): bump terser from 5.12.1 to 5.14.2

v5.14.2

v5.14.1

v5.14.0

v5.13.1

v5.13.0

Half star rating is not working

Add "bp-" prefix to prevent class collapse #9

Popular Tag

Related