feat(modifier): implemebted star space and label visibility #22, #17

src/sc5-styleguide/elements.sc5.scss

@@ -374,13 +374,13 @@ Styleguide 1.2.2.1
 */
 
 /*
-Container stars spread
+Container stars space
 
 The spacing between stars.
 
-none             - stars center im horizontal center.
-.spread          - stars take all available space to position.
-
+none             - stars position at horizontal center.
+.space-between   - stars take all available space to position. Space is only between the stars.
+.space-around    - stars take all available space to position. Space is only around the stars.
 
 markup:
 <div class="star-container {$modifiers}">

src/sc5-styleguide/modifiers.sc5.scss

@@ -257,12 +257,13 @@ Styleguide 1.1.3
 */
 
 /*
-Spread
+Space
 
-Different spread options
+Different space options
 
-default                  - No spread
-.spread                  - Stars are spread to the entire container width
+default          - stars position at horizontal center.
+.space-between   - stars take all available space to position. Space is only between the stars.
+.space-around    - stars take all available space to position. Space is only around the stars.
 
 markup:
 <div class="rating value-4 {$modifiers}">
@@ -289,7 +290,7 @@ Overriding default colors of ratings to display the color independent of the rat
 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-ok            - Stars are always colored middle
 .color-negative          - Stars are always colored negative
 
 markup:
@@ -624,4 +625,31 @@ Styleguide 1.1.6
   </div>
 
    Styleguide 1.1.10
-*/
+*/
+
+/*
+Label
+
+Label hidden or not
+
+default          - stars position at horizontal center.
+.label-hidden     - stars take all available space to position. Space is only between the stars.
+.label-visible    - stars take all available space to position. Space is only around the stars.
+
+markup:
+<div class="rating value-4 {$modifiers}">
+    <div class="label-value">3.5</div>
+    <div class="star-container">
+        <div class="star" ng-repeat="i in [1,2,3,4,5]">
+            <svg class="star-empty">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
+            </svg>
+            <svg class="star-filled">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
+            </svg>
+        </div>
+    </div>
+</div>
+
+Styleguide 1.1.11
+*/

src/scss/_variables.scss

@@ -15,7 +15,7 @@ $default-stars-label-margin: 5px;
 
 /*Colors*/
 $color-negative-rating: #f03c56 !default;
-$color-middle-rating: #ffc058 !default;
+$color-ok-rating: #ffc058 !default;
 $color-positive-rating: #7ed321 !default;
 $color-default-rating: #999 !default;