From ba94603db24a47a6ed0de1238bfe29e5b2a335c5 Mon Sep 17 00:00:00 2001 From: Michael Hladky Date: Sun, 27 Nov 2016 16:49:16 +0100 Subject: [PATCH] fix(styleguide): start decouple kss docs from scss --- chore/gulp/tasks/sc5-styleguide.js | 3 +- dist/css/star-rating.css | 733 +++++++++++++++++++++++++++++ dist/scss/_sc5.doc.scss | 547 +++++++++++++++++++++ dist/scss/star-rating.scss | 549 +-------------------- src/scss/_sc5.doc.scss | 547 +++++++++++++++++++++ src/scss/star-rating.scss | 549 +-------------------- 6 files changed, 1830 insertions(+), 1098 deletions(-) create mode 100644 dist/css/star-rating.css create mode 100644 dist/scss/_sc5.doc.scss create mode 100644 src/scss/_sc5.doc.scss diff --git a/chore/gulp/tasks/sc5-styleguide.js b/chore/gulp/tasks/sc5-styleguide.js index aae73cc..ed0a7e7 100644 --- a/chore/gulp/tasks/sc5-styleguide.js +++ b/chore/gulp/tasks/sc5-styleguide.js @@ -28,7 +28,6 @@ var autoprefixer = require('gulp-autoprefixer'); var config = require(path.join('..','..','chore.config')); var sc5Folder = 'sc5-styleguide'; -console.log(path.join(config.root,sc5Folder)); var defaultConfig = { srcFolder: [path.join(config.src,'**','*.scss')], generateSrc:[path.join(config.src,'**','*.scss')], @@ -101,7 +100,7 @@ gulp.task('styleguide:generate', ['styleguide:copy'], function (done) { gulp.task('styleguide:applystyles', function (done) { helper.log('Apply styles from ' + styleguideConfig.applyStylesSrc); return gulp.src(styleguideConfig.applyStylesSrc) - .pipe($.concat('app.css')) + .pipe($.concat('star-rating-stylegude.css')) //.pipe($.sass(styleguideConfig.sassOptions).on('error', $.sass.logError)) //.pipe(autoprefixer(styleguideConfig.autoprefixerOptions)) .pipe(styleguide.applyStyles()) diff --git a/dist/css/star-rating.css b/dist/css/star-rating.css new file mode 100644 index 0000000..1c9bf35 --- /dev/null +++ b/dist/css/star-rating.css @@ -0,0 +1,733 @@ +@charset "UTF-8"; +/*VARIABLES +====================================================*/ +/*Range*/ +/*Spacing*/ +/*Colors*/ +/*Sizes*/ +/*Animation*/ +/*Icons*/ +/*Disabled*/ +/*CSS Star Rating Elements +====================================================*/ +/* +Star element +==================================================================*/ +.star { + position: relative; +} + +.star svg, .star i, .star img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + font-style: normal; +} + +.star svg.star-half, .star svg.star-filled, .star i.star-half, .star i.star-filled, .star img.star-half, .star img.star-filled { + opacity: 0; +} + +/* +Star Container +==================================================================*/ +.star-container { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -moz-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.star-container svg { + z-index: 3; +} + +.star-container i { + z-index: 2; +} + +.star-container img { + z-index: 1; +} + +/*Default styles and modifier +====================================================*/ +.rating { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-bottom: 5px; + /*Rating Value + ====================================================*/ + /*Half stars*/ + /*Rating Position + ====================================================*/ + /*AnimationSpeed + ====================================================*/ + /* Star Type + ====================================================*/ + /* Sizes */ + /* Spread + ====================================================*/ + /* Static Color + ====================================================*/ + /*Disabled + ====================================================*/ +} + +.rating .star-container + .star { + margin-left: 5px; +} + +.rating.value-1 .star-container .star:nth-child(-n+1) svg.star-filled, .rating.value-1 .star-container .star:nth-child(-n+1) i.star-filled, .rating.value-1 .star-container .star:nth-child(-n+1) img.star-filled { + opacity: 1; +} + +.rating.value-1 .star-container .star svg { + fill: #f03c56; +} + +.rating.value-1 .star-container .star i { + color: #f03c56; +} + +.rating.value-1 .star-container .star img { + color: #f03c56; +} + +.rating.value-2 .star-container .star:nth-child(-n+2) svg.star-filled, .rating.value-2 .star-container .star:nth-child(-n+2) i.star-filled, .rating.value-2 .star-container .star:nth-child(-n+2) img.star-filled { + opacity: 1; +} + +.rating.value-2 .star-container .star svg { + fill: #f03c56; +} + +.rating.value-2 .star-container .star i { + color: #f03c56; +} + +.rating.value-2 .star-container .star img { + color: #f03c56; +} + +.rating.value-3 .star-container .star:nth-child(-n+3) svg.star-filled, .rating.value-3 .star-container .star:nth-child(-n+3) i.star-filled, .rating.value-3 .star-container .star:nth-child(-n+3) img.star-filled { + opacity: 1; +} + +.rating.value-3 .star-container .star svg { + fill: #ffc058; +} + +.rating.value-3 .star-container .star i { + color: #ffc058; +} + +.rating.value-3 .star-container .star img { + color: #ffc058; +} + +.rating.value-4 .star-container .star:nth-child(-n+4) svg.star-filled, .rating.value-4 .star-container .star:nth-child(-n+4) i.star-filled, .rating.value-4 .star-container .star:nth-child(-n+4) img.star-filled { + opacity: 1; +} + +.rating.value-4 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-4 .star-container .star i { + color: #7ed321; +} + +.rating.value-4 .star-container .star img { + color: #7ed321; +} + +.rating.value-5 .star-container .star:nth-child(-n+5) svg.star-filled, .rating.value-5 .star-container .star:nth-child(-n+5) i.star-filled, .rating.value-5 .star-container .star:nth-child(-n+5) img.star-filled { + opacity: 1; +} + +.rating.value-5 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-5 .star-container .star i { + color: #7ed321; +} + +.rating.value-5 .star-container .star img { + color: #7ed321; +} + +.rating.value-6 .star-container .star:nth-child(-n+6) svg.star-filled, .rating.value-6 .star-container .star:nth-child(-n+6) i.star-filled, .rating.value-6 .star-container .star:nth-child(-n+6) img.star-filled { + opacity: 1; +} + +.rating.value-6 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-6 .star-container .star i { + color: #7ed321; +} + +.rating.value-6 .star-container .star img { + color: #7ed321; +} + +.rating.value-6 .star-container .star:nth-child(-n+6) svg.star-filled, .rating.value-6 .star-container .star:nth-child(-n+6) i.star-filled, .rating.value-6 .star-container .star:nth-child(-n+6) img.star-filled { + opacity: 1; +} + +.rating.value-6 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-6 .star-container .star i { + color: #7ed321; +} + +.rating.value-6 .star-container .star img { + color: #7ed321; +} + +.rating.value-7 .star-container .star:nth-child(-n+7) svg.star-filled, .rating.value-7 .star-container .star:nth-child(-n+7) i.star-filled, .rating.value-7 .star-container .star:nth-child(-n+7) img.star-filled { + opacity: 1; +} + +.rating.value-7 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-7 .star-container .star i { + color: #7ed321; +} + +.rating.value-7 .star-container .star img { + color: #7ed321; +} + +.rating.value-8 .star-container .star:nth-child(-n+8) svg.star-filled, .rating.value-8 .star-container .star:nth-child(-n+8) i.star-filled, .rating.value-8 .star-container .star:nth-child(-n+8) img.star-filled { + opacity: 1; +} + +.rating.value-8 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-8 .star-container .star i { + color: #7ed321; +} + +.rating.value-8 .star-container .star img { + color: #7ed321; +} + +.rating.value-9 .star-container .star:nth-child(-n+9) svg.star-filled, .rating.value-9 .star-container .star:nth-child(-n+9) i.star-filled, .rating.value-9 .star-container .star:nth-child(-n+9) img.star-filled { + opacity: 1; +} + +.rating.value-9 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-9 .star-container .star i { + color: #7ed321; +} + +.rating.value-9 .star-container .star img { + color: #7ed321; +} + +.rating.value-10 .star-container .star:nth-child(-n+10) svg.star-filled, .rating.value-10 .star-container .star:nth-child(-n+10) i.star-filled, .rating.value-10 .star-container .star:nth-child(-n+10) img.star-filled { + opacity: 1; +} + +.rating.value-10 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-10 .star-container .star i { + color: #7ed321; +} + +.rating.value-10 .star-container .star img { + color: #7ed321; +} + +.rating.value-11 .star-container .star:nth-child(-n+11) svg.star-filled, .rating.value-11 .star-container .star:nth-child(-n+11) i.star-filled, .rating.value-11 .star-container .star:nth-child(-n+11) img.star-filled { + opacity: 1; +} + +.rating.value-11 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-11 .star-container .star i { + color: #7ed321; +} + +.rating.value-11 .star-container .star img { + color: #7ed321; +} + +.rating.value-12 .star-container .star:nth-child(-n+12) svg.star-filled, .rating.value-12 .star-container .star:nth-child(-n+12) i.star-filled, .rating.value-12 .star-container .star:nth-child(-n+12) img.star-filled { + opacity: 1; +} + +.rating.value-12 .star-container .star svg { + fill: #7ed321; +} + +.rating.value-12 .star-container .star i { + color: #7ed321; +} + +.rating.value-12 .star-container .star img { + color: #7ed321; +} + +.rating svg.star-half, .rating i.star-half, .rating img.star-half { + opacity: 0; +} + +.rating.value-0.half .star svg { + fill: #f03c56; +} + +.rating.value-0.half .star i { + color: #f03c56; +} + +.rating.value-0.half .star img { + color: #f03c56; +} + +.rating.value-0.half .star:nth-child(1) .star-half { + opacity: 1; +} + +.rating.value-1.half .star-container .star:nth-child(2) svg.star-half, .rating.value-1.half .star-container .star:nth-child(2) i.star-half, .rating.value-1.half .star-container .star:nth-child(2) img.star-half { + opacity: 1; +} + +.rating.value-2.half .star-container .star:nth-child(3) svg.star-half, .rating.value-2.half .star-container .star:nth-child(3) i.star-half, .rating.value-2.half .star-container .star:nth-child(3) img.star-half { + opacity: 1; +} + +.rating.value-3.half .star-container .star:nth-child(4) svg.star-half, .rating.value-3.half .star-container .star:nth-child(4) i.star-half, .rating.value-3.half .star-container .star:nth-child(4) img.star-half { + opacity: 1; +} + +.rating.value-4.half .star-container .star:nth-child(5) svg.star-half, .rating.value-4.half .star-container .star:nth-child(5) i.star-half, .rating.value-4.half .star-container .star:nth-child(5) img.star-half { + opacity: 1; +} + +.rating.value-5.half .star-container .star:nth-child(6) svg.star-half, .rating.value-5.half .star-container .star:nth-child(6) i.star-half, .rating.value-5.half .star-container .star:nth-child(6) img.star-half { + opacity: 1; +} + +.rating.label-top { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -moz-box-orient: vertical; + -moz-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.rating.label-top .label-value + .star-container { + margin-left: 0; + margin-right: 0; + margin-top: 5px; +} + +.rating .star-container { + margin-left: 5px; + margin-right: 5px; +} + +.rating.label-left .label-value { + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -moz-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.rating.label-left .label-value + .star-container { + margin-left: 5px; + margin-right: 0; +} + +.rating.label-right { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -moz-box-orient: horizontal; + -moz-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.rating.label-right .label-value + .star-container { + margin-left: 0; + margin-right: 5px; +} + +.rating.label-bottom { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-reverse; + -moz-box-orient: vertical; + -moz-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.rating.label-bottom .label-value + .star-container { + margin-left: 0; + margin-right: 0; + margin-bottom: 5px; +} + +.rating .star-container { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.rating .star-container .star { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.rating .star-container .star svg, .rating .star-container .star i, .rating .star-container .star img { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.rating.immediately .star-container { + -webkit-transition: all none; + -moz-transition: all none; + transition: all none; +} + +.rating.immediately .star-container .star { + -webkit-transition: none; + -moz-transition: none; + transition: none; +} + +.rating.immediately .star-container .star svg, .rating.immediately .star-container .star i, .rating.immediately .star-container .star img { + -webkit-transition: none; + -moz-transition: none; + transition: none; +} + +.rating.noticeable .star-container { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.rating.noticeable .star-container .star { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.rating.noticeable .star-container .star svg, .rating.noticeable .star-container .star i, .rating.noticeable .star-container .star img { + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +.rating.slow .star-container { + -webkit-transition: all 0.8s ease; + -moz-transition: all 0.8s ease; + transition: all 0.8s ease; +} + +.rating.slow .star-container .star { + -webkit-transition: all 0.8s ease; + -moz-transition: all 0.8s ease; + transition: all 0.8s ease; +} + +.rating.slow .star-container .star svg, .rating.slow .star-container .star i, .rating.slow .star-container .star img { + -webkit-transition: all 0.8s ease; + -moz-transition: all 0.8s ease; + transition: all 0.8s ease; +} + +.rating .star i.star-empty:before { + content: "☆"; +} + +.rating .star i.star-half:before { + content: ""; +} + +.rating .star i.star-filled:before { + content: "★"; +} + +.rating.star-icon .star svg { + display: none; +} + +.rating.star-icon .star img { + display: none; +} + +.rating.star-icon .star i { + display: block; +} + +.rating.star-img .star svg { + display: none; +} + +.rating.star-img .star i { + display: none; +} + +.rating.star-img .star img { + display: block; +} + +.rating.star-svg .star svg { + display: block; +} + +.rating.star-svg .star i { + display: none; +} + +.rating.star-svg .star img { + display: none; +} + +.rating.small .star { + width: 10px; + height: 9, 5px; +} + +.rating.small .star i { + font-size: 11px; + line-height: 10px; +} + +.rating.small .label-value { + font-size: 9.5px; + line-height: 9.5px; +} + +.rating .star { + width: 20px; + height: 20px; +} + +.rating .star i { + font-size: 26px; + line-height: 21px; + margin-left: -1px; +} + +.rating .label-value { + font-size: 18px; + line-height: 18px; +} + +.rating.medium .star { + width: 20px; + height: 20px; +} + +.rating.medium .star i { + font-size: 26px; + line-height: 21px; +} + +.rating.medium .label-value { + font-size: 18px; + line-height: 21px; +} + +.rating.large .star { + width: 35px; + height: 33.3px; +} + +.rating.large .star i { + font-size: 36px; + line-height: 35px; +} + +.rating.large .label-value { + font-size: 28px; + line-height: 35px; +} + +.rating .star-container { + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.rating.spread .star-container { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -moz-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -moz-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.rating.color-default .star-container .star svg { + fill: #999; +} + +.rating.color-default .star-container .star i { + color: #999; +} + +.rating.color-default .star-container .star img { + color: #f03c56; +} + +.rating .star-container .star svg { + fill: #999; +} + +.rating .star-container .star i { + color: #999; +} + +.rating .star-container .star img { + color: #999; +} + +.rating.color-negative .star-container .star svg { + fill: #f03c56; +} + +.rating.color-negative .star-container .star i { + color: #f03c56; +} + +.rating.color-negative .star-container .star img { + color: #f03c56; +} + +.rating.color-middle .star-container .star svg { + fill: #ffc058; +} + +.rating.color-middle .star-container .star i { + color: #ffc058; +} + +.rating.color-middle .star-container .star img { + color: #ffc058; +} + +.rating.color-positive .star-container .star svg { + fill: #7ed321; +} + +.rating.color-positive .star-container .star i { + color: #7ed321; +} + +.rating.color-positive .star-container .star img { + color: #7ed321; +} + +.rating.disabled .label-value { + opacity: 0.5; +} + +.rating.disabled .star-container .star { + opacity: 0.5; +} + +/*theme modifiers +====================================================*/ +.rating.theme-kununu { + background: red; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-bottom: 5px; +} + +.rating.theme-kununu .star-container { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -moz-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.rating.theme-kununu .star-container .star { + position: relative; +} diff --git a/dist/scss/_sc5.doc.scss b/dist/scss/_sc5.doc.scss new file mode 100644 index 0000000..5f7f506 --- /dev/null +++ b/dist/scss/_sc5.doc.scss @@ -0,0 +1,547 @@ +/* +Star Rating + +A beautiful ui component for displaying rating values of up to 5 stars with css only. +Options are: +- Value +- Size +- Spread +- Static Color +- Label Position +- Animation Speed +- Disabled + +(in this html is additional angular markup to make the showcase interactive) + + + markup: +
+
+
+ + + + + + +
+
+
+ + sg-wrapper: +
+ +
+ +Styleguide 1.0 +*/ + +/* +Value + +Different styles for different rating values. +Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. + +default - 0 rating +.value-0 - 0 rating +.value-1 - 1 rating +.value-2 - 2 rating +.value-3 - 3 rating +.value-4 - 4 rating +.value-5 - 5 rating + +markup: +
+
+
+ + + + + + + + + +
+
+
+ + +Styleguide 1.1 +*/ + +/* +Value Fallback + +The different value modifiers are defined over the $maxNumOfStars. Values greater then this value get are handled here. +This is mostly useful for people hwo generate this html dynamically + +.value-4 - 4 rating +.value-5 - 5 rating +.value-6 - 6 rating +.value-7 - 7 rating +.value-8 - 8 rating + +markup: +
+
+
+ + + + + + + + + +
+
+
+ +Styleguide 1.1.1 +*/ + +/* +Half-Stars + +Different styles for different rating values. +Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. + +default - rating with full stars +.half - rating with half stars on the end + +markup: +
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+ + +Styleguide 1.2 +*/ + +/* +Size + +Different sizes of the stars and the label. +Additional to the default size medium there are more sizes, small and large. + + +default - Default size +.small - Small size +.medium - Medium size +.large - Large size + +markup: +
+
+
+ + + + + + +
+
+
+ +Styleguide 1.3 +*/ + +/* +Spread + +Different spread options + +default - No spread +.spread - Stars are spread to the entire container width + +markup: +
+
+
+ + + + + + +
+
+
+ +Styleguide 1.4 +*/ + +/* +Static Color + +Overriding default colors of ratings to display the color independent of the rating. + +default - No static color +.color-default - Stars are always colored default +.color-positive - Stars are always colored positive +.color-middle - Stars are always colored middle +.color-negative - Stars are always colored negative + +markup: +
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+ + +Styleguide 1.5 +*/ + +/* +Label Position + +Displays the rating value as text label. + + default - Value displayed on the left side +.label-top - Value displayed on the top +.label-right - Value displayed on the right side +.label-bottom - Value displayed on the bottom +.label-left - Value displayed on the left side + + +markup: +
+
0
+
+
+ + + + + + +
+
+
+
+
(bad)
+
+
+ + + + + + +
+
+
+
+
3.1
+
+
+ + + + + + +
+
+
+
+
Good
+
+
+ + + + + + +
+
+
+ +Styleguide 1.6 +*/ + +/* + Disabled + + Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible + + default - Stars are un usual style + .disabled - Stars are grayed out, no interaction is possible + + markup: +
+
+
+ + + + + + +
+
+
+
+
(bad)
+
+
+ + + + + + +
+
+
+
+
3.1
+
+
+ + + + + + +
+
+
+
+
Good
+
+
+ + + + + + +
+
+
+ + Styleguide 1.7 + */ +/* + Animation Speed + + By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition. + + default - Transition runs in noticeable speed + .immediately - No Transition + .noticeable - Transition runs in noticeable speed + .slow - Transition runs very slow + + markup: +
+
+
+ + + + + + +
+
+
+ + Styleguide 1.8 + */ + +/* + Star Type + + The stars can be generated oft of three different types. characters, svg's of any icon font + + default - The default star type is svg + .star-img - Star-Image form the shipped images + .star-icon - Star-Characters for default browser font + .star-svg - Star-Vectors form the shipped svg images + + markup: +
+
+
+ + + + + + + + + + + + + + + +
+
+
+ + Styleguide 1.9 +*/ \ No newline at end of file diff --git a/dist/scss/star-rating.scss b/dist/scss/star-rating.scss index 1bcaa25..0328a22 100644 --- a/dist/scss/star-rating.scss +++ b/dist/scss/star-rating.scss @@ -4,551 +4,4 @@ @import "elements"; @import "modifiers"; @import "themes"; - -/* -Star Rating - -A beautiful ui component for displaying rating values of up to 5 stars with css only. -Options are: -- Value -- Size -- Spread -- Static Color -- Label Position -- Animation Speed -- Disabled - -(in this html is additional angular markup to make the showcase interactive) - - - markup: -
-
-
- - - - - - -
-
-
- - sg-wrapper: -
- -
- -Styleguide 1.0 -*/ - -/* -Value - -Different styles for different rating values. -Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. - -default - 0 rating -.value-0 - 0 rating -.value-1 - 1 rating -.value-2 - 2 rating -.value-3 - 3 rating -.value-4 - 4 rating -.value-5 - 5 rating - -markup: -
-
-
- - - - - - - - - -
-
-
- - -Styleguide 1.1 -*/ - -/* -Value Fallback - -The different value modifiers are defined over the $maxNumOfStars. Values greater then this value get are handled here. -This is mostly useful for people hwo generate this html dynamically - -.value-4 - 4 rating -.value-5 - 5 rating -.value-6 - 6 rating -.value-7 - 7 rating -.value-8 - 8 rating - -markup: -
-
-
- - - - - - - - - -
-
-
- -Styleguide 1.1.1 -*/ - -/* -Half-Stars - -Different styles for different rating values. -Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. - -default - rating with full stars -.half - rating with half stars on the end - -markup: -
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
- - -Styleguide 1.2 -*/ - -/* -Size - -Different sizes of the stars and the label. -Additional to the default size medium there are more sizes, small and large. - - -default - Default size -.small - Small size -.medium - Medium size -.large - Large size - -markup: -
-
-
- - - - - - -
-
-
- -Styleguide 1.3 -*/ - -/* -Spread - -Different spread options - -default - No spread -.spread - Stars are spread to the entire container width - -markup: -
-
-
- - - - - - -
-
-
- -Styleguide 1.4 -*/ - -/* -Static Color - -Overriding default colors of ratings to display the color independent of the rating. - -default - No static color -.color-default - Stars are always colored default -.color-positive - Stars are always colored positive -.color-middle - Stars are always colored middle -.color-negative - Stars are always colored negative - -markup: -
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
- - -Styleguide 1.5 -*/ - -/* -Label Position - -Displays the rating value as text label. - - default - Value displayed on the left side -.label-top - Value displayed on the top -.label-right - Value displayed on the right side -.label-bottom - Value displayed on the bottom -.label-left - Value displayed on the left side - - -markup: -
-
0
-
-
- - - - - - -
-
-
-
-
(bad)
-
-
- - - - - - -
-
-
-
-
3.1
-
-
- - - - - - -
-
-
-
-
Good
-
-
- - - - - - -
-
-
- -Styleguide 1.6 -*/ - -/* - Disabled - - Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible - - default - Stars are un usual style - .disabled - Stars are grayed out, no interaction is possible - - markup: -
-
-
- - - - - - -
-
-
-
-
(bad)
-
-
- - - - - - -
-
-
-
-
3.1
-
-
- - - - - - -
-
-
-
-
Good
-
-
- - - - - - -
-
-
- - Styleguide 1.7 - */ -/* - Animation Speed - - By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition. - - default - Transition runs in noticeable speed - .immediately - No Transition - .noticeable - Transition runs in noticeable speed - .slow - Transition runs very slow - - markup: -
-
-
- - - - - - -
-
-
- - Styleguide 1.8 - */ - -/* - Star Type - - The stars can be generated oft of three different types. characters, svg's of any icon font - - default - The default star type is svg - .star-img - Star-Image form the shipped images - .star-icon - Star-Characters for default browser font - .star-svg - Star-Vectors form the shipped svg images - - markup: -
-
-
- - - - - - - - - - - - - - - -
-
-
- - Styleguide 1.9 -*/ \ No newline at end of file +//@import "sc5.doc"; \ No newline at end of file diff --git a/src/scss/_sc5.doc.scss b/src/scss/_sc5.doc.scss new file mode 100644 index 0000000..5f7f506 --- /dev/null +++ b/src/scss/_sc5.doc.scss @@ -0,0 +1,547 @@ +/* +Star Rating + +A beautiful ui component for displaying rating values of up to 5 stars with css only. +Options are: +- Value +- Size +- Spread +- Static Color +- Label Position +- Animation Speed +- Disabled + +(in this html is additional angular markup to make the showcase interactive) + + + markup: +
+
+
+ + + + + + +
+
+
+ + sg-wrapper: +
+ +
+ +Styleguide 1.0 +*/ + +/* +Value + +Different styles for different rating values. +Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. + +default - 0 rating +.value-0 - 0 rating +.value-1 - 1 rating +.value-2 - 2 rating +.value-3 - 3 rating +.value-4 - 4 rating +.value-5 - 5 rating + +markup: +
+
+
+ + + + + + + + + +
+
+
+ + +Styleguide 1.1 +*/ + +/* +Value Fallback + +The different value modifiers are defined over the $maxNumOfStars. Values greater then this value get are handled here. +This is mostly useful for people hwo generate this html dynamically + +.value-4 - 4 rating +.value-5 - 5 rating +.value-6 - 6 rating +.value-7 - 7 rating +.value-8 - 8 rating + +markup: +
+
+
+ + + + + + + + + +
+
+
+ +Styleguide 1.1.1 +*/ + +/* +Half-Stars + +Different styles for different rating values. +Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. + +default - rating with full stars +.half - rating with half stars on the end + +markup: +
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+ + +Styleguide 1.2 +*/ + +/* +Size + +Different sizes of the stars and the label. +Additional to the default size medium there are more sizes, small and large. + + +default - Default size +.small - Small size +.medium - Medium size +.large - Large size + +markup: +
+
+
+ + + + + + +
+
+
+ +Styleguide 1.3 +*/ + +/* +Spread + +Different spread options + +default - No spread +.spread - Stars are spread to the entire container width + +markup: +
+
+
+ + + + + + +
+
+
+ +Styleguide 1.4 +*/ + +/* +Static Color + +Overriding default colors of ratings to display the color independent of the rating. + +default - No static color +.color-default - Stars are always colored default +.color-positive - Stars are always colored positive +.color-middle - Stars are always colored middle +.color-negative - Stars are always colored negative + +markup: +
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+ + +Styleguide 1.5 +*/ + +/* +Label Position + +Displays the rating value as text label. + + default - Value displayed on the left side +.label-top - Value displayed on the top +.label-right - Value displayed on the right side +.label-bottom - Value displayed on the bottom +.label-left - Value displayed on the left side + + +markup: +
+
0
+
+
+ + + + + + +
+
+
+
+
(bad)
+
+
+ + + + + + +
+
+
+
+
3.1
+
+
+ + + + + + +
+
+
+
+
Good
+
+
+ + + + + + +
+
+
+ +Styleguide 1.6 +*/ + +/* + Disabled + + Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible + + default - Stars are un usual style + .disabled - Stars are grayed out, no interaction is possible + + markup: +
+
+
+ + + + + + +
+
+
+
+
(bad)
+
+
+ + + + + + +
+
+
+
+
3.1
+
+
+ + + + + + +
+
+
+
+
Good
+
+
+ + + + + + +
+
+
+ + Styleguide 1.7 + */ +/* + Animation Speed + + By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition. + + default - Transition runs in noticeable speed + .immediately - No Transition + .noticeable - Transition runs in noticeable speed + .slow - Transition runs very slow + + markup: +
+
+
+ + + + + + +
+
+
+ + Styleguide 1.8 + */ + +/* + Star Type + + The stars can be generated oft of three different types. characters, svg's of any icon font + + default - The default star type is svg + .star-img - Star-Image form the shipped images + .star-icon - Star-Characters for default browser font + .star-svg - Star-Vectors form the shipped svg images + + markup: +
+
+
+ + + + + + + + + + + + + + + +
+
+
+ + Styleguide 1.9 +*/ \ No newline at end of file diff --git a/src/scss/star-rating.scss b/src/scss/star-rating.scss index 1bcaa25..0328a22 100644 --- a/src/scss/star-rating.scss +++ b/src/scss/star-rating.scss @@ -4,551 +4,4 @@ @import "elements"; @import "modifiers"; @import "themes"; - -/* -Star Rating - -A beautiful ui component for displaying rating values of up to 5 stars with css only. -Options are: -- Value -- Size -- Spread -- Static Color -- Label Position -- Animation Speed -- Disabled - -(in this html is additional angular markup to make the showcase interactive) - - - markup: -
-
-
- - - - - - -
-
-
- - sg-wrapper: -
- -
- -Styleguide 1.0 -*/ - -/* -Value - -Different styles for different rating values. -Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. - -default - 0 rating -.value-0 - 0 rating -.value-1 - 1 rating -.value-2 - 2 rating -.value-3 - 3 rating -.value-4 - 4 rating -.value-5 - 5 rating - -markup: -
-
-
- - - - - - - - - -
-
-
- - -Styleguide 1.1 -*/ - -/* -Value Fallback - -The different value modifiers are defined over the $maxNumOfStars. Values greater then this value get are handled here. -This is mostly useful for people hwo generate this html dynamically - -.value-4 - 4 rating -.value-5 - 5 rating -.value-6 - 6 rating -.value-7 - 7 rating -.value-8 - 8 rating - -markup: -
-
-
- - - - - - - - - -
-
-
- -Styleguide 1.1.1 -*/ - -/* -Half-Stars - -Different styles for different rating values. -Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. - -default - rating with full stars -.half - rating with half stars on the end - -markup: -
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - - - - - - -
-
-
- - -Styleguide 1.2 -*/ - -/* -Size - -Different sizes of the stars and the label. -Additional to the default size medium there are more sizes, small and large. - - -default - Default size -.small - Small size -.medium - Medium size -.large - Large size - -markup: -
-
-
- - - - - - -
-
-
- -Styleguide 1.3 -*/ - -/* -Spread - -Different spread options - -default - No spread -.spread - Stars are spread to the entire container width - -markup: -
-
-
- - - - - - -
-
-
- -Styleguide 1.4 -*/ - -/* -Static Color - -Overriding default colors of ratings to display the color independent of the rating. - -default - No static color -.color-default - Stars are always colored default -.color-positive - Stars are always colored positive -.color-middle - Stars are always colored middle -.color-negative - Stars are always colored negative - -markup: -
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
- - -Styleguide 1.5 -*/ - -/* -Label Position - -Displays the rating value as text label. - - default - Value displayed on the left side -.label-top - Value displayed on the top -.label-right - Value displayed on the right side -.label-bottom - Value displayed on the bottom -.label-left - Value displayed on the left side - - -markup: -
-
0
-
-
- - - - - - -
-
-
-
-
(bad)
-
-
- - - - - - -
-
-
-
-
3.1
-
-
- - - - - - -
-
-
-
-
Good
-
-
- - - - - - -
-
-
- -Styleguide 1.6 -*/ - -/* - Disabled - - Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible - - default - Stars are un usual style - .disabled - Stars are grayed out, no interaction is possible - - markup: -
-
-
- - - - - - -
-
-
-
-
(bad)
-
-
- - - - - - -
-
-
-
-
3.1
-
-
- - - - - - -
-
-
-
-
Good
-
-
- - - - - - -
-
-
- - Styleguide 1.7 - */ -/* - Animation Speed - - By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition. - - default - Transition runs in noticeable speed - .immediately - No Transition - .noticeable - Transition runs in noticeable speed - .slow - Transition runs very slow - - markup: -
-
-
- - - - - - -
-
-
- - Styleguide 1.8 - */ - -/* - Star Type - - The stars can be generated oft of three different types. characters, svg's of any icon font - - default - The default star type is svg - .star-img - Star-Image form the shipped images - .star-icon - Star-Characters for default browser font - .star-svg - Star-Vectors form the shipped svg images - - markup: -
-
-
- - - - - - - - - - - - - - - -
-
-
- - Styleguide 1.9 -*/ \ No newline at end of file +//@import "sc5.doc"; \ No newline at end of file