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.
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 |
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 |
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 |
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 | 
5 | 
6 | [](https://www.npmjs.com/package/css-star-rating)
7 | [](https://github.com/BioPhoton/css-star-rating)
8 |
9 | [](https://travis-ci.org/BioPhoton/css-star-rating)
10 | [](https://www.npmjs.com/package/css-star-rating)
11 |
12 | [](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 |