From 8f25a1d681e8ed8272b8e1e60b435c648a6fb225 Mon Sep 17 00:00:00 2001 From: Michael Hladky Date: Sun, 27 Nov 2016 16:15:13 +0100 Subject: [PATCH] feat(setup dist): setup initial dist folder --- dist/css/star-rating.min.css | 1 + dist/scss/_elements.scss | 48 +++ dist/scss/_modifiers.scss | 489 +++++++++++++++++++++++++++++++ dist/scss/_themes.scss | 25 ++ dist/scss/_variables.scss | 76 +++++ dist/scss/star-rating.scss | 554 +++++++++++++++++++++++++++++++++++ 6 files changed, 1193 insertions(+) create mode 100644 dist/css/star-rating.min.css create mode 100644 dist/scss/_elements.scss create mode 100644 dist/scss/_modifiers.scss create mode 100644 dist/scss/_themes.scss create mode 100644 dist/scss/_variables.scss create mode 100644 dist/scss/star-rating.scss diff --git a/dist/css/star-rating.min.css b/dist/css/star-rating.min.css new file mode 100644 index 0000000..c9a5f33 --- /dev/null +++ b/dist/css/star-rating.min.css @@ -0,0 +1 @@ +@charset "UTF-8";.star{position:relative}.star i,.star img,.star svg{position:absolute;top:0;left:0;width:100%;height:100%;display:block;font-style:normal}.star i.star-filled,.star i.star-half,.star img.star-filled,.star img.star-half,.star svg.star-filled,.star svg.star-half{opacity:0}.star-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-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}.rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:5px}.rating .star-container+.star{margin-left:5px}.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,.rating.value-1 .star-container .star:nth-child(-n+1) svg.star-filled{opacity:1}.rating.value-1 .star-container .star svg{fill:#f03c56}.rating.value-1 .star-container .star i,.rating.value-1 .star-container .star img{color:#f03c56}.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,.rating.value-2 .star-container .star:nth-child(-n+2) svg.star-filled{opacity:1}.rating.value-2 .star-container .star svg{fill:#f03c56}.rating.value-2 .star-container .star i,.rating.value-2 .star-container .star img{color:#f03c56}.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,.rating.value-3 .star-container .star:nth-child(-n+3) svg.star-filled{opacity:1}.rating.value-3 .star-container .star svg{fill:#ffc058}.rating.value-3 .star-container .star i,.rating.value-3 .star-container .star img{color:#ffc058}.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,.rating.value-4 .star-container .star:nth-child(-n+4) svg.star-filled{opacity:1}.rating.value-4 .star-container .star svg{fill:#7ed321}.rating.value-4 .star-container .star i,.rating.value-4 .star-container .star img{color:#7ed321}.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,.rating.value-5 .star-container .star:nth-child(-n+5) svg.star-filled{opacity:1}.rating.value-5 .star-container .star svg{fill:#7ed321}.rating.value-5 .star-container .star i,.rating.value-5 .star-container .star img{color:#7ed321}.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,.rating.value-6 .star-container .star:nth-child(-n+6) svg.star-filled{opacity:1}.rating.value-6 .star-container .star svg{fill:#7ed321}.rating.value-6 .star-container .star i,.rating.value-6 .star-container .star img{color:#7ed321}.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,.rating.value-7 .star-container .star:nth-child(-n+7) svg.star-filled{opacity:1}.rating.value-7 .star-container .star svg{fill:#7ed321}.rating.value-7 .star-container .star i,.rating.value-7 .star-container .star img{color:#7ed321}.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,.rating.value-8 .star-container .star:nth-child(-n+8) svg.star-filled{opacity:1}.rating.value-8 .star-container .star svg{fill:#7ed321}.rating.value-8 .star-container .star i,.rating.value-8 .star-container .star img{color:#7ed321}.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,.rating.value-9 .star-container .star:nth-child(-n+9) svg.star-filled{opacity:1}.rating.value-9 .star-container .star svg{fill:#7ed321}.rating.value-9 .star-container .star i,.rating.value-9 .star-container .star img{color:#7ed321}.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,.rating.value-10 .star-container .star:nth-child(-n+10) svg.star-filled{opacity:1}.rating.value-10 .star-container .star svg{fill:#7ed321}.rating.value-10 .star-container .star i,.rating.value-10 .star-container .star img{color:#7ed321}.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,.rating.value-11 .star-container .star:nth-child(-n+11) svg.star-filled{opacity:1}.rating.value-11 .star-container .star svg{fill:#7ed321}.rating.value-11 .star-container .star i,.rating.value-11 .star-container .star img{color:#7ed321}.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,.rating.value-12 .star-container .star:nth-child(-n+12) svg.star-filled{opacity:1}.rating.value-12 .star-container .star svg{fill:#7ed321}.rating.value-12 .star-container .star i,.rating.value-12 .star-container .star img{color:#7ed321}.rating i.star-half,.rating img.star-half,.rating svg.star-half{opacity:0}.rating.value-0.half .star svg{fill:#f03c56}.rating.value-0.half .star i,.rating.value-0.half .star img{color:#f03c56}.rating.value-0.half .star:nth-child(1) .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,.rating.value-1.half .star-container .star:nth-child(2) 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,.rating.value-2.half .star-container .star:nth-child(3) 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,.rating.value-3.half .star-container .star:nth-child(4) 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,.rating.value-4.half .star-container .star:nth-child(5) 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,.rating.value-5.half .star-container .star:nth-child(6) svg.star-half{opacity:1}.rating.label-top{-webkit-box-orient:vertical;-webkit-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;-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;-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;-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,.rating .star-container .star,.rating .star-container .star i,.rating .star-container .star img,.rating .star-container .star svg{-webkit-transition:all .3s ease;transition:all .3s ease}.rating.immediately .star-container{-webkit-transition:all none;transition:all none}.rating.immediately .star-container .star,.rating.immediately .star-container .star i,.rating.immediately .star-container .star img,.rating.immediately .star-container .star svg{-webkit-transition:none;transition:none}.rating.noticeable .star-container,.rating.noticeable .star-container .star,.rating.noticeable .star-container .star i,.rating.noticeable .star-container .star img,.rating.noticeable .star-container .star svg{-webkit-transition:all .3s ease;transition:all .3s ease}.rating.slow .star-container,.rating.slow .star-container .star,.rating.slow .star-container .star i,.rating.slow .star-container .star img,.rating.slow .star-container .star svg{-webkit-transition:all .8s ease;transition:all .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 img,.rating.star-icon .star svg{display:none}.rating.star-icon .star i{display:block}.rating.star-img .star i,.rating.star-img .star svg{display:none}.rating.star-img .star img,.rating.star-svg .star svg{display:block}.rating.star-svg .star i,.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;-ms-flex-pack:center;justify-content:center}.rating.spread .star-container{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-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,.rating .star-container .star img{color:#999}.rating.color-negative .star-container .star svg{fill:#f03c56}.rating.color-negative .star-container .star i,.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,.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,.rating.color-positive .star-container .star img{color:#7ed321}.rating.disabled .label-value,.rating.disabled .star-container .star{opacity:.5}.rating.theme-kununu{background:red;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:5px}.rating.theme-kununu,.rating.theme-kununu .star-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rating.theme-kununu .star-container{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.rating.theme-kununu .star-container .star{position:relative} \ No newline at end of file diff --git a/dist/scss/_elements.scss b/dist/scss/_elements.scss new file mode 100644 index 0000000..a74d9f5 --- /dev/null +++ b/dist/scss/_elements.scss @@ -0,0 +1,48 @@ +@charset "UTF-8"; + + +/*CSS Star Rating Elements +====================================================*/ + + +/* +Star element +==================================================================*/ +.star { + position: relative; + + svg, i, img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + display: block; + font-style: normal; + + &.star-half, + &.star-filled { + opacity: 0; + } + } +} + +/* +Star Container +==================================================================*/ +.star-container { + display: flex; + align-items: center; + flex: 0 0 auto; + + svg { + z-index: 3; + } + i { + z-index: 2; + } + img { + z-index: 1; + } +} diff --git a/dist/scss/_modifiers.scss b/dist/scss/_modifiers.scss new file mode 100644 index 0000000..037e9c9 --- /dev/null +++ b/dist/scss/_modifiers.scss @@ -0,0 +1,489 @@ +@charset "UTF-8"; + + +/*Default styles and modifier +====================================================*/ + +.rating { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: $rating-margin-bottom; + + .star-container { + + .star { + margin-left: $default-stars-label-margin; + } + } + + /*Rating Value + ====================================================*/ + + @for $i from $minRatingValue through $maxNumOfStars { + &.value-#{$i} { + + .star-container { + .star:nth-child(-n+#{$i}) { + svg, i, img { + &.star-filled { + opacity: 1; + } + } + } + + .star { + @if $i <= 2 { + svg { + fill: $color-negative-rating; + } + i { + color: $color-negative-rating; + } + img { + color: $color-negative-rating; + } + } + + @if $i == 3 { + svg { + fill: $color-middle-rating; + } + i { + color: $color-middle-rating; + } + img { + color: $color-middle-rating; + } + } + + @if $i >= 4 { + svg { + fill: $color-positive-rating; + } + i { + color: $color-positive-rating; + } + img { + color: $color-positive-rating; + } + } + } + } + } + } + + //Handling values > $maxNumOfStars up to $maxNumOfStars*2 (i know it's ugly) + @for $i from $maxNumOfStars through $maxNumOfStars*2 { + &.value-#{$i} { + + .star-container { + .star:nth-child(-n+#{$i}) { + svg, i, img { + &.star-filled { + opacity: 1; + } + } + } + + .star { + svg { + fill: $color-positive-rating; + } + i { + color: $color-positive-rating; + } + img { + color: $color-positive-rating; + } + + } + } + } + } + + /*Half stars*/ + + //by default half stars are hidden + svg, i, img { + &.star-half { + opacity: 0; + } + } + + //if we hals ratings > 0 && < 1 we color the first star + &.value-0.half { + .star { + svg { + fill: $color-negative-rating; + } + i { + color: $color-negative-rating; + } + img { + color: $color-negative-rating; + } + } + .star:nth-child(1) { + .star-half { + opacity: 1; + } + } + } + + @for $i from $minRatingValue through $maxNumOfStars { + &.value-#{$i}.half { + + .star-container { + @if ($i < $maxNumOfStars) { + .star:nth-child(#{$i+1}) { + svg, i, img { + &.star-half { + opacity: 1; + } + } + } + } + } + + } + } + + /*Rating Position + ====================================================*/ + + &.label-top { + flex-direction: column; + + .label-value { + + .star-container { + margin-left: 0; + margin-right: 0; + margin-top: $default-stars-label-margin; + } + } + } + + //Default + .star-container { + margin-left: $default-stars-label-margin; + margin-right: $default-stars-label-margin; + } + + &.label-left .label-value { + flex: 0 0 auto; + + + .star-container { + margin-left: $default-stars-label-margin; + margin-right: 0; + } + } + + &.label-right { + flex-direction: row-reverse; + + .label-value { + + .star-container { + margin-left: 0; + margin-right: $default-stars-label-margin; + } + } + } + + &.label-bottom { + flex-direction: column-reverse; + + .label-value { + + .star-container { + margin-left: 0; + margin-right: 0; + margin-bottom: $default-stars-label-margin; + } + } + } + + /*AnimationSpeed + ====================================================*/ + + //default + .star-container { + transition: all $default-animation-speed $default-animation-type; + .star { + transition: all $default-animation-speed $default-animation-type; + svg, i, img { + transition: all $default-animation-speed $default-animation-type; + } + } + } + + &.immediately + .star-container { + transition: all $immediately-animation-type; + .star { + transition: $immediately-animation-type; + svg, i, img { + transition: $immediately-animation-type; + } + } + } + + &.noticeable { + .star-container { + transition: all $default-animation-speed $default-animation-type; + .star { + transition: all $default-animation-speed $default-animation-type; + svg, i, img { + transition: all $default-animation-speed $default-animation-type; + } + } + } + } + + &.slow { + .star-container { + transition: all $slow-animation-speed $default-animation-type; + .star { + transition: all $slow-animation-speed $default-animation-type; + svg, i, img { + transition: all $slow-animation-speed $default-animation-type; + } + } + } + } + + /* Star Type + ====================================================*/ + + //default + .star { + i { + &.star-empty:before { + content: $default-star-character-empty; + } + &.star-half:before { + content: $default-star-character-half + } + &.star-filled:before { + content: $default-star-character-filled; + } + } + } + + &.star-icon { + .star { + svg { + display: none; + } + img { + display: none; + } + i { + display: block; + } + } + } + + &.star-img { + .star { + svg { + display: none; + } + i { + display: none; + } + img { + display: block; + } + } + } + + &.star-svg { + .star { + svg { + display: block; + } + i { + display: none; + } + img { + display: none; + } + } + } + + /* Sizes */ + &.small { + .star { + width: $small-star-width; + height: $small-star-height; + i { + font-size: $small-star-font-size; + line-height: $small-star-line-height; + } + } + + .label-value { + font-size: $small-label-font-size; + line-height: $small-label-line-height; + } + } + + //default + .star { + width: $default-star-width; + height: $default-star-height; + i { + font-size: $default-star-font-size; + line-height: $default-star-line-height; + margin-left: -1px; + } + } + + .label-value { + font-size: $default-label-font-size; + line-height: $default-label-line-height; + } + + &.medium { + .star { + width: $default-star-width; + height: $default-star-width; + i { + font-size: $default-star-font-size; + line-height: $default-star-line-height; + } + } + + .label-value { + font-size: $default-label-font-size; + line-height: $default-star-line-height; + } + } + + &.large { + .star { + width: $large-star-width; + height: $large-star-height; + i { + font-size: $large-star-font-size; + line-height: $large-star-line-height; + } + } + + .label-value { + font-size: $large-label-font-size; + line-height: $large-star-line-height; + } + } + + /* Spread + ====================================================*/ + + //default + .star-container { + justify-content: center; + } + + &.spread { + .star-container { + flex: 1 1 auto; + justify-content: space-between; + } + } + + /* Static Color + ====================================================*/ + + &.color-default { + .star-container { + .star { + svg { + fill: $color-disabled-rating; + } + i { + color: $color-disabled-rating; + } + img { + color: $color-negative-rating; + } + } + } + } + + //default + .star-container { + .star { + svg { + fill: $color-disabled-rating; + } + i { + color: $color-disabled-rating; + } + img { + color: $color-disabled-rating; + } + } + } + + &.color-negative { + .star-container { + .star { + svg { + fill: $color-negative-rating; + } + i { + color: $color-negative-rating; + } + img { + color: $color-negative-rating; + } + } + } + } + + &.color-middle { + .star-container { + .star { + svg { + fill: $color-middle-rating; + } + i { + color: $color-middle-rating; + } + img { + color: $color-middle-rating; + } + } + } + } + + &.color-positive { + .star-container { + .star { + svg { + fill: $color-positive-rating; + } + i { + color: $color-positive-rating; + } + img { + color: $color-positive-rating; + } + } + } + } + + /*Disabled + ====================================================*/ + + &.disabled { + .label-value { + opacity: $disabled-opacity; + } + .star-container { + .star { + opacity: $disabled-opacity; + } + } + } + +} \ No newline at end of file diff --git a/dist/scss/_themes.scss b/dist/scss/_themes.scss new file mode 100644 index 0000000..8653e65 --- /dev/null +++ b/dist/scss/_themes.scss @@ -0,0 +1,25 @@ +@charset "UTF-8"; + + +/*theme modifiers +====================================================*/ + +.rating { + &.theme-kununu { + background :red; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: $rating-margin-bottom; + + .star-container { + display: flex; + align-items: center; + flex: 0 0 auto; + + .star { + position: relative; + } + } + } +} \ No newline at end of file diff --git a/dist/scss/_variables.scss b/dist/scss/_variables.scss new file mode 100644 index 0000000..5bb8ea8 --- /dev/null +++ b/dist/scss/_variables.scss @@ -0,0 +1,76 @@ +@charset "UTF-8"; + +/*VARIABLES +====================================================*/ + +/*Range*/ +$minRatingValue: 1; +$maxNumOfStars: 6; +$numFractions: 3; +$fractionSize: $maxNumOfStars/$numFractions; + +/*Spacing*/ +$rating-margin-bottom: 5px; +$default-stars-label-margin: 5px; + +/*Colors*/ +$color-negative-rating: #f03c56 !default; +$color-middle-rating: #ffc058 !default; +$color-positive-rating: #7ed321 !default; +$color-disabled-rating: #999 !default; + +/*Sizes*/ + +//default +$default-star-width: 20px !default; +$default-star-height: 20px !default; + +$default-star-font-size: 26px !default; +$default-star-line-height: 21px !default; + +$default-label-font-size: 18px !default; +$default-label-line-height: 18px !default; + +//small +$small-label-font-size: 9.5px !default; +$small-label-line-height: 9.5px !default; + +$small-star-width: 10px !default; +$small-star-height: 9, 5px !default; + +$small-star-font-size: 11px !default; +$small-star-line-height: 10px !default; + +//medium +$medium-star-width: $default-star-width; +$medium-star-height: $default-star-height; + +$medium-label-font-size: $default-star-width; +$medium-label-line-height: $default-star-line-height; + +$medium-star-font-size: $default-label-font-size; +$medium-star-line-height: $default-label-line-height; + +//large +$large-star-width: 35px !default; +$large-star-height: 33.3px !default; + +$large-star-font-size: 36px !default; +$large-star-line-height: 35px !default; + +$large-label-font-size: 28px !default; +$large-star-line-height: 28px !default; + +/*Animation*/ +$default-animation-speed: 0.3s; +$slow-animation-speed: 0.8s; +$immediately-animation-type: none; +$default-animation-type: ease; + +/*Icons*/ +$default-star-character-empty: "\2606"; +$default-star-character-half: "\f089"; +$default-star-character-filled: "\2605"; + +/*Disabled*/ +$disabled-opacity: 0.5; \ No newline at end of file diff --git a/dist/scss/star-rating.scss b/dist/scss/star-rating.scss new file mode 100644 index 0000000..1bcaa25 --- /dev/null +++ b/dist/scss/star-rating.scss @@ -0,0 +1,554 @@ +@charset "UTF-8"; + +@import "variables"; +@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