docs(styleguide): updated docs

BioPhoton · Dec 7, 2016 · 2719f70 · 2719f70
1 parent 7f82d98
commit 2719f70
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 51 deletions.
diff --git a/src/sc5-styleguide/elements.sc5.scss b/src/sc5-styleguide/elements.sc5.scss
@@ -27,19 +27,19 @@ markup:
 <b>Star Container:</b>
 <div class="star-container direction-rtl">
   <div class="star icon filled positive large">
-    <i class="star-empty fa-heart-o"></i>
-    <i class="star-half fa fa-heartbeat"></i>
-    <i class="star-filled fa fa-heart"></i>
+    <i class="star-empty fa-circle-o"></i>
+    <i class="star-half fa fa-check-circle-o"></i>
+    <i class="star-filled fa fa-check-circle"></i>
   </div>
   <div class="star icon filled positive large">
-   <i class="star-empty fa-heart-o"></i>
-    <i class="star-half fa fa-heartbeat"></i>
-    <i class="star-filled fa fa-heart"></i>
+   <i class="star-empty fa-circle-o"></i>
+    <i class="star-half fa fa-check-circle-o"></i>
+    <i class="star-filled fa fa-check-circle"></i>
   </div>
   <div class="star icon empty positive large">
-    <i class="star-empty fa-heart-o"></i>
-    <i class="star-half fa fa-heartbeat"></i>
-    <i class="star-filled fa fa-heart"></i>
+    <i class="star-empty fa-circle-o"></i>
+    <i class="star-half fa fa-check-circle-o"></i>
+    <i class="star-filled fa fa-check-circle"></i>
   </div>
 </div>
 <b>Label:</b>
@@ -134,19 +134,10 @@ markup:
   <i class="star-half "></i>
   <i class="star-filled "></i>
 </div>
-<div class="star filled img {$modifiers}">
-  <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-half">
-      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></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>
-  <i class="star-empty "></i>
-  <i class="star-half "></i>
-  <i class="star-filled "></i>
+<div class="star filled custom-icon {$modifiers}">
+  <i class="star-empty fa fa-star-o"></i>
+  <i class="star-half  fa fa-star-half-o"></i>
+  <i class="star-filled  fa fa-star"></i>
 </div>
 
 
@@ -174,9 +165,9 @@ markup:
   <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>
-  <i class="star-empty fa fa-heart-o"></i>
-  <i class="star-half fa fa-heartbeat"></i>
-  <i class="star-filled fa fa-heart"></i>
+<i class="star-empty fa fa-star-o"></i>
+  <i class="star-half fa fa-star-half-o"></i>
+  <i class="star-filled fa fa-star"></i>
 </div>
 <div class="star half {$modifiers}">
   <svg class="star-empty">
@@ -188,9 +179,9 @@ markup:
   <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>
- <i class="star-empty fa fa-heart-o"></i>
- <i class="star-half fa fa-heartbeat"></i>
- <i class="star-filled fa fa-heart"></i>
+  <i class="star-empty fa fa-star-o"></i>
+  <i class="star-half fa fa-star-half-o"></i>
+  <i class="star-filled fa fa-star"></i>
 </div>
 <div class="star filled {$modifiers}">
   <svg class="star-empty">
@@ -202,9 +193,9 @@ markup:
   <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>
-  <i class="star-empty fa-heart-o"></i>
-  <i class="star-half fa fa-heartbeat"></i>
-  <i class="star-filled fa fa-heart"></i>
+ <i class="star-empty fa fa-star-o"></i>
+  <i class="star-half fa fa-star-half-o"></i>
+  <i class="star-filled fa fa-star"></i>
 </div>
 
 Styleguide 1.2.1.1.3
@@ -215,16 +206,13 @@ Star icons
 
 The different star icons.
 
-none                  - Stars svg icon is used
-.fa fa-star           - font-awesome star-icon
-.fa fa-heart          - bootstrap star-icon
-.fa fa-gear           - ionic star-icon
+.fa.fa-star-half-o    - font-awesome star-icon
+.ion-ios-star-half    - bootstrap star-icon
+.fa.fa-gear           - ionicons star-icon
 
 markup:
-<div class="star filled custom-icon">
-  <i class="star-empty {$modifiers}"></i>
-  <i class="star-half fa fa-star-half"></i>
-  <i class="star-filled fa fa-heart"></i>
+<div class="star half custom-icon">
+  <i class="star-half {$modifiers}"></i>
 </div>
 
 Styleguide 1.2.1.1.3.1

diff --git a/src/sc5-styleguide/modifiers.sc5.scss b/src/sc5-styleguide/modifiers.sc5.scss
@@ -46,7 +46,7 @@ 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
+                        - no rating
 .value-0                - 0 rating
 .value-1                - 1 rating
 .value-2                - 2 rating
@@ -113,10 +113,25 @@ 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
+default                 - rating with full stars
 .half                   - rating with half stars on the end
 
 markup:
+<div class="rating {$modifiers}">
+    <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-half">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></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>
 <div class="rating value-0 {$modifiers}">
     <div class="star-container">
         <div class="star" ng-repeat="i in [1,2,3,4,5]">
@@ -278,6 +293,21 @@ default                  - No static color
 .color-negative          - Stars are always colored negative
 
 markup:
+<div class="rating {$modifiers}">
+    <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-half">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></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>
 <div class="rating half value-0 {$modifiers}">
     <div class="star-container">
         <div class="star" ng-repeat="i in [1,2,3,4,5]">
@@ -535,10 +565,11 @@ Styleguide 1.1.6
 /*
    Star Type
 
-   The stars can be generated oft of three different types. characters, svg's of any icon font
+   The stars can be generated out of three different types. characters, svg's of any icon font
 
    default                  - The default star type is svg
-   .star-icon               - Star-Characters for default browser font
+   .star-icon               - Star-Characters from default browser font
+   .star-custom-icon        - Star-Characters from icon-fonts like fontawesome and others
    .star-svg                - Star-Vectors form the shipped svg images
 
    markup:
@@ -554,9 +585,9 @@ Styleguide 1.1.6
             <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>
-            <i class="star-empty fa fa-this-icon"></i>
-            <i class="star-half fa fa-half-icon"></i>
-            <i class="star-filled fa fa-that-icon"></i>
+            <i class="star-empty fa fa-star-o"></i>
+            <i class="star-half fa fa-star-half-o"></i>
+            <i class="star-filled fa fa-star"></i>
              </div>
     </div>
   </div>

diff --git a/src/sc5-styleguide/themes.scss b/src/sc5-styleguide/themes.scss
@@ -6,14 +6,15 @@ Some themes expect a special background to look good.
 For demo-purpos the theme-[name]-gb classes are created.
 
 default                 - default theme
+.theme-rolling-stars    - animate stars
 .theme-kununu           - kununu theme
 .theme-google-places    - google-places theme
 
    markup:
-   <div class="rating value-3 half {$modifiers}">
-   <div class="label-value">3,57</div>
+   <div ng-init="data.rating=3" class="rating value-{{data.rating}} half {$modifiers}" >
+   <div class="label-value">{{data.rating}},57</div>
     <div class="star-container">
-      <div class="star custom-icon" ng-repeat="i in [1,2,3,4,5] track by $index">
+      <div class="star custom-icon" ng-repeat="i in [1,2,3,4,5] track by $index"  ng-click="data.rating = $index">
         <i class="star-empty fa fa-star-o"></i>
         <i class="star-half fa fa-star-half-o"></i>
         <i class="star-filled fa fa-star"></i>
@@ -26,12 +27,11 @@ default                 - default theme
        <sg-wrapper-content/>
    </div>
 
-
 Styleguide 1.3
 */
 
 /*
-Star tzpes position test
+Star types position test
 
 All icons should lay exactly on top of each other.