feat(themes): imtroduced themes with 2 themes

src/sc5-styleguide/themes.scss

@@ -0,0 +1,64 @@
+/*
+Themes
+
+Different themes for the star rating component. Easy to use as single modifier.
+Some themes expect a special background to look good.
+For demo-purpos the theme-[name]-gb classes are created.
+
+default                 - default theme
+.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 class="star-container">
+      <div class="star custom-icon" ng-repeat="i in [1,2,3,4,5] track by $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>
+      </div>
+    </div>
+  </div>
+
+   sg-wrapper:
+   <div class="phone-simulator padding no-border center-all">
+       <sg-wrapper-content/>
+   </div>
+
+
+Styleguide 1.3
+*/
+
+/*
+Star tzpes position test
+
+All icons should lay exactly on top of each other.
+
+none                    - displays the default star element (empty)
+
+markup:
+<div class="star icon show-all">
+  <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>
+  <i class="star-empty fa fa-star-o"></i>
+  <i class="star-empty"></i>
+</div>
+<div class="star star-half show-all">
+  <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>
+  <i class="star-half fa fa-star-half-o"></i>
+  <i class="star-half"></i>
+</div>
+<div class="star star-filled show-all">
+  <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-filled fa fa-star"></i>
+  <i class="star-filled"></i>
+</div>
+
+Styleguide 1.3.1
+*/

src/scss/_themes.scss

@@ -1,25 +1,114 @@
 @charset "UTF-8";
 
+@import "elements";
 
 /*theme modifiers
 ====================================================*/
 
 .rating {
+
   &.theme-kununu {
-    background :red;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: $rating-margin-bottom;
+    $kununu-color-white: #fff !default;
+    $kununu-color-lightgray: #f8f8f8 !default;
+    $kununu-color-gray: #e9ecec !default;
+    $kununu-color-blue: #2286dc !default;
+    $kununu-color-darkblue: #2f3940 !default;
+    $kununu-color-green: #99c613 !default;
+
+    flex-direction: column;
+    width: 78px;
 
+    .label-value,
     .star-container {
+      width: 100%;
+    }
+
+    .label-value {
+
       display: flex;
       align-items: center;
-      flex: 0 0 auto;
+      justify-content: center;
+
+      border-radius: 6px 6px 0 0;
+      height: 50px;
+      border: 1px solid $kununu-color-gray;
+      border-bottom: 0px;
+      font-size: 18px;
+      font-weight: bold;
+      color: $kununu-color-darkblue;
+      letter-spacing: -1px;
+
+      background-color: $kununu-color-lightgray;
+    }
+    .star-container {
+      border-radius: 0 0 6px 6px;
+      padding: 2px 0 4px 0;
+      margin-left: 0px;
+      margin-right: 0px;
+
+      justify-content: center;
+      background-color: $kununu-color-green;
+
+      border: 1px solid $kununu-color-green;
+      border-bottom: 0px;
 
       .star {
-        position: relative;
+        font-size: 11px;
+        height: 11px;
+        width: 11px;
+        @extend .star.custom-icon;
+
+        i {
+          color: $kununu-color-white;
+          text-align: center;
+        }
       }
     }
+
   }
+
+  &.theme-google-places {
+    $google_places-color-default: #e1e1e1 !default;
+    $google_places-color-red: #e7711b !default;
+
+    .label-value {
+      color: $google_places-color-red;
+      font-family: arial, sans-serif;
+      font-size: 13px;
+      line-height: 15px;
+    }
+
+    .star-container {
+      width: 65px;
+      margin-left: 2px;
+
+      .star {
+
+        i {
+          font-size:17px;
+          color: $google_places-color-red !important;
+          &.star-empty {
+            opacity: 1 !important;
+            color: $google_places-color-default !important;
+            &:before {
+              content: $default-star-character-filled;
+            }
+          }
+          &.star-half{
+            width:7px;
+            overflow:hidden;
+            &:before {
+              content: $default-star-character-half;
+            }
+          }
+          &.star-filled:before {
+            content: $default-star-character-filled;
+          }
+        }
+      }
+
+    }
+
+  }
+
 }