├── .browserslistrc ├── .github └── workflows │ └── release.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bower.json ├── chore ├── chore.config.js └── gulp │ ├── helper.js │ └── tasks │ ├── css.js │ ├── project.js │ └── version.js ├── docs-assets └── fontawesome │ ├── fontawesome-all.min.css │ └── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.svg │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.svg │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.eot │ ├── fa-solid-900.svg │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ └── fa-solid-900.woff2 ├── docs ├── assets │ ├── css │ │ ├── fontawesome-all.min.css │ │ ├── star-rating.css │ │ └── star-rating.min.css │ ├── images │ │ └── star-rating.icons.svg │ └── webfonts │ │ ├── fa-brands-400.eot │ │ ├── fa-brands-400.svg │ │ ├── fa-brands-400.ttf │ │ ├── fa-brands-400.woff │ │ ├── fa-brands-400.woff2 │ │ ├── fa-regular-400.eot │ │ ├── fa-regular-400.svg │ │ ├── fa-regular-400.ttf │ │ ├── fa-regular-400.woff │ │ ├── fa-regular-400.woff2 │ │ ├── fa-solid-900.eot │ │ ├── fa-solid-900.svg │ │ ├── fa-solid-900.ttf │ │ ├── fa-solid-900.woff │ │ └── fa-solid-900.woff2 ├── index.html ├── item-1-1-1.html ├── item-1-1-10.html ├── item-1-1-11.html ├── item-1-1-2-1.html ├── item-1-1-2.html ├── item-1-1-3.html ├── item-1-1-4.html ├── item-1-1-5.html ├── item-1-1-6.html ├── item-1-1-7.html ├── item-1-1-8.html ├── item-1-1-9.html ├── item-1-1.html ├── item-1-2-1-1-3-1.html ├── item-1-2-1-1-3.html ├── item-1-2-1-1.html ├── item-1-2-1-2.html ├── item-1-2-1-3.html ├── item-1-2-1-4.html ├── item-1-2-1-5.html ├── item-1-2-1.html ├── item-1-2-2-1.html ├── item-1-2-2-4.html ├── item-1-2-2.html ├── item-1-2-3-1.html ├── item-1-2-3-2.html ├── item-1-2-3.html ├── item-1-2.html ├── item-1-3-1.html ├── item-1-3.html ├── item-1.html ├── kss-assets │ ├── WARNING.txt │ ├── github-fork--black.png │ ├── kss-fullscreen.js │ ├── kss-guides.js │ ├── kss-markup.js │ ├── kss.css │ ├── kss.js │ ├── kss.scss │ ├── noise-low.png │ ├── prettify.js │ ├── sample-inline.png │ ├── sample-inline.svg │ ├── sample.png │ ├── sample.svg │ └── scrollspy.js └── section-1.html ├── gulpfile.js ├── kss-config.json ├── package-lock.json ├── package.json ├── resources └── images │ ├── browsers │ ├── chrome.png │ ├── firefox.png │ ├── ie.png │ ├── opera.png │ └── safari.png │ ├── example-usage.PNG │ ├── example-usage.gif │ ├── family │ ├── angular.png │ ├── angular1.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-label-bottom.PNG │ ├── prop-label-hidden.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-fill-empty.png │ ├── star-fill-filled.PNG │ ├── star-fill-half.PNG │ ├── star-filled.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 ├── kss-documentation ├── elements.kss.scss ├── homepage.md ├── modifiers.kss.scss ├── styleguide.kss.scss └── themes.kss.scss └── scss ├── _elements.scss ├── _modifiers.scss ├── _themes.scss ├── _variables.scss └── star-rating.scss /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1%, 2 | last 2 versions, 3 | firefox >= 4, 4 | safari 7, 5 | safari 8, 6 | IE 8, 7 | IE 9, 8 | IE 10, 9 | IE 11 10 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: release 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | 8 | build: 9 | name: build-package 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout repository 13 | uses: actions/checkout@v3 14 | - name: Setup node 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: '14' 18 | - name: Restore npm packages 19 | run: npm install 20 | - name: Build package & config git workspace 21 | run: npm run project:build 22 | - name: Publish if version has been updated 23 | if: github.ref == 'refs/heads/master' 24 | uses: pascalgn/npm-publish-action@1.3.9 25 | with: 26 | tag_name: "v%s" 27 | tag_message: "v%s" 28 | create_tag: "true" 29 | commit_pattern: "^chore\\(release\\): (\\S+)" 30 | workspace: "./dist" 31 | publish_command: "yarn" 32 | publish_args: "--non-interactive" 33 | env: 34 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 35 | NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 36 | 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | .idea/ 5 | 6 | node_modules/ 7 | /sc5-styleguide/ 8 | /npm-debug.log 9 | dist/ 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | chore 2 | /sc5-styleguide/ 3 | .gitignore 4 | .idea 5 | gulpfile.js 6 | .travis.yml -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "useEditorConfig": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - '5.0' 5 | 6 | cache: 7 | directories: 8 | - ./node_modules 9 | 10 | install: 11 | - npm i 12 | 13 | before_script: 14 | 15 | script: 16 | - npm run build -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.3.1](https://github.com/BioPhoton/css-star-rating/compare/v1.3.0...v1.3.1) (2022-06-06) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * Fix [#44](https://github.com/BioPhoton/css-star-rating/issues/44) 7 | * remove generated dist folder from repository ([31fa356](https://github.com/BioPhoton/css-star-rating/commit/31fa3568a9a9ce14e75ac0e8a53d38d787912f2a)) 8 | 9 | 10 | ### Features 11 | 12 | * add support for newer versions of dart sass ([d304c37](https://github.com/BioPhoton/css-star-rating/commit/d304c37d98621983ad956da6bccfd42ab7141514)) 13 | 14 | 15 | 16 | # Changelog 17 | 18 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 19 | 20 | ## [1.3.0](https://github.com/BioPhoton/css-star-rating/compare/v1.1.3...v1.3.0) (2022-03-21) 21 | 22 | ### Features 23 | 24 | * Support newer version of sass 25 | 26 | ### Bug Fixes 27 | 28 | * **KSS docs:** Implemented KSS docs hosted on github from docs folder ([53e453d](https://github.com/BioPhoton/css-star-rating/commit/53e453d12b95b630f9042951a04990ffd81a21a0)) 29 | * remove unused folder from dist ([ddeb090](https://github.com/BioPhoton/css-star-rating/commit/ddeb09035561a32efd0a07abbe5095328eb8b8e0)) 30 | 31 | 32 | ## [1.2.5](https://github.com/BioPhoton/css-star-rating/compare/v1.1.3...v1.2.5) (2018-03-24) 33 | 34 | 35 | ### Bug Fixes 36 | 37 | * **docs:** updated readme 38 | 39 | 40 | 41 | 42 | ## [1.2.4](https://github.com/BioPhoton/css-star-rating/compare/v1.1.3...v1.2.4) (2018-02-26) 43 | 44 | 45 | ### Bug Fixes 46 | 47 | * **KSS docs:** Implemented KSS docs hosted on github from docs folder ([53e453d](https://github.com/BioPhoton/css-star-rating/commit/53e453d)) 48 | 49 | 50 | 51 | 52 | ## [1.2.3](https://github.com/BioPhoton/css-star-rating/compare/v1.1.3...v1.2.3) (2018-02-26) 53 | 54 | 55 | ### Features 56 | 57 | * **KSS docs:** Implemented KSS docs hosted on github from docs folder ([53e453d](https://github.com/BioPhoton/css-star-rating/commit/53e453d)) 58 | 59 | 60 | 61 | 62 | ## [1.1.3](https://github.com/BioPhoton/css-star-rating/compare/v1.1.2...v1.1.3) (2017-04-07) 63 | 64 | 65 | ### Bug Fixes 66 | 67 | * **build:** rebuild project ([c2b693e](https://github.com/BioPhoton/css-star-rating/commit/c2b693e)) 68 | * **hover:** fixed hover for half star ratings, extended styleguide ([7f56a09](https://github.com/BioPhoton/css-star-rating/commit/7f56a09)) 69 | 70 | 71 | 72 | 73 | ## [1.1.2](https://github.com/BioPhoton/css-star-rating/compare/v1.1.1...v1.1.2) (2017-04-07) 74 | 75 | 76 | ### Bug Fixes 77 | 78 | * **build:** rebuild project ([bc1ea5d](https://github.com/BioPhoton/css-star-rating/commit/bc1ea5d)) 79 | * **color names:** changed middle to ok ([9c48b46](https://github.com/BioPhoton/css-star-rating/commit/9c48b46)) 80 | * **hover:** started tests with hover ([e008396](https://github.com/BioPhoton/css-star-rating/commit/e008396)) 81 | 82 | 83 | ### Features 84 | 85 | * **hover:** implemented hover modifiers and tests in the styleguide ([5eea511](https://github.com/BioPhoton/css-star-rating/commit/5eea511)) 86 | 87 | 88 | 89 | 90 | ## [1.1.1](https://github.com/BioPhoton/css-star-rating/compare/v1.0.7...v1.1.1) (2016-12-19) 91 | 92 | 93 | ### Bug Fixes 94 | 95 | * **build:** rebuild project ([9fad8f8](https://github.com/BioPhoton/css-star-rating/commit/9fad8f8)) 96 | 97 | 98 | ### Features 99 | 100 | * **changed color names:** changed middle to ok ([b70125b](https://github.com/BioPhoton/css-star-rating/commit/b70125b)) 101 | * **modifier:** implemebted star space and label visibility [#22](https://github.com/BioPhoton/css-star-rating/issues/22), [#17](https://github.com/BioPhoton/css-star-rating/issues/17) ([713183c](https://github.com/BioPhoton/css-star-rating/commit/713183c)) 102 | * **modifier:** implemebted star space and label visibility and updated readme [#22](https://github.com/BioPhoton/css-star-rating/issues/22), [#17](https://github.com/BioPhoton/css-star-rating/issues/17) ([5842174](https://github.com/BioPhoton/css-star-rating/commit/5842174)) 103 | 104 | 105 | 106 | 107 | # [1.1.0](https://github.com/BioPhoton/css-star-rating/compare/v1.0.7...v1.1.0) (2016-12-18) 108 | 109 | 110 | ### Bug Fixes 111 | 112 | * **build:** rebuild project ([9fad8f8](https://github.com/BioPhoton/css-star-rating/commit/9fad8f8)) 113 | 114 | 115 | ### Features 116 | 117 | * **modifier:** implemented star space and label visibility [#22](https://github.com/BioPhoton/css-star-rating/issues/22), [#17](https://github.com/BioPhoton/css-star-rating/issues/17) ([713183c](https://github.com/BioPhoton/css-star-rating/commit/713183c)) 118 | * **modifier:** implemented star space and label visibility and updated readme [#22](https://github.com/BioPhoton/css-star-rating/issues/22), [#17](https://github.com/BioPhoton/css-star-rating/issues/17) ([5842174](https://github.com/BioPhoton/css-star-rating/commit/5842174)) 119 | 120 | 121 | 122 | 123 | ## [1.0.7](https://github.com/BioPhoton/css-star-rating/compare/v1.0.6...v1.0.7) (2016-12-07) 124 | 125 | 126 | ### Bug Fixes 127 | 128 | * **build:** rebuild project ([0db5fa4](https://github.com/BioPhoton/css-star-rating/commit/0db5fa4)) 129 | * **resources:** remved resources ([2e27cfe](https://github.com/BioPhoton/css-star-rating/commit/2e27cfe)) 130 | 131 | 132 | ### Features 133 | 134 | * **font-icon:** implemented fonticon styles ([9543d14](https://github.com/BioPhoton/css-star-rating/commit/9543d14)) 135 | * **themes:** implemented themes ([7f82d98](https://github.com/BioPhoton/css-star-rating/commit/7f82d98)) 136 | 137 | 138 | 139 | 140 | ## [1.0.6](https://github.com/BioPhoton/css-star-rating/compare/v1.0.3...v1.0.6) (2016-12-02) 141 | 142 | 143 | ### Bug Fixes 144 | 145 | * **assets:** moved images to assets folder ([65185ba](https://github.com/BioPhoton/css-star-rating/commit/65185ba)) 146 | * **assets:** removed images ([c018301](https://github.com/BioPhoton/css-star-rating/commit/c018301)) 147 | * **build:** rebuild project ([ac02fde](https://github.com/BioPhoton/css-star-rating/commit/ac02fde)) 148 | * **readme:** image paths ([091b91d](https://github.com/BioPhoton/css-star-rating/commit/091b91d)) 149 | * **readme:** image paths ([7f55739](https://github.com/BioPhoton/css-star-rating/commit/7f55739)) 150 | * **readme:** updated readme ([2bb59fe](https://github.com/BioPhoton/css-star-rating/commit/2bb59fe)) 151 | * **readme:** updated readme ([6870720](https://github.com/BioPhoton/css-star-rating/commit/6870720)) 152 | * **readme:** updated readme ([6fa3b0e](https://github.com/BioPhoton/css-star-rating/commit/6fa3b0e)) 153 | * **refactored:** scss, kss, scripts ([f1a6b5a](https://github.com/BioPhoton/css-star-rating/commit/f1a6b5a)) 154 | * **star icon position:** fixed star icon position ([b121d9b](https://github.com/BioPhoton/css-star-rating/commit/b121d9b)) 155 | 156 | 157 | ### Features 158 | 159 | * **browser support:** try testling ([2b596d9](https://github.com/BioPhoton/css-star-rating/commit/2b596d9)) 160 | * **changelog:** implement changelog [#18](https://github.com/BioPhoton/css-star-rating/issues/18) ([7700c0b](https://github.com/BioPhoton/css-star-rating/commit/7700c0b)) 161 | * **resources:** added images ([c9a4482](https://github.com/BioPhoton/css-star-rating/commit/c9a4482)) 162 | * **styleguide:** updated styleguide ([6b5ac43](https://github.com/BioPhoton/css-star-rating/commit/6b5ac43)) 163 | * **themes:** imtroduced themes with 2 themes ([ec4171e](https://github.com/BioPhoton/css-star-rating/commit/ec4171e)) 164 | * **version-bump:** bumped version to 1.0.5 ([42e7ea4](https://github.com/BioPhoton/css-star-rating/commit/42e7ea4)) 165 | 166 | 167 | 168 | 169 | ## [1.0.4](https://github.com/BioPhoton/css-star-rating/compare/v1.0.3...v1.0.4) (2016-11-30) 170 | 171 | 172 | ### Bug Fixes 173 | 174 | * **assets:** moved images to assets folder ([65185ba](https://github.com/BioPhoton/css-star-rating/commit/65185ba)) 175 | * **refactored:** scss, kss, scripts ([f1a6b5a](https://github.com/BioPhoton/css-star-rating/commit/f1a6b5a)) 176 | 177 | 178 | ### Features 179 | 180 | * **browser support:** try testling ([2b596d9](https://github.com/BioPhoton/css-star-rating/commit/2b596d9)) 181 | 182 | 183 | 184 | 185 | ## [1.0.3](https://github.com/BioPhoton/css-star-rating/compare/v1.0.2...v1.0.3) (2016-11-28) 186 | 187 | 188 | ### Bug Fixes 189 | 190 | * **build:** rebuild project ([dc82b85](https://github.com/BioPhoton/css-star-rating/commit/dc82b85)) 191 | * **build:** rebuild project ([624a797](https://github.com/BioPhoton/css-star-rating/commit/624a797)) 192 | * **formatting:** removed line break ([8ab7d52](https://github.com/BioPhoton/css-star-rating/commit/8ab7d52)) 193 | * **modifier:** fixed static color modifier ([ae9fa03](https://github.com/BioPhoton/css-star-rating/commit/ae9fa03)) 194 | * **scss:** removed img star depending scss ([ce43f43](https://github.com/BioPhoton/css-star-rating/commit/ce43f43)) 195 | * **styleguide:** edited bast styleguide file ([3e2e5df](https://github.com/BioPhoton/css-star-rating/commit/3e2e5df)) 196 | * **styleguide:** start decouple kss docs from scss ([ba94603](https://github.com/BioPhoton/css-star-rating/commit/ba94603)) 197 | 198 | 199 | ### Features 200 | 201 | * **features and refactoring:** refactored scss to element base extended kss, added direction modifier ([a2e3e42](https://github.com/BioPhoton/css-star-rating/commit/a2e3e42)) 202 | 203 | 204 | 205 | 206 | # [1.0.0](https://github.com/BioPhoton/css-star-rating/compare/2aaa7c0...v1.0.0) (2016-11-27) 207 | 208 | 209 | ### Features 210 | 211 | * **setup dist:** setup initial dist folder ([8f25a1d](https://github.com/BioPhoton/css-star-rating/commit/8f25a1d)) 212 | * **setup src files:** setup folder structure and scss imports ([2aaa7c0](https://github.com/BioPhoton/css-star-rating/commit/2aaa7c0)) 213 | 214 | 215 | 216 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-present Michael Hladky 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-star-rating", 3 | "version": "1.1.3", 4 | "description": "Css Star Rating is pure css component written in scss.", 5 | "main": "dist/css/star-rating.css", 6 | "authors": [ 7 | "Michael Hladky" 8 | ], 9 | "license": "MIT", 10 | "keywords": [ 11 | "Rating", 12 | "Stars", 13 | "Star Rating", 14 | "Star-Rating", 15 | "Starrating", 16 | "Icon", 17 | "Iconfont", 18 | "Fonticons", 19 | "Fontawesome", 20 | "SVG", 21 | "PNG", 22 | "JPEG", 23 | "CSS", 24 | "Pure CSS", 25 | "CSS only", 26 | "SCSS" 27 | ], 28 | "homepage": "https://github.com/BioPhoton/css-star-rating", 29 | "ignore": [ 30 | "**/.*", 31 | "node_modules", 32 | "bower_components", 33 | "test", 34 | "tests", 35 | "chore", 36 | "sc5-styleguide", 37 | ".gitignore", 38 | ".travis.yml", 39 | ".idea", 40 | "gulpfile.js" 41 | ], 42 | "dependencies": {} 43 | } 44 | -------------------------------------------------------------------------------- /chore/chore.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file contains the variables used in other gulp files 3 | * which defines tasks 4 | */ 5 | 'use strict'; 6 | const path = require('path'); 7 | module.exports = (function () { 8 | 9 | const projectName = "Css Star Rating"; 10 | 11 | const ENV_LOCAL = "local", 12 | ENV_STAGING = "staging", 13 | ENV_PRODUCTION = "production", 14 | ENV_TESTING = "testing"; 15 | 16 | const validEnvs = [ENV_LOCAL, ENV_STAGING, ENV_PRODUCTION, ENV_TESTING]; 17 | 18 | //dir paths 19 | const root = './', 20 | src = 'src', 21 | dist = 'dist', 22 | 23 | entryFile = 'app.js', 24 | indexFile = 'index.html', 25 | app = 'app', 26 | assets = 'assets'; 27 | 28 | const styleguideFolder = 'docs'; 29 | const styleguideCopies = [ 30 | { 31 | src: [ 32 | path.join( 'src', 'assets', 'star-rating.icons.svg') 33 | ], 34 | dest: path.join(styleguideFolder, 'assets', 'images'), 35 | name: 'styleguide images copies' 36 | } 37 | ]; 38 | 39 | const config = { 40 | projectName:projectName, 41 | root: root, 42 | src: src, 43 | dist: dist, 44 | 45 | app: app, 46 | assets: assets, 47 | 48 | entryFile: entryFile, 49 | indexFile: indexFile, 50 | 51 | sc5Styleguide:{ 52 | destFolder : styleguideFolder 53 | , copies : styleguideCopies 54 | } 55 | }; 56 | 57 | return config; 58 | 59 | })(); 60 | -------------------------------------------------------------------------------- /chore/gulp/helper.js: -------------------------------------------------------------------------------- 1 | /** 2 | * helper.js 3 | * 4 | * This file requires following npm modules: 5 | * `` 6 | * npm install gulp gulp-load-plugins del gulp-notify extendify merge-stream --save-dev 7 | * `` 8 | * 9 | */ 10 | 11 | 'use strict'; 12 | 13 | module.exports = (function () { 14 | const gulp = require('gulp'); 15 | const del = require('del'); 16 | const fs = require('fs'); 17 | const notify = require('gulp-notify'); 18 | const extendify = require('extendify'); 19 | const merge = require('merge-stream'); 20 | const $ = require('gulp-load-plugins')(); 21 | 22 | ////////// 23 | 24 | const arrayMergeExtend = extendify({ 25 | inPlace: false, 26 | isDeep: true 27 | }), 28 | arrayReplaceExtend = extendify({ 29 | inPlace: false, 30 | isDeep: true, 31 | arrays: 'replace' 32 | }), 33 | arrayConcatExtend = extendify({ 34 | inPlace: false, 35 | isDeep: true, 36 | arrays: 'concat' 37 | }); 38 | 39 | const helper = { 40 | arrayMergeExtend: arrayMergeExtend, 41 | arrayReplaceExtend: arrayReplaceExtend, 42 | arrayConcatExtend: arrayConcatExtend, 43 | getEnv: getEnv, 44 | getEnvConfigJson: getEnvConfigJson, 45 | log: log, 46 | bulkCopy: bulkCopy, 47 | clean: clean, 48 | errorHandler: errorhandler, 49 | bytediffFormatter: bytediffFormatter 50 | }; 51 | 52 | return helper; 53 | 54 | /////////////////// 55 | 56 | function getEnv() { 57 | return process.env.NODE_ENV || 'local'; 58 | } 59 | 60 | function getEnvConfigJson(filepath) { 61 | return JSON.parse(fs.readFileSync(filepath)); 62 | } 63 | 64 | /** 65 | * Log a message or series of messages using chalk's green color. 66 | * Can pass in a string, object or array. 67 | */ 68 | function log(msg, color) { 69 | if (typeof msg === 'object') { 70 | for (let item in msg) { 71 | if (msg.hasOwnProperty(item)) { 72 | if (color && color in $.util.colors) { 73 | $.util.log($.util.colors[color](msg[item])); 74 | } 75 | $.util.log($.util.colors.lightgreen(msg[item])); 76 | } 77 | } 78 | } else { 79 | $.util?.log($.util.colors.green(msg)); 80 | } 81 | } 82 | 83 | /**/ 84 | function bulkCopy(copyArray, done) { 85 | log( 86 | 'Performing bulk copy: ' + 87 | $.util.colors.green(copyArray.length) + 88 | ' tasks' 89 | ); 90 | const merged = merge(); 91 | 92 | if (copyArray.length == 0) { 93 | log('Nothing to copy'); 94 | return merged; 95 | } 96 | 97 | for (const i = 0; i <= copyArray.length - 1; i++) { 98 | log( 99 | 'copy ' + 100 | ('name' in copyArray[i] ? copyArray[i].name : '') + 101 | ' files from ' + 102 | copyArray[i].src + 103 | ' to ' + 104 | copyArray[i].dest 105 | ); 106 | const move = gulp.src(copyArray[i].src).pipe(gulp.dest(copyArray[i].dest)); 107 | 108 | merged.add(move); 109 | } 110 | 111 | return merged; 112 | } 113 | 114 | /** 115 | * Delete all files in a given path 116 | * @param {Array} path - array of paths to delete 117 | * @param {Function} done - callback when complete 118 | */ 119 | function clean(path, done) { 120 | log('Cleaning: ' + $.util?.colors.green(path)); 121 | return del(path, done); 122 | } 123 | 124 | function errorhandler(title) { 125 | return notify.onError({ 126 | title: title + ' error(s)', 127 | message: '<%= error.message %>' 128 | }); 129 | } 130 | 131 | /** 132 | * Formatter for bytediff to display the size changes after processing 133 | * @param {Object} data - byte data 134 | * @return {String} Difference in bytes, formatted 135 | */ 136 | function bytediffFormatter(data) { 137 | const difference = data.savings > 0 ? ' smaller.' : ' larger.'; 138 | return ( 139 | data.fileName + 140 | ' went from ' + 141 | (data.startSize / 1000).toFixed(2) + 142 | ' kB to ' + 143 | (data.endSize / 1000).toFixed(2) + 144 | ' kB and is ' + 145 | formatPercent(1 - data.percent, 2) + 146 | '%' + 147 | difference 148 | ); 149 | } 150 | 151 | /** 152 | * Format a number as a percentage 153 | * @param {Number} num Number to format as a percent 154 | * @param {Number} precision Precision of the decimal 155 | * @return {String} Formatted perentage 156 | */ 157 | function formatPercent(num, precision) { 158 | return (num * 100).toFixed(precision); 159 | } 160 | })(); 161 | -------------------------------------------------------------------------------- /chore/gulp/tasks/css.js: -------------------------------------------------------------------------------- 1 | /** 2 | * css.js 3 | * 4 | * This file uses the config.js and helper.js file located in ./gulp 5 | * 6 | * This file requires following npm modules: 7 | * `` 8 | * npm install gulp gulp-load-plugins gulp-autoprefixer gulp-sass gulp-cssnano gulp-rename gulp-inject gulp-plumber --save-dev 9 | * `` 10 | * 11 | */ 12 | 13 | 'use strict'; 14 | 15 | const gulp = require('gulp'); 16 | const helper = require('../helper'); 17 | const $ = require('gulp-load-plugins')(); 18 | //postcss = require('gulp-postcss'), 19 | const autoprefixer = require('gulp-autoprefixer'); 20 | const sass = require('gulp-sass')(require('sass')); 21 | 22 | const config = require('../../chore.config.js'); 23 | const assetsFolder = config.dist + 'assets/'; 24 | const scssFoldername = 'scss/'; 25 | 26 | const defaultConfig = { 27 | indexFile: config.buildIndex, 28 | mainCssFile: 'star-rating.css', 29 | minCssFile: 'star-rating.min.css', 30 | sassScr: [config.dist + '/' + scssFoldername + 'star-rating.scss'], 31 | sassDest: config.dist + '/css/', 32 | sassOptions: { 33 | indentWidth: 4, 34 | outputStyle: 'expanded', 35 | errorLogToConsole: true 36 | }, 37 | scssOrder: [], 38 | autoprefixerOptions: { 39 | cascade: false 40 | } 41 | }; 42 | 43 | ////////////////// 44 | 45 | const cssConfig = defaultConfig; 46 | 47 | /** 48 | * Overrides 49 | * 50 | * config.css {[see defaultConfig here]} 51 | * 52 | **/ 53 | 54 | if ('css' in config) { 55 | cssConfig = helper.arrayConcatExtend(defaultConfig, config.css); 56 | } 57 | 58 | //__________________________________________________________________________________________________ 59 | 60 | //organize css files for project 61 | gulp.task('css:clean', function (done) { 62 | helper.log('delete all autogenerated css files'); 63 | return helper.clean( 64 | [config.dist + '/scss/**/*.*', config.dist + '/css/**/*.*'], 65 | done 66 | ); 67 | }); 68 | 69 | gulp.task('css:copy', function (done) { 70 | helper.log('copy scss and css files'); 71 | return gulp 72 | .src(['./src/**/*.scss', '!./src/sc5-styleguide/*']) 73 | .pipe(gulp.dest(config.dist), done); 74 | }); 75 | 76 | gulp.task('css:recompile', function (done) { 77 | return compile(done); 78 | }); 79 | 80 | gulp.task('css:compile', function (done) { 81 | return compile(done); 82 | }); 83 | 84 | gulp.task('css:watch', function (done) { 85 | return gulp.watch(cssConfig.sassScr, gulp.series('css:recompile')); 86 | }); 87 | 88 | gulp.task('css:compile-optimize', function (done) { 89 | var srcFile = cssConfig.sassDest + cssConfig.mainCssFile; 90 | var destFile = cssConfig.sassDest + cssConfig.minCssFile; 91 | helper.log('minify css from ' + srcFile + ' and save it to ' + destFile); 92 | 93 | return gulp 94 | .src(srcFile) 95 | .pipe($.cssnano()) 96 | .pipe($.rename({ suffix: '.min' })) 97 | .pipe(gulp.dest(cssConfig.sassDest), done); 98 | }); 99 | 100 | function compile(done) { 101 | helper.log( 102 | 'parsing scss from ' + 103 | cssConfig.sassScr + 104 | ', autoprefixe and save it to ' + 105 | cssConfig.sassDest + 106 | cssConfig.mainCssFile 107 | ); 108 | 109 | const processors = [autoprefixer(cssConfig.autoprefixerOptions)]; 110 | 111 | return ( 112 | gulp 113 | .src(cssConfig.sassScr) 114 | .pipe($.concat(cssConfig.mainCssFile)) 115 | //move plumber into helper.js 116 | //.pipe($.plumber()) // exit gracefully if something fails after this 117 | .pipe(sass(cssConfig.sassOptions).on('error', sass.logError)) 118 | .pipe(autoprefixer(cssConfig.autoprefixerOptions)) 119 | .pipe(gulp.dest(cssConfig.sassDest), done) 120 | ); 121 | } 122 | -------------------------------------------------------------------------------- /chore/gulp/tasks/project.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main.js 3 | * 4 | * This files bundles several tasks from the tasks folder 5 | * 6 | */ 7 | 8 | 'use strict'; 9 | 10 | const gulp = require('gulp'); 11 | const helper = require('../helper'); 12 | const config = require('../../chore.config.js'); 13 | const autogeneratedFolders = ['sc5-styleguide']; 14 | 15 | ////////////////// 16 | 17 | //clean all but lib folder in www 18 | gulp.task('project:clean', function (done) { 19 | helper.log('delete all autogenerated files and folders'); 20 | return helper.clean([autogeneratedFolders], done); 21 | }); 22 | 23 | //clean all but lib folder in www 24 | gulp.task( 25 | 'project:build', 26 | gulp.series('css:clean', 'css:copy', 'css:compile', 'css:compile-optimize'), 27 | function (done) { 28 | helper.log('copy assets.'); 29 | return gulp 30 | .src(['./src/assets/star-rating.icons.svg']) 31 | .pipe(gulp.dest(config.dist + '/images'), done); 32 | } 33 | ); 34 | -------------------------------------------------------------------------------- /chore/gulp/tasks/version.js: -------------------------------------------------------------------------------- 1 | /** 2 | * version.js 3 | * 4 | * This file uses the config.js and helper.js file located in ./gulp 5 | * 6 | * This File requires following npm modules: 7 | * `` 8 | * npm install gulp gulp-load-plugins merge-stream gulp-bump gulp-print yargs --save-dev 9 | * `` 10 | */ 11 | 'use strict'; 12 | const path = require('path'); 13 | const gulp = require('gulp'); 14 | const args = require('yargs').argv; 15 | const helper = require('../helper'); 16 | const merge = require('merge-stream'); 17 | const $ = require('gulp-load-plugins')(); 18 | 19 | const config = require(path.join('..', '..', 'chore.config')); 20 | 21 | const defaultConfig = { 22 | root: config.root, 23 | appPackages: ['./config/base.config.json'], 24 | devPackages: [ 25 | './package.json', 26 | './bower.json' 27 | //'./manifest.json' 28 | ] 29 | }; 30 | 31 | ////////////////// 32 | 33 | const versionConfig = defaultConfig; 34 | 35 | /** 36 | * Overrides 37 | * 38 | * config.version {[see defaultConfig here]} 39 | * 40 | **/ 41 | 42 | if ('versionConfig' in config) { 43 | versionConfig = helper.arrayConcatExtend(defaultConfig, config.version); 44 | } 45 | 46 | //__________________________________________________________________________________________________ 47 | 48 | const typePre = 'pre'; 49 | const typePatch = 'patch'; 50 | const typeMinor = 'minor'; 51 | const typeMajor = 'major'; 52 | 53 | /** 54 | * Bump the version 55 | * --type=pre will bump the prerelease version *.*.*-x 56 | * --type=patch or no flag will bump the patch version *.*.x 57 | * --type=minor will bump the minor version *.x.* 58 | * --type=major will bump the major version x.*.* 59 | * --version=1.2.3 will bump to a specific version and ignore other flags 60 | */ 61 | gulp.task('version:bump', function (done) { 62 | var options = getOptions(args.type, args.version); 63 | return bumpVersion(options, done); 64 | }); 65 | 66 | gulp.task('version:bump-patch', function (done) { 67 | var options = getOptions(typePatch); 68 | return bumpVersion(options, done); 69 | }); 70 | 71 | gulp.task('version:bump-minor', function (done) { 72 | var options = getOptions(typeMinor); 73 | return bumpVersion(options, done); 74 | }); 75 | 76 | gulp.task('version:bump-major', function (done) { 77 | var options = getOptions(typeMajor); 78 | return bumpVersion(options, done); 79 | }); 80 | 81 | function bumpVersion(options, done) { 82 | var merged = merge(); 83 | 84 | merged.add( 85 | gulp 86 | .src(versionConfig.devPackages) 87 | .pipe($.print()) 88 | .pipe($.bump(options)) 89 | .pipe(gulp.dest(versionConfig.root)) 90 | ); 91 | 92 | merged.add( 93 | gulp 94 | .src(versionConfig.appPackages) 95 | .pipe($.print()) 96 | .pipe($.bump(options)) 97 | .pipe(gulp.dest(versionConfig.root + 'config/')) 98 | ); 99 | 100 | return merged; 101 | } 102 | 103 | function getOptions(type, version) { 104 | var msg = 'Bumping versions ', 105 | options = {}; 106 | 107 | if (version) { 108 | options.version = version; 109 | msg += 'to ' + version; 110 | } else { 111 | if (type != undefined) { 112 | options.type = type; 113 | msg += 'for a ' + type; 114 | } else { 115 | helper.log('No param to bump version to. Task stopped!'); 116 | return; 117 | } 118 | } 119 | 120 | helper.log(msg); 121 | 122 | return options; 123 | } 124 | -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /docs-assets/fontawesome/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs-assets/fontawesome/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /docs/assets/images/star-rating.icons.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | star-empty 7 | 9 | 10 | 11 | 12 | star-half 13 | 15 | 16 | 17 | 18 | star-filled 19 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /docs/assets/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/assets/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /docs/item-1-2-1-1-3-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |
45 | 46 | 47 | 1.2.1.1.3.1 48 | 49 | #permalink 50 | 51 | 52 | Star icons 53 | 54 |
55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The different star icons.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Examples 98 |
99 | 100 |
101 | Default styling 102 |
103 | 104 |
105 |
106 | 107 |
108 |
109 |
110 | 111 |
112 | .fa.fa-star-half-o 113 |
114 |
115 | font-awesome star-icon 116 |
117 |
118 |
119 | 120 |
121 |
122 |
123 |
124 | .ion-ios-star-half 125 |
126 |
127 | bootstrap star-icon 128 |
129 |
130 |
131 | 132 |
133 |
134 |
135 |
136 | .fa.fa-gear 137 |
138 |
139 | ionicons star-icon 140 |
141 |
142 |
143 | 144 |
145 |
146 |
147 |
148 | 149 |
150 | 151 | Markup 152 | 153 | 
<div class="star half custom-icon">
154 |   <i class="star-half [modifier class]"></i>
155 | </div>
156 |
157 | 158 |
159 | Source: src/kss-documentation/elements.kss.scss, line 201 160 |
161 | 162 |
163 |
164 |
165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /docs/item-1-2-1-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.1.1 48 | 49 | #permalink 50 | 51 | 52 | Star fill states 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The Star element visualizes the interactive star element it it's three fill states.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Examples 98 |
99 | 100 |
101 | Default styling 102 |
103 | 104 |
105 |
106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 |
118 | 119 |
120 | .empty 121 |
122 |
123 | displays the star element as empty 124 |
125 |
126 |
127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 |
137 |
138 |
139 |
140 | .half 141 |
142 |
143 | displays the star element as half filled 144 |
145 |
146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
157 |
158 |
159 |
160 | .filled 161 |
162 |
163 | displays the star element as filled 164 |
165 |
166 |
167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 |
177 |
178 |
179 |
180 | 181 |
182 | 183 | Markup 184 | 185 | 
<div class="star [modifier class]">
186 |   <svg class="star-empty">
187 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
188 |   </svg>
189 |   <svg class="star-half">
190 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
191 |   </svg>
192 |   <svg class="star-filled">
193 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
194 |   </svg>
195 | </div>
196 |
197 | 198 |
199 | Source: src/kss-documentation/elements.kss.scss, line 72 200 |
201 | 202 |
203 |
204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | -------------------------------------------------------------------------------- /docs/item-1-2-1-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.1.3 48 | 49 | #permalink 50 | 51 | 52 | Star sizes 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The Star sizes.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Examples 98 |
99 | 100 |
101 | Default styling 102 |
103 | 104 |
105 |
106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 |
118 | 119 |
120 | .small 121 |
122 |
123 | displays star in small size 124 |
125 |
126 |
127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 |
137 |
138 |
139 |
140 | .medium 141 |
142 |
143 | displays star in medium size 144 |
145 |
146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
157 |
158 |
159 |
160 | .large 161 |
162 |
163 | displays star in large size 164 |
165 |
166 |
167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 |
177 |
178 |
179 |
180 | 181 |
182 | 183 | Markup 184 | 185 | 
<div class="star [modifier class]">
186 |   <svg class="star-empty">
187 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
188 |   </svg>
189 |   <svg class="star-half">
190 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
191 |   </svg>
192 |   <svg class="star-filled">
193 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
194 |   </svg>
195 | </div>
196 |
197 | 198 |
199 | Source: src/kss-documentation/elements.kss.scss, line 218 200 |
201 | 202 |
203 |
204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | -------------------------------------------------------------------------------- /docs/item-1-2-1-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.1.4 48 | 49 | #permalink 50 | 51 | 52 | Star Disabled state 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The Star element in disabled state.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Examples 98 |
99 | 100 |
101 | Default styling 102 |
103 | 104 |
105 |
106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 |
118 | 119 |
120 | .disabled 121 |
122 |
123 | displays star in disabled state 124 |
125 |
126 |
127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 |
137 |
138 |
139 |
140 | 141 |
142 | 143 | Markup 144 | 145 | 
<div class="star half positive [modifier class]">
146 |   <svg class="star-empty">
147 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
148 |   </svg>
149 |   <svg class="star-half">
150 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
151 |   </svg>
152 |   <svg class="star-filled">
153 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
154 |   </svg>
155 | </div>
156 |
157 | 158 |
159 | Source: src/kss-documentation/elements.kss.scss, line 243 160 |
161 | 162 |
163 |
164 |
165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /docs/item-1-2-1-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.1.5 48 | 49 | #permalink 50 | 51 | 52 | The the direction of the star icon. 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

.direction-rtl - displays star icon in right to left direction. 89 | .direction-ltr - displays star icon in left to right direction.

90 |

sg-wrapper:

91 |
92 | 93 |
94 |
95 | 96 | 97 |
98 | 99 |
100 |
101 | Example 102 |
103 | 104 | 105 |
106 |
107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 |
117 |
118 |
119 | 120 |
121 | 122 |
123 | 124 | Markup 125 | 126 | 
<div class="star half ">
127 |   <svg class="star-empty">
128 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
129 |   </svg>
130 |   <svg class="star-half">
131 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
132 |   </svg>
133 |   <svg class="star-filled">
134 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
135 |   </svg>
136 | </div>
137 |
138 | 139 |
140 | Source: src/kss-documentation/elements.kss.scss, line 266 141 |
142 | 143 |
144 |
145 |
146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /docs/item-1-2-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.1 48 | 49 | #permalink 50 | 51 | 52 | Star Element 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The Star element.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Example 98 |
99 | 100 | 101 |
102 |
103 | 104 | 105 | 106 |
107 |
108 |
109 | 110 |
111 | 112 |
113 | 114 | Markup 115 | 116 | 
<div class="star icon filled positive large">
117 |   <i class="star-empty"></i>
118 |   <i class="star-half"></i>
119 |   <i class="star-filled"></i>
120 | </div>
121 |
122 | 123 |
124 | Source: src/kss-documentation/elements.kss.scss, line 57 125 |
126 | 127 |
128 |
129 |
130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /docs/item-1-2-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.2 48 | 49 | #permalink 50 | 51 | 52 | Star Container 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The wrapper container for many stars.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Example 98 |
99 | 100 | 101 |
102 |
103 |
104 | 105 | 106 | 107 |
108 |
109 | 110 | 111 | 112 |
113 |
114 | 115 | 116 | 117 |
118 |
119 |
120 |
121 | 122 |
123 | 124 |
125 | 126 | Markup 127 | 128 | 
<div class="star-container">
129 |   <div class="star icon filled positive large">
130 |     <i class="star-empty"></i>
131 |     <i class="star-half"></i>
132 |     <i class="star-filled"></i>
133 |   </div>
134 |   <div class="star icon half positive large">
135 |     <i class="star-empty"></i>
136 |     <i class="star-half"></i>
137 |     <i class="star-filled"></i>
138 |   </div>
139 |   <div class="star icon empty positive large">
140 |     <i class="star-empty"></i>
141 |     <i class="star-half"></i>
142 |     <i class="star-filled"></i>
143 |   </div>
144 | </div>
145 |
146 | 147 |
148 | Source: src/kss-documentation/elements.kss.scss, line 293 149 |
150 | 151 |
152 |
153 |
154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /docs/item-1-2-3-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.3.1 48 | 49 | #permalink 50 | 51 | 52 | Label Sizes 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The Label element.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Examples 98 |
99 | 100 |
101 | Default styling 102 |
103 | 104 |
105 |
3.5
106 |
107 |
108 | 109 |
110 | .small 111 |
112 |
113 | displays star in small size 114 |
115 |
116 |
3.5
117 |
118 |
119 |
120 | .medium 121 |
122 |
123 | displays star in medium size 124 |
125 |
126 |
3.5
127 |
128 |
129 |
130 | .large 131 |
132 |
133 | displays star in large size 134 |
135 |
136 |
3.5
137 |
138 |
139 |
140 | 141 |
142 | 143 | Markup 144 | 145 | 
<div class="label-value [modifier class]">3.5</div>
146 |
147 | 148 |
149 | Source: src/kss-documentation/elements.kss.scss, line 410 150 |
151 | 152 |
153 |
154 |
155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | -------------------------------------------------------------------------------- /docs/item-1-2-3-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.3.2 48 | 49 | #permalink 50 | 51 | 52 | Label Disabled state 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The Label n disabled state.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Examples 98 |
99 | 100 |
101 | Default styling 102 |
103 | 104 |
105 |
3.5
106 |
107 |
108 | 109 |
110 | .disabled 111 |
112 |
113 | displays label in disabled state 114 |
115 |
116 |
3.5
117 |
118 |
119 |
120 | 121 |
122 | 123 | Markup 124 | 125 | 
<div class="label-value [modifier class]">3.5</div>
126 |
127 | 128 |
129 | Source: src/kss-documentation/elements.kss.scss, line 425 130 |
131 | 132 |
133 |
134 |
135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /docs/item-1-2-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.2.3 48 | 49 | #permalink 50 | 51 | 52 | Label Element 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

The Label element.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Example 98 |
99 | 100 | 101 |
102 |
3.5
103 |
104 |
105 | 106 |
107 | 108 |
109 | 110 | Markup 111 | 112 | 
<div class="label-value">3.5</div>
113 |
114 | 115 |
116 | Source: src/kss-documentation/elements.kss.scss, line 399 117 |
118 | 119 |
120 |
121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /docs/item-1-3-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.3.1 48 | 49 | #permalink 50 | 51 | 52 | Star types position test 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

All icons should lay exactly on top of each other.

89 | 90 |
91 | 92 | 93 |
94 | 95 |
96 |
97 | Example 98 |
99 | 100 | 101 |
102 |
103 | 104 | 105 | 106 | 107 | 108 |
109 |
110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 | 118 | 119 | 120 | 121 | 122 |
123 |
124 |
125 | 126 |
127 | 128 |
129 | 130 | Markup 131 | 132 | 
<div class="star icon show-all">
133 |   <svg class="star-empty">
134 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
135 |   </svg>
136 |   <i class="star-empty fa fa-star-o"></i>
137 |   <i class="star-empty"></i>
138 | </div>
139 | <div class="star star-half show-all">
140 |   <svg class="star-half">
141 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
142 |   </svg>
143 |   <i class="star-half fa fa-star-half-o"></i>
144 |   <i class="star-half"></i>
145 | </div>
146 | <div class="star star-filled show-all">
147 |   <svg class="star-filled">
148 |       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
149 |   </svg>
150 |   <i class="star-filled fa fa-star"></i>
151 |   <i class="star-filled"></i>
152 | </div>
153 |
154 | 155 |
156 | Source: src/kss-documentation/themes.kss.scss, line 32 157 |
158 | 159 |
160 |
161 |
162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /docs/item-1-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |

45 | 46 | 47 | 1.3 48 | 49 | #permalink 50 | 51 | 52 | Themes 53 | 54 |

55 | 56 |

57 | 58 | Toggle example guides 59 | 77 | 78 | 79 | Toggle HTML markup 80 | 84 | 85 |

86 | 87 |
88 |

Different themes for the star rating component. Easy to use as single modifier. 89 | Some themes expect a special background to look good. 90 | For demo-purpos the theme-[name]-gb classes are created.

91 |

.theme-rolling-stars - animate stars 92 | .theme-kununu - kununu theme 93 | .theme-google-places - google-places theme

94 |

sg-wrapper:

95 |
96 | 97 |
98 |
99 | 100 | 101 |
102 | 103 |
104 |
105 | Example 106 |
107 | 108 | 109 |
110 |
111 |
,57
112 |
113 |
114 | 115 | 116 | 117 |
118 |
119 |
120 |
121 |
122 | 123 |
124 | 125 |
126 | 127 | Markup 128 | 129 | 
   <div ng-init="data.rating=3" class="rating value- half " >
130 |    <div class="label-value">,57</div>
131 |     <div class="star-container">
132 |       <div class="star custom-icon" ng-repeat="i in [1,2,3,4,5] track by $index"  ng-click="data.rating = $index">
133 |         <i class="star-empty fa fa-star-o"></i>
134 |         <i class="star-half fa fa-star-half-o"></i>
135 |         <i class="star-filled fa fa-star"></i>
136 |       </div>
137 |     </div>
138 |   </div>
139 |
140 | 141 |
142 | Source: src/kss-documentation/themes.kss.scss, line 1 143 |
144 | 145 |
146 |
147 |
148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /docs/item-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Css Star Rating 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Css Star Rating

21 |
22 | 147 |
148 |
149 |
150 | 151 |
152 | 153 |
154 |

155 | 156 | 157 | 1 158 | 159 | #permalink 160 | 161 | 162 | Star Rating 163 | 164 |

165 | 166 | 167 |
168 |

A beautiful ui component for displaying rating values of up to 5 stars with css only. 169 | Options are:

170 |
    171 |
  • Value
    • 172 |
  • Half star
    • 173 |
  • Size
    • 174 |
  • Spread
    • 175 |
  • Static Color
    • 176 |
  • Label Position
    • 177 |
  • Animation Speed
    • 178 |
  • Disabled
    • 179 |
180 | 181 |
182 | 183 | 184 |
185 | 186 | 187 |
188 | Source: src/kss-documentation/styleguide.kss.scss, line 4 189 |
190 | 191 |
192 |
193 |
194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | -------------------------------------------------------------------------------- /docs/kss-assets/WARNING.txt: -------------------------------------------------------------------------------- 1 | WARNING: This folder is deleted and re-recreated each time the style guide is 2 | built. Do NOT put your own files in this folder. 3 | -------------------------------------------------------------------------------- /docs/kss-assets/github-fork--black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/kss-assets/github-fork--black.png -------------------------------------------------------------------------------- /docs/kss-assets/kss-fullscreen.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | // Set the configuration values on object creation. 5 | // - idPrefix: The string that uniquely prefixes the ID of all elements that 6 | // can receive the fullscreen focus. 7 | // - bodyClass: The class that is set on the body element when the fullscreen 8 | // mode is toggled on. 9 | // - elementClass: the class that is set on the element that is receiving the 10 | // fullscreen focus. 11 | var KssFullScreen = function (config) { 12 | this.idPrefix = config.idPrefix || 'kss-fullscreen-'; 13 | this.bodyClass = config.bodyClass || 'kss-fullscreen-mode'; 14 | this.elementClass = config.elementClass || 'is-fullscreen'; 15 | 16 | this.init(); 17 | }; 18 | 19 | // Initialize the page to see if the fullscreen mode should be immediately 20 | // turned on. 21 | KssFullScreen.prototype.init = function () { 22 | // Check the location hash to see if it matches the idPrefix. 23 | if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) { 24 | this.setFocus(window.location.hash.slice(1 + this.idPrefix.length)); 25 | } 26 | 27 | var self = this; 28 | // Initialize all fullscreen toggle buttons. 29 | var elementList = document.querySelectorAll('a[data-kss-fullscreen]'); 30 | for (var button of elementList) { 31 | // Get the section reference from the data attribute. 32 | button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen); 33 | } 34 | }; 35 | 36 | // Activation function that takes the ID of the element that will receive 37 | // fullscreen focus. 38 | KssFullScreen.prototype.setFocus = function (id) { 39 | var el; 40 | 41 | // Find the element with the given ID and start fullscreen mode. 42 | if (el = document.getElementById(id)) { 43 | el.classList.toggle('is-fullscreen'); 44 | document.body.classList.toggle('kss-fullscreen-mode'); 45 | 46 | // When enabling the focus mode, change the location hash. 47 | if (el.classList.contains('is-fullscreen')) { 48 | window.location.hash = '#' + this.idPrefix + id; 49 | // Don't follow the link location. 50 | return false; 51 | } 52 | } 53 | 54 | return true; 55 | }; 56 | 57 | // Export to DOM global space. 58 | window.KssFullScreen = KssFullScreen; 59 | 60 | })(window, document); 61 | -------------------------------------------------------------------------------- /docs/kss-assets/kss-guides.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | var KssGuides = function (config) { 5 | this.bodyClass = config.bodyClass || 'kss-guides-mode'; 6 | 7 | this.init(); 8 | }; 9 | 10 | KssGuides.prototype.init = function () { 11 | var self = this; 12 | // Initialize all guides toggle buttons. 13 | var elementList = document.querySelectorAll('a[data-kss-guides]'); 14 | for (var button of elementList) { 15 | button.onclick = self.showGuides.bind(self); 16 | } 17 | }; 18 | 19 | // Toggle the guides mode. 20 | KssGuides.prototype.showGuides = function () { 21 | document.getElementsByTagName('body')[0].classList.toggle(this.bodyClass); 22 | }; 23 | 24 | // Export to DOM global space. 25 | window.KssGuides = KssGuides; 26 | 27 | })(window, document); 28 | -------------------------------------------------------------------------------- /docs/kss-assets/kss-markup.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | var KssMarkup = function (config) { 5 | this.bodyClass = config.bodyClass || 'kss-markup-mode'; 6 | this.detailsClass = config.detailsClass || 'kss-markup'; 7 | 8 | this.init(); 9 | }; 10 | 11 | KssMarkup.prototype.init = function () { 12 | var self = this; 13 | // Initialize all markup toggle buttons. 14 | var elementList = document.querySelectorAll('a[data-kss-markup]'); 15 | for (var button of elementList) { 16 | button.onclick = self.showGuides.bind(self); 17 | }; 18 | }; 19 | 20 | // Activation function that takes the ID of the element that will receive 21 | // fullscreen focus. 22 | KssMarkup.prototype.showGuides = function () { 23 | var body = document.getElementsByTagName('body')[0], 24 | enabled = body.classList.contains(this.bodyClass); 25 | 26 | var elementList = document.querySelectorAll('.' + this.detailsClass); 27 | for (var el of elementList) { 28 | if (enabled) { 29 | el.removeAttribute('open'); 30 | } else { 31 | el.setAttribute('open', ''); 32 | } 33 | } 34 | 35 | // Toggle the markup mode. 36 | body.classList.toggle(this.bodyClass); 37 | }; 38 | 39 | // Export to DOM global space. 40 | window.KssMarkup = KssMarkup; 41 | 42 | })(window, document); 43 | -------------------------------------------------------------------------------- /docs/kss-assets/kss.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var KssStateGenerator; 3 | 4 | KssStateGenerator = (function() { 5 | var pseudo_selectors; 6 | 7 | pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child']; 8 | 9 | function KssStateGenerator() { 10 | var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2; 11 | pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g"); 12 | try { 13 | _ref = document.styleSheets; 14 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 15 | stylesheet = _ref[_i]; 16 | if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) { 17 | idxs = []; 18 | _ref2 = stylesheet.cssRules; 19 | for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) { 20 | rule = _ref2[idx]; 21 | if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) { 22 | replaceRule = function(matched, stuff) { 23 | return matched.replace(/\:/g, '.pseudo-class-'); 24 | }; 25 | this.insertRule(rule.cssText.replace(pseudos, replaceRule)); 26 | } 27 | pseudos.lastIndex = 0; 28 | } 29 | } 30 | } 31 | } catch (_error) {} 32 | } 33 | 34 | KssStateGenerator.prototype.insertRule = function(rule) { 35 | var headEl, styleEl; 36 | headEl = document.getElementsByTagName('head')[0]; 37 | styleEl = document.createElement('style'); 38 | styleEl.type = 'text/css'; 39 | if (styleEl.styleSheet) { 40 | styleEl.styleSheet.cssText = rule; 41 | } else { 42 | styleEl.appendChild(document.createTextNode(rule)); 43 | } 44 | return headEl.appendChild(styleEl); 45 | }; 46 | 47 | return KssStateGenerator; 48 | 49 | })(); 50 | 51 | new KssStateGenerator; 52 | 53 | }).call(this); 54 | -------------------------------------------------------------------------------- /docs/kss-assets/noise-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/kss-assets/noise-low.png -------------------------------------------------------------------------------- /docs/kss-assets/sample-inline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/kss-assets/sample-inline.png -------------------------------------------------------------------------------- /docs/kss-assets/sample-inline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/kss-assets/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/docs/kss-assets/sample.png -------------------------------------------------------------------------------- /docs/kss-assets/sample.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/kss-assets/scrollspy.js: -------------------------------------------------------------------------------- 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o scrollTop); 116 | }; 117 | 118 | ScrollSpy.prototype.markNav = function (elems) { 119 | var navItems = this.nav, 120 | isAlreadyMarked = false; 121 | 122 | for (var i = 0, max = navItems.length; i < max; i++) { 123 | if (elems.viewStatusList[i] && !isAlreadyMarked) { 124 | isAlreadyMarked = true; 125 | navItems[i].classList.add(this.className); 126 | } else { 127 | navItems[i].classList.remove(this.className); 128 | } 129 | } 130 | }; 131 | 132 | 133 | module.exports = ScrollSpy; 134 | 135 | },{}],2:[function(require,module,exports){ 136 | (function (global){ 137 | /** 138 | * ScrollSpy 139 | * 140 | */ 141 | 142 | var ScrollSpy = require('./modules/scrollspy'); 143 | 144 | global.ScrollSpy = module.exports = ScrollSpy; 145 | 146 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 147 | },{"./modules/scrollspy":1}]},{},[2]); 148 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * gulpfile.js 3 | * 4 | * This file requires following npm modules: 5 | * `` 6 | * npm install gulp gulp-load-plugins wrench gulp-task-listing --save-dev 7 | * `` 8 | * 9 | * The gulp tasks are separated into several files in the chore/gulp/tasks directory 10 | * 11 | * When starting gulp this file will load all files located in ./gulp/tasks. 12 | * To use the files located in inactive just drag them into the tasks folder and install their required modules 13 | * 14 | */ 15 | 16 | 'use strict'; 17 | 18 | const gulp = require('gulp'); 19 | 20 | const wrench = require('wrench'); 21 | const $ = require('gulp-load-plugins')(); 22 | 23 | /** 24 | * This will load all js or coffee files in the gulp directory 25 | * in order to load all gulp tasks 26 | */ 27 | wrench.readdirSyncRecursive('./chore/gulp/tasks').filter(function(file) { 28 | return (/\.(js|coffee)$/i).test(file); 29 | }).map(function(file) { 30 | require('./chore/gulp/tasks/' + file); 31 | }); 32 | 33 | /** 34 | * List the available gulp tasks 35 | */ 36 | gulp.task('help', $.taskListing); 37 | gulp.task('default', gulp.series('help')); 38 | -------------------------------------------------------------------------------- /kss-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title" : "Css Star Rating", 3 | "source": [ 4 | "src/kss-documentation" 5 | ], 6 | "destination": "docs/", 7 | "css": [ 8 | "assets/css/star-rating.css", 9 | "assets/css/fontawesome-all.min.css" 10 | ], 11 | "js": [] 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-star-rating", 3 | "version": "1.3.1", 4 | "license": "MIT", 5 | "keywords": [ 6 | "Rating", 7 | "Stars", 8 | "Star Rating", 9 | "Star-Rating", 10 | "Starrating", 11 | "5-Star Rating", 12 | "Icon", 13 | "Iconfont", 14 | "Fonticons", 15 | "Fontawesome", 16 | "Ionicons", 17 | "SVG", 18 | "CSS3", 19 | "Pure CSS", 20 | "CSS only", 21 | "SCSS", 22 | "Flexbox" 23 | ], 24 | "description": "Css Star Rating is pure css component written in scss.", 25 | "author": "Michael Hladky", 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/BioPhoton/css-star-rating.git" 29 | }, 30 | "contributors": [ 31 | { 32 | "name": "Michael Hladky", 33 | "email": "michael@hladky.at" 34 | } 35 | ], 36 | "bugs": { 37 | "url": "https://github.com/BioPhoton/css-star-rating/issues" 38 | }, 39 | "homepage": "https://github.com/BioPhoton/css-star-rating#readme", 40 | "main": "dist/css/star-rating.css", 41 | "devDependencies": { 42 | "angularic-ionicon": "^1.1.0", 43 | "conventional-changelog": "^3.1.25", 44 | "copyfiles": "^2.4.1", 45 | "css-loader": "^6.7.1", 46 | "del": "^6.0.0", 47 | "extendify": "^1.0.0", 48 | "file-loader": "^6.2.0", 49 | "font-awesome": "^4.7.0", 50 | "gulp": "^4.0.2", 51 | "gulp-autoprefixer": "^8.0.0", 52 | "gulp-bump": "^3.2.0", 53 | "gulp-concat": "^2.6.1", 54 | "gulp-cssnano": "^2.1.3", 55 | "gulp-load-plugins": "^2.0.7", 56 | "gulp-notify": "^4.0.0", 57 | "gulp-plumber": "^1.2.1", 58 | "gulp-print": "^5.0.2", 59 | "gulp-rename": "^2.0.0", 60 | "gulp-sass": "^5.1.0", 61 | "gulp-task-listing": "^1.1.1", 62 | "ionicons": "^6.0.1", 63 | "kss": "^3.0.1", 64 | "merge-stream": "^2.0.0", 65 | "node-sass": "^7.0.1", 66 | "prettier": "^2.6.0", 67 | "sass": "^1.51.0", 68 | "sass-loader": "^12.6.0", 69 | "sc5-styleguide": "^2.2.0", 70 | "style-loader": "^3.3.1", 71 | "webpack": "^5.0.0", 72 | "wrench": "^1.5.9", 73 | "yargs": "^17.4.0" 74 | }, 75 | "scripts": { 76 | "INLINE_DOCUMENTATION": "To release the project: bump version, run changelog, run project:build, check travis,", 77 | "project:build": "npm run clean:dist && npm run build && npm run styleguide", 78 | "build": "npm run build:css && npm run build:assets", 79 | "build:css": "gulp project:build", 80 | "build:assets": "copyfiles -u 0 README.md ./dist && copyfiles -u 0 ./package.json ./dist && copyfiles -u 0 ./LICENSE ./dist && copyfiles -u 2 ./src/assets/* ./dist/images", 81 | "styleguide": "npm run styleguide:assets && npm run styleguide:build", 82 | "styleguide:assets": "copyfiles -u 2 ./dist/css/* ./docs/assets/css && copyfiles -u 2 ./dist/images/* ./docs/assets/images && copyfiles -u 2 ./docs-assets/fontawesome/fontawesome-all.min.css ./docs/assets/css && copyfiles -u 3 ./docs-assets/fontawesome/webfonts/* ./docs/assets/webfonts", 83 | "styleguide:build": "kss --config ./kss-config.json", 84 | "version:bump": "gulp version:bump", 85 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", 86 | "release:github": "conventional-github-releaser", 87 | "release:npm": "npm publish ./dist", 88 | "clean:dist": "rimraf dist" 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /resources/images/browsers/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/browsers/chrome.png -------------------------------------------------------------------------------- /resources/images/browsers/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/browsers/firefox.png -------------------------------------------------------------------------------- /resources/images/browsers/ie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/browsers/ie.png -------------------------------------------------------------------------------- /resources/images/browsers/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/browsers/opera.png -------------------------------------------------------------------------------- /resources/images/browsers/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/browsers/safari.png -------------------------------------------------------------------------------- /resources/images/example-usage.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/example-usage.PNG -------------------------------------------------------------------------------- /resources/images/example-usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/example-usage.gif -------------------------------------------------------------------------------- /resources/images/family/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/family/angular.png -------------------------------------------------------------------------------- /resources/images/family/angular1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/family/angular1.png -------------------------------------------------------------------------------- /resources/images/family/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/family/css3.png -------------------------------------------------------------------------------- /resources/images/prop-animation_speed-immediately.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-animation_speed-immediately.gif -------------------------------------------------------------------------------- /resources/images/prop-animation_speed-noticeable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-animation_speed-noticeable.gif -------------------------------------------------------------------------------- /resources/images/prop-animation_speed-slow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-animation_speed-slow.gif -------------------------------------------------------------------------------- /resources/images/prop-color-default.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-color-default.PNG -------------------------------------------------------------------------------- /resources/images/prop-color-negative.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-color-negative.PNG -------------------------------------------------------------------------------- /resources/images/prop-color-ok.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-color-ok.PNG -------------------------------------------------------------------------------- /resources/images/prop-color-positive.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-color-positive.PNG -------------------------------------------------------------------------------- /resources/images/prop-direction-ltr.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-direction-ltr.PNG -------------------------------------------------------------------------------- /resources/images/prop-direction-rtl.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-direction-rtl.PNG -------------------------------------------------------------------------------- /resources/images/prop-disabled-false.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-disabled-false.PNG -------------------------------------------------------------------------------- /resources/images/prop-disabled-true.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-disabled-true.PNG -------------------------------------------------------------------------------- /resources/images/prop-get_color-function.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-get_color-function.PNG -------------------------------------------------------------------------------- /resources/images/prop-label-bottom.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-label-bottom.PNG -------------------------------------------------------------------------------- /resources/images/prop-label-hidden.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-label-hidden.PNG -------------------------------------------------------------------------------- /resources/images/prop-label-left.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-label-left.PNG -------------------------------------------------------------------------------- /resources/images/prop-label-right.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-label-right.PNG -------------------------------------------------------------------------------- /resources/images/prop-label-top.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-label-top.PNG -------------------------------------------------------------------------------- /resources/images/prop-label-visible.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-label-visible.PNG -------------------------------------------------------------------------------- /resources/images/prop-num_of_stars.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-num_of_stars.PNG -------------------------------------------------------------------------------- /resources/images/prop-show_half_stars-false.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-show_half_stars-false.PNG -------------------------------------------------------------------------------- /resources/images/prop-show_half_stars-true.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-show_half_stars-true.PNG -------------------------------------------------------------------------------- /resources/images/prop-size-large.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-size-large.PNG -------------------------------------------------------------------------------- /resources/images/prop-size-medium.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-size-medium.PNG -------------------------------------------------------------------------------- /resources/images/prop-size-small.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-size-small.PNG -------------------------------------------------------------------------------- /resources/images/prop-space-around.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-space-around.PNG -------------------------------------------------------------------------------- /resources/images/prop-space-between.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-space-between.PNG -------------------------------------------------------------------------------- /resources/images/prop-space-default.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-space-default.PNG -------------------------------------------------------------------------------- /resources/images/prop-text.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-text.PNG -------------------------------------------------------------------------------- /resources/images/prop-type-custom_icon.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-type-custom_icon.PNG -------------------------------------------------------------------------------- /resources/images/prop-type-icon.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-type-icon.PNG -------------------------------------------------------------------------------- /resources/images/prop-type-svg.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-type-svg.PNG -------------------------------------------------------------------------------- /resources/images/prop-value.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/prop-value.PNG -------------------------------------------------------------------------------- /resources/images/star-color-default.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-color-default.PNG -------------------------------------------------------------------------------- /resources/images/star-color-middle.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-color-middle.PNG -------------------------------------------------------------------------------- /resources/images/star-color-negative.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-color-negative.PNG -------------------------------------------------------------------------------- /resources/images/star-color-positive.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-color-positive.PNG -------------------------------------------------------------------------------- /resources/images/star-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-empty.png -------------------------------------------------------------------------------- /resources/images/star-fill-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-fill-empty.png -------------------------------------------------------------------------------- /resources/images/star-fill-filled.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-fill-filled.PNG -------------------------------------------------------------------------------- /resources/images/star-fill-half.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-fill-half.PNG -------------------------------------------------------------------------------- /resources/images/star-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-filled.png -------------------------------------------------------------------------------- /resources/images/star-icon-character.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-icon-character.PNG -------------------------------------------------------------------------------- /resources/images/star-icon-svg.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-icon-svg.PNG -------------------------------------------------------------------------------- /resources/images/star-rating-options.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-rating-options.PNG -------------------------------------------------------------------------------- /resources/images/star-size-larg.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-size-larg.PNG -------------------------------------------------------------------------------- /resources/images/star-size-medium.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-size-medium.PNG -------------------------------------------------------------------------------- /resources/images/star-size-small.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BioPhoton/css-star-rating/8cc986ab61233a090f1c69c8499973931b655767/resources/images/star-size-small.PNG -------------------------------------------------------------------------------- /src/assets/star-rating.icons.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | star-empty 7 | 9 | 10 | 11 | 12 | star-half 13 | 15 | 16 | 17 | 18 | star-filled 19 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/kss-documentation/homepage.md: -------------------------------------------------------------------------------- 1 | # Css Star Rating ⭐⭐⭐⭐⭐ 2 | #### ⭐ Css Star Rating is a pure css star rating plugin based on best practice UX/UI methods. ⭐ 3 | 4 | ![License](https://img.shields.io/npm/l/css-star-rating.svg) 5 | ![Bower Version](https://img.shields.io/bower/v/css-star-rating.svg) 6 | [![NPM Version](https://img.shields.io/npm/v/css-star-rating.svg)](https://www.npmjs.com/package/css-star-rating) 7 | [![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/BioPhoton/css-star-rating) 8 | 9 | [![Build Status](https://travis-ci.org/BioPhoton/css-star-rating.svg?branch=dev)](https://travis-ci.org/BioPhoton/css-star-rating) 10 | [![npm](https://img.shields.io/npm/dt/css-star-rating.svg)](https://www.npmjs.com/package/css-star-rating) 11 | 12 | [![Package Quality](http://npm.packagequality.com/badge/css-star-rating.png)](http://packagequality.com/#?package=css-star-rating) 13 | 14 | Css Star Rating is written in scss and fully customizable over variables. 15 | Easily compose your own rating component over a rich set of css modifiers for any kind of UI state. 16 | 17 | ## Features 18 | 19 | - [x] **Written in scss** 20 | - [x] **Customizable over variables** 21 | - [x] **Flexbox layout** 22 | - [x] **SVG icons** 23 | - [x] **Icon fonts like fontawesome, ionicon...** 24 | - [x] **Display rating over css class** 25 | - [x] **Different Numbers of stars** 26 | - [x] **Color of stars depend on rating** 27 | - [x] **Half stars** 28 | - [x] **Sizes** 29 | - [x] **Star alignments** 30 | - [x] **Static colors** 31 | - [x] **Disabled mode** 32 | - [x] **Star types** 33 | - [x] **Label** 34 | - [x] **Label positions** 35 | - [x] **Animations** 36 | - [x] **Directions** 37 | - [x] **Themes** 38 | 39 | ## Related Projects 40 | 41 | - [Ionic1 Star Rating](https://github.com/BioPhoton/ionic1-star-rating) 42 | - [Angular1 Star Rating](https://github.com/BioPhoton/angular1-star-rating) 43 | - [Angular Star Rating](https://github.com/BioPhoton/angular-star-rating) 44 | 45 | # **Find more Details here: [Css Star Rating](https://github.com/BioPhoton/css-star-rating)** 46 | -------------------------------------------------------------------------------- /src/kss-documentation/styleguide.kss.scss: -------------------------------------------------------------------------------- 1 | @import "elements.sc5"; 2 | @import "modifiers.sc5"; 3 | 4 | /* 5 | Star Rating 6 | 7 | A beautiful ui component for displaying rating values of up to 5 stars with css only. 8 | Options are: 9 | - Value 10 | - Half star 11 | - Size 12 | - Spread 13 | - Static Color 14 | - Label Position 15 | - Animation Speed 16 | - Disabled 17 | 18 | Styleguide 1 19 | */ -------------------------------------------------------------------------------- /src/kss-documentation/themes.kss.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Themes 3 | 4 | Different themes for the star rating component. Easy to use as single modifier. 5 | Some themes expect a special background to look good. 6 | For demo-purpos the theme-[name]-gb classes are created. 7 | 8 | .theme-rolling-stars - animate stars 9 | .theme-kununu - kununu theme 10 | .theme-google-places - google-places theme 11 | 12 | markup: 13 |
14 |
{{data.rating}},57
15 |
16 |
17 | 18 | 19 | 20 |
21 |
22 |
23 | 24 | sg-wrapper: 25 |
26 | 27 |
28 | 29 | Styleguide 1.3 30 | */ 31 | 32 | /* 33 | Star types position test 34 | 35 | All icons should lay exactly on top of each other. 36 | 37 | markup: 38 |
39 | 40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 | Styleguide 1.3.1 61 | */ 62 | -------------------------------------------------------------------------------- /src/scss/_elements.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*CSS Star Rating Elements 4 | =================================================================*/ 5 | 6 | /*HELPER*/ 7 | 8 | .center-all{ 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | 15 | /* 16 | Star element 17 | ==================================================================*/ 18 | .star { 19 | position: relative; 20 | width: $default-star-width; 21 | height: $default-star-height; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | 26 | svg, i { 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | 31 | position: absolute; 32 | top: 0; 33 | left: 0; 34 | width: 100%; 35 | height: 100%; 36 | 37 | font-style: normal; 38 | 39 | &.star-half, 40 | &.star-filled { 41 | opacity: 0; 42 | } 43 | } 44 | 45 | i { 46 | top:1px; 47 | display: none; 48 | } 49 | 50 | &.icon i { 51 | font-size: $default-star-font-size; 52 | line-height: $default-star-line-height; 53 | 54 | &.star-empty:before { 55 | content: $default-star-character-empty; 56 | } 57 | &.star-half:before { 58 | content: $default-star-character-half; 59 | } 60 | &.star-filled:before { 61 | content: $default-star-character-filled; 62 | } 63 | } 64 | 65 | &.custom-icon i { 66 | font-size: 18px; 67 | line-height: 18px; 68 | } 69 | 70 | 71 | /* 72 | Fill states 73 | ==================================================================*/ 74 | &.empty { 75 | svg, i { 76 | &.star-half, 77 | &.star-filled { 78 | opacity: 0; 79 | } 80 | &.star-empty { 81 | opacity: 1; 82 | } 83 | } 84 | } 85 | &.half { 86 | svg, i { 87 | &.star-filled, 88 | &.star-empty { 89 | opacity: 0; 90 | } 91 | &.star-half { 92 | opacity: 1; 93 | } 94 | } 95 | } 96 | &.filled { 97 | svg, i { 98 | &.star-empty, 99 | &.star-filled { 100 | opacity: 0; 101 | } 102 | &.star-filled { 103 | opacity: 1; 104 | } 105 | } 106 | } 107 | 108 | /* 109 | Colors 110 | ==================================================================*/ 111 | &.default { 112 | svg { 113 | fill: $color-default-rating; 114 | } 115 | i { 116 | color: $color-default-rating; 117 | } 118 | } 119 | &.negative { 120 | svg { 121 | fill: $color-negative-rating; 122 | } 123 | i { 124 | color: $color-negative-rating; 125 | } 126 | } 127 | &.ok { 128 | svg { 129 | fill: $color-ok-rating; 130 | } 131 | i { 132 | color: $color-ok-rating; 133 | } 134 | } 135 | &.positive { 136 | svg { 137 | fill: $color-positive-rating; 138 | } 139 | i { 140 | color: $color-positive-rating; 141 | } 142 | } 143 | 144 | /* 145 | Icon Types 146 | ==================================================================*/ 147 | &.svg { 148 | i { 149 | display: none; 150 | } 151 | svg { 152 | display: flex; 153 | } 154 | } 155 | 156 | &.custom-icon, 157 | &.icon { 158 | svg { 159 | display: none; 160 | } 161 | i { 162 | display: flex; 163 | } 164 | } 165 | 166 | /* 167 | Star Size 168 | ===================================================================*/ 169 | &.small { 170 | width: $small-star-width; 171 | height: $small-star-height; 172 | i { 173 | font-size: $small-star-font-size; 174 | line-height: $small-star-line-height; 175 | } 176 | } 177 | 178 | &.medium { 179 | width: $default-star-width; 180 | height: $default-star-width; 181 | i { 182 | font-size: $default-star-font-size; 183 | line-height: $default-star-line-height; 184 | } 185 | } 186 | 187 | &.large { 188 | width: $large-star-width; 189 | height: $large-star-height; 190 | i { 191 | font-size: $large-star-font-size; 192 | line-height: $large-star-line-height; 193 | } 194 | } 195 | 196 | /* 197 | Disabled 198 | =================================================*/ 199 | &.disabled { 200 | opacity: $disabled-opacity; 201 | } 202 | 203 | /* 204 | Direction 205 | =================================================*/ 206 | &.direction-rtl { 207 | svg, i { 208 | &.star-half { 209 | transform: scale(-1, 1); 210 | } 211 | } 212 | } 213 | &.direction-ltr { 214 | svg, i { 215 | &.star-half { 216 | transform: scale(1, 1); 217 | } 218 | } 219 | } 220 | 221 | } 222 | 223 | /* 224 | Label Element 225 | ===================================================================*/ 226 | 227 | .label-value { 228 | font-size: $default-label-font-size; 229 | line-height: $default-label-line-height; 230 | 231 | /* 232 | Sizes 233 | =================================================================*/ 234 | &.small { 235 | font-size: $small-label-font-size; 236 | line-height: $small-label-line-height; 237 | } 238 | 239 | &.medium { 240 | font-size: $default-label-font-size; 241 | line-height: $default-star-line-height; 242 | } 243 | 244 | &.large { 245 | font-size: $large-label-font-size; 246 | line-height: $large-star-line-height; 247 | } 248 | 249 | /* 250 | Disabled 251 | =================================================*/ 252 | &.disabled { 253 | opacity: $disabled-opacity; 254 | } 255 | 256 | } 257 | 258 | /* 259 | Star Container 260 | ==================================================================*/ 261 | .star-container { 262 | display: flex; 263 | align-items: center; 264 | flex: 0 0 auto; 265 | justify-content: center; 266 | 267 | margin-left: $default-stars-label-margin; 268 | margin-right: $default-stars-label-margin; 269 | 270 | transition: all $default-animation-speed $default-animation-type; 271 | 272 | + .star { 273 | margin-left: $default-stars-label-margin; 274 | } 275 | 276 | .star { 277 | @extend .default; 278 | transition: all $default-animation-speed $default-animation-type; 279 | svg, i { 280 | transition: all $default-animation-speed $default-animation-type; 281 | } 282 | } 283 | 284 | svg { 285 | z-index: 2; 286 | } 287 | i { 288 | z-index: 1; 289 | } 290 | 291 | /* 292 | Direction 293 | ===================================================*/ 294 | &.direction-rtl { 295 | direction: rtl; 296 | .star { 297 | @extend .direction-rtl; 298 | } 299 | } 300 | &.direction-ltr { 301 | direction: ltr; 302 | .star { 303 | @extend .direction-ltr; 304 | } 305 | } 306 | 307 | /* 308 | Space 309 | ======================================================*/ 310 | &.space-no { 311 | flex: 1 1 auto; 312 | justify-content: center; 313 | } 314 | 315 | &.space-between { 316 | flex: 1 1 auto; 317 | justify-content: space-between; 318 | } 319 | 320 | &.space-around { 321 | flex: 1 1 auto; 322 | justify-content: space-around; 323 | } 324 | 325 | } 326 | -------------------------------------------------------------------------------- /src/scss/_modifiers.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* 4 | Rating Component 5 | ========================================================================= */ 6 | .rating { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | margin-bottom: $rating-margin-bottom; 11 | 12 | /*Rating Value 13 | ====================================================*/ 14 | @for $i from $minRatingValue through $maxNumOfStars { 15 | &.value-#{$i} { 16 | 17 | .star-container { 18 | .star:nth-child(-n+#{$i}) { 19 | @extend .filled; 20 | } 21 | 22 | .star { 23 | @if $i <=2 { 24 | svg { 25 | fill: $color-negative-rating; 26 | } 27 | 28 | i { 29 | color: $color-negative-rating; 30 | } 31 | } 32 | 33 | @if $i==3 { 34 | svg { 35 | fill: $color-ok-rating; 36 | } 37 | 38 | i { 39 | color: $color-ok-rating; 40 | } 41 | } 42 | 43 | @if $i>=4 { 44 | svg { 45 | fill: $color-positive-rating; 46 | } 47 | 48 | i { 49 | color: $color-positive-rating; 50 | } 51 | } 52 | } 53 | } 54 | } 55 | } 56 | 57 | //Handling values > $maxNumOfStars up to $maxNumOfStars*2 (i know it's ugly. Maybe i will skip this completely) 58 | @for $i from $maxNumOfStars through $maxNumOfStars*2 { 59 | &.value-#{$i} { 60 | 61 | .star-container { 62 | .star:nth-child(-n+#{$i}) { 63 | @extend .filled 64 | } 65 | 66 | .star { 67 | @extend .positive; 68 | } 69 | } 70 | } 71 | } 72 | 73 | /*Hover states 74 | ====================================================*/ 75 | 76 | //- all stars before and the hover star should be filled 77 | //- filled stars after the hover star should be empty 78 | 79 | &.hover:hover { 80 | 81 | @for $i from $minRatingValue through $maxNumOfStars { 82 | 83 | &.value-#{$i}.half, 84 | &.hover-#{$i} { 85 | .star-container { 86 | .star { 87 | 88 | &.star-half, 89 | &.star-filled { 90 | opacity: 0; 91 | } 92 | 93 | &.star-empty { 94 | opacity: 1; 95 | } 96 | } 97 | } 98 | } 99 | 100 | &.hover-#{$i} { 101 | .star-container { 102 | 103 | .star:nth-child(-n+#{$i}) { 104 | 105 | svg, 106 | i { 107 | 108 | &.star-empty, 109 | &.star-filled { 110 | opacity: 0; 111 | } 112 | 113 | &.star-filled { 114 | opacity: 1; 115 | } 116 | } 117 | } 118 | 119 | .star { 120 | @if $i <=2 { 121 | svg { 122 | fill: $color-negative-rating; 123 | } 124 | 125 | i { 126 | color: $color-negative-rating; 127 | } 128 | } 129 | 130 | @if $i==3 { 131 | svg { 132 | fill: $color-ok-rating; 133 | } 134 | 135 | i { 136 | color: $color-ok-rating; 137 | } 138 | } 139 | 140 | @if $i>=4 { 141 | svg { 142 | fill: $color-positive-rating; 143 | } 144 | 145 | i { 146 | color: $color-positive-rating; 147 | } 148 | } 149 | } 150 | } 151 | } 152 | } 153 | 154 | } 155 | 156 | /*Half stars 157 | ====================================================*/ 158 | 159 | //if we hals ratings > 0 && < 1 we color the first star 160 | &.value-0.half { 161 | .star { 162 | @extend .negative; 163 | } 164 | 165 | .star:nth-child(1) { 166 | @extend .half; 167 | } 168 | } 169 | 170 | 171 | 172 | // TODO: find better solution for half star rating 173 | @for $i from $minRatingValue through $maxNumOfStars { 174 | &.value-#{$i}.half { 175 | 176 | .star-container { 177 | @if ($i < $maxNumOfStars) { 178 | .star:nth-child(#{$i+1}) { 179 | 180 | svg, 181 | i { 182 | 183 | &.star-filled, 184 | &.star-empty { 185 | opacity: 0; 186 | } 187 | 188 | &.star-half { 189 | opacity: 1; 190 | } 191 | } 192 | } 193 | } 194 | } 195 | } 196 | } 197 | 198 | /*Label Visible 199 | ====================================================*/ 200 | &.label-hidden { 201 | .label-value { 202 | display: none; 203 | } 204 | } 205 | 206 | &.label-visible { 207 | display: flex; 208 | } 209 | 210 | /*Label Position 211 | ====================================================*/ 212 | &.label-top { 213 | flex-direction: column; 214 | 215 | .label-value { 216 | +.star-container { 217 | margin-left: 0; 218 | margin-right: 0; 219 | margin-top: $default-stars-label-margin; 220 | } 221 | } 222 | } 223 | 224 | &.label-left .label-value { 225 | flex: 0 0 auto; 226 | 227 | +.star-container { 228 | margin-left: $default-stars-label-margin; 229 | margin-right: 0; 230 | } 231 | } 232 | 233 | &.label-right { 234 | flex-direction: row-reverse; 235 | 236 | .label-value { 237 | +.star-container { 238 | margin-left: 0; 239 | margin-right: $default-stars-label-margin; 240 | } 241 | } 242 | } 243 | 244 | &.label-bottom { 245 | flex-direction: column-reverse; 246 | 247 | .label-value { 248 | +.star-container { 249 | margin-left: 0; 250 | margin-right: 0; 251 | margin-bottom: $default-stars-label-margin; 252 | } 253 | } 254 | } 255 | 256 | /* 257 | Direction 258 | ===================================================*/ 259 | &.direction-rtl { 260 | direction: rtl; 261 | 262 | .star-container { 263 | @extend .direction-rtl; 264 | 265 | .star { 266 | @extend .direction-rtl; 267 | } 268 | } 269 | } 270 | 271 | &.direction-ltr { 272 | direction: ltr; 273 | } 274 | 275 | /* Star Type 276 | ====================================================*/ 277 | &.star-icon { 278 | @extend .icon; 279 | } 280 | 281 | &.star-custom-icon { 282 | @extend .custom-icon; 283 | } 284 | 285 | &.star-svg { 286 | @extend .svg; 287 | } 288 | 289 | /* Sizes 290 | ==========================================================*/ 291 | &.small { 292 | .star { 293 | @extend .small; 294 | } 295 | 296 | .label-value { 297 | @extend .small; 298 | } 299 | } 300 | 301 | &.medium { 302 | .star { 303 | @extend .medium; 304 | } 305 | 306 | .label-value { 307 | @extend .medium; 308 | } 309 | } 310 | 311 | &.large { 312 | .star { 313 | @extend .large; 314 | } 315 | 316 | .label-value { 317 | @extend .large; 318 | } 319 | } 320 | 321 | /* Space 322 | ====================================================*/ 323 | &.space-no { 324 | .star-container { 325 | @extend .space-no; 326 | } 327 | } 328 | 329 | &.space-between { 330 | .star-container { 331 | @extend .space-between; 332 | } 333 | } 334 | 335 | &.space-around { 336 | .star-container { 337 | @extend .space-around; 338 | } 339 | } 340 | 341 | /* Static Color 342 | ====================================================*/ 343 | &.color-default { 344 | .star-container { 345 | .star { 346 | svg { 347 | fill: $color-default-rating !important; 348 | } 349 | 350 | i { 351 | color: $color-default-rating !important; 352 | } 353 | } 354 | } 355 | } 356 | 357 | &.color-ok { 358 | .star-container { 359 | .star { 360 | svg { 361 | fill: $color-ok-rating !important; 362 | } 363 | 364 | i { 365 | color: $color-ok-rating !important; 366 | } 367 | } 368 | } 369 | } 370 | 371 | &.color-positive { 372 | .star-container { 373 | .star { 374 | svg { 375 | fill: $color-positive-rating !important; 376 | } 377 | 378 | i { 379 | color: $color-positive-rating !important; 380 | } 381 | } 382 | } 383 | } 384 | 385 | &.color-negative { 386 | .star-container { 387 | .star { 388 | svg { 389 | fill: $color-negative-rating !important; 390 | } 391 | 392 | i { 393 | color: $color-negative-rating !important; 394 | } 395 | } 396 | } 397 | } 398 | 399 | /*Disabled 400 | ====================================================*/ 401 | &.disabled { 402 | .label-value { 403 | @extend .disabled; 404 | } 405 | 406 | .star-container { 407 | .star { 408 | @extend .disabled; 409 | } 410 | } 411 | } 412 | 413 | /*AnimationSpeed 414 | ====================================================*/ 415 | &.immediately .star-container { 416 | transition: all $immediately-animation-type; 417 | 418 | .star { 419 | transition: $immediately-animation-type; 420 | 421 | svg, 422 | i { 423 | transition: $immediately-animation-type; 424 | } 425 | } 426 | } 427 | 428 | &.noticeable { 429 | .star-container { 430 | transition: all $default-animation-speed $default-animation-type; 431 | 432 | .star { 433 | transition: all $default-animation-speed $default-animation-type; 434 | 435 | svg, 436 | i { 437 | transition: all $default-animation-speed $default-animation-type; 438 | } 439 | } 440 | } 441 | } 442 | 443 | &.slow { 444 | .star-container { 445 | transition: all $slow-animation-speed $default-animation-type; 446 | 447 | .star { 448 | transition: all $slow-animation-speed $default-animation-type; 449 | 450 | svg, 451 | i { 452 | transition: all $slow-animation-speed $default-animation-type; 453 | } 454 | } 455 | } 456 | } 457 | 458 | } 459 | -------------------------------------------------------------------------------- /src/scss/_themes.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*theme modifiers 4 | ====================================================*/ 5 | 6 | .rating { 7 | 8 | &.theme-kununu { 9 | $kununu-color-white: #fff !default; 10 | $kununu-color-lightgray: #f8f8f8 !default; 11 | $kununu-color-gray: #e9ecec !default; 12 | $kununu-color-blue: #2286dc !default; 13 | $kununu-color-darkblue: #2f3940 !default; 14 | $kununu-color-green: #99c613 !default; 15 | 16 | flex-direction: column; 17 | width: 78px; 18 | 19 | .label-value, 20 | .star-container { 21 | width: 100%; 22 | } 23 | 24 | .label-value { 25 | 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | 30 | border-radius: 6px 6px 0 0; 31 | height: 50px; 32 | border: 1px solid $kununu-color-gray; 33 | border-bottom: 0px; 34 | font-size: 18px; 35 | font-weight: bold; 36 | color: $kununu-color-darkblue; 37 | letter-spacing: -1px; 38 | 39 | background-color: $kununu-color-lightgray; 40 | } 41 | .star-container { 42 | border-radius: 0 0 6px 6px; 43 | padding: 2px 0 4px 0; 44 | margin-left: 0px; 45 | margin-right: 0px; 46 | 47 | justify-content: center; 48 | background-color: $kununu-color-green; 49 | 50 | border: 1px solid $kununu-color-green; 51 | border-bottom: 0px; 52 | 53 | .star { 54 | height: 11px; 55 | width: 11px; 56 | @extend .custom-icon; 57 | 58 | i { 59 | font-size: 11px; 60 | color: $kununu-color-white; 61 | text-align: center; 62 | } 63 | } 64 | } 65 | 66 | } 67 | 68 | &.theme-google-places { 69 | $google_places-color-default: #e1e1e1 !default; 70 | $google_places-color-red: #e7711b !default; 71 | 72 | .label-value { 73 | color: $google_places-color-red; 74 | font-family: arial, sans-serif; 75 | font-size: 13px; 76 | line-height: 15px; 77 | } 78 | 79 | .star-container { 80 | width: 65px; 81 | margin-left: 2px; 82 | 83 | .star { 84 | 85 | i { 86 | font-size: 17px; 87 | color: $google_places-color-red !important; 88 | &.star-empty { 89 | opacity: 1 !important; 90 | color: $google_places-color-default !important; 91 | &:before { 92 | content: $default-star-character-filled; 93 | } 94 | } 95 | &.star-half { 96 | width: 7px; 97 | overflow: hidden; 98 | &:before { 99 | content: $default-star-character-half; 100 | } 101 | } 102 | &.star-filled:before { 103 | content: $default-star-character-filled; 104 | } 105 | } 106 | } 107 | 108 | } 109 | 110 | } 111 | 112 | &.theme-classic { 113 | 114 | } 115 | 116 | &.theme-material { 117 | 118 | } 119 | 120 | &.theme-rolling-stars { 121 | 122 | .star-container { 123 | .star { 124 | transition: transform 1s; 125 | transform: rotate(0deg); 126 | } 127 | } 128 | 129 | @for $i from $minRatingValue through $maxNumOfStars { 130 | &.value-#{$i} { 131 | .star-container { 132 | .star:nth-child(-n+#{$i}) { 133 | transition: transform 1s; 134 | transform: rotate(360deg); 135 | } 136 | } 137 | } 138 | } 139 | 140 | &.value-0.half { 141 | .star:nth-child(1) { 142 | transition: transform 1s; 143 | transform: rotate(360deg); 144 | } 145 | } 146 | 147 | @for $i from $minRatingValue through $maxNumOfStars { 148 | &.value-#{$i}.half { 149 | .star-container { 150 | @if ($i < $maxNumOfStars) { 151 | .star:nth-child(#{$i+1}) { 152 | transition: transform 1s; 153 | transform: rotate(360deg); 154 | } 155 | } 156 | } 157 | } 158 | } 159 | 160 | } 161 | 162 | } 163 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @use "sass:math"; 3 | 4 | /*VARIABLES 5 | ====================================================*/ 6 | 7 | /*Range*/ 8 | $minRatingValue: 1 !default; 9 | $maxNumOfStars: 6 !default; 10 | $numFractions: 3 !default; 11 | $fractionSize: math.div($maxNumOfStars, $numFractions); 12 | 13 | /*Spacing*/ 14 | $rating-margin-bottom: 5px; 15 | $default-stars-label-margin: 5px; 16 | 17 | /*Colors*/ 18 | $color-negative-rating: #f03c56 !default; 19 | $color-ok-rating: #ffc058 !default; 20 | $color-positive-rating: #7ed321 !default; 21 | $color-default-rating: #999 !default; 22 | 23 | /*Sizes*/ 24 | 25 | //default 26 | $default-star-width: 20px !default; 27 | $default-star-height: 20px !default; 28 | 29 | $default-star-font-size: 25px !default; 30 | $default-star-line-height: 25px !default; 31 | 32 | $default-label-font-size: 18px !default; 33 | $default-label-line-height: 18px !default; 34 | 35 | //small 36 | $small-label-font-size: 9.5px !default; 37 | $small-label-line-height: 9.5px !default; 38 | 39 | $small-star-width: 10px !default; 40 | $small-star-height: 9, 41 | 5px !default; 42 | 43 | $small-star-font-size: 11px !default; 44 | $small-star-line-height: 10px !default; 45 | 46 | //medium 47 | $medium-star-width: $default-star-width; 48 | $medium-star-height: $default-star-height; 49 | 50 | $medium-label-font-size: $default-star-width; 51 | $medium-label-line-height: $default-star-line-height; 52 | 53 | $medium-star-font-size: $default-label-font-size; 54 | $medium-star-line-height: $default-label-line-height; 55 | 56 | //large 57 | $large-star-width: 35px !default; 58 | $large-star-height: 33.3px !default; 59 | 60 | $large-star-font-size: 36px !default; 61 | $large-star-line-height: 35px !default; 62 | 63 | $large-label-font-size: 28px !default; 64 | $large-star-line-height: 28px !default; 65 | 66 | /*Animation*/ 67 | $default-animation-speed: 0.3s; 68 | $slow-animation-speed: 0.8s; 69 | $immediately-animation-type: none; 70 | $default-animation-type: ease; 71 | 72 | /*Icons*/ 73 | $default-star-character-empty: "\2606"; 74 | $default-star-character-half: "\2605"; 75 | $default-star-character-filled: "\2605"; 76 | 77 | /*Disabled*/ 78 | $disabled-opacity: 0.5; 79 | -------------------------------------------------------------------------------- /src/scss/star-rating.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "variables"; 4 | @import "elements"; 5 | @import "modifiers"; 6 | @import "themes"; --------------------------------------------------------------------------------