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.

License Bower Version NPM Version
Standard Version

Build Status npm

Package Quality

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

  • Written in scss
  • Customizable over variables
  • Flexbox layout
  • SVG icons
  • Icon fonts like fontawesome, ionicon...
  • Display rating over css class
  • Different Numbers of stars
  • Color of stars depend on rating
  • Half stars
  • Sizes
  • Star alignments
  • Static colors
  • Disabled mode
  • Star types
  • Label
  • Label positions
  • Animations
  • Directions
  • Themes

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

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)

  • 1

    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.

  • 3

    "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

    Dependabot compatibility score

    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:

    Screen Shot 2019-04-03 at 1 44 23 PM Screen Shot 2019-04-03 at 1 44 07 PM

    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

  • 7

    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

    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]

    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 compatibility score

    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

    Dependabot compatibility score

    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

    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

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Commits

    Dependabot compatibility score

    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

    Dependabot compatibility score

    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.

  • 15

    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