fix(star icon position): fixed star icon position

BioPhoton · Dec 2, 2016 · b121d9b · b121d9b
1 parent c018301
commit b121d9b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/src/sc5-styleguide/elements.sc5.scss b/src/sc5-styleguide/elements.sc5.scss
@@ -69,7 +69,6 @@ markup:
 Styleguide 1.2.1
 */
 
-
 /*
 Star fill states
 
@@ -212,14 +211,14 @@ Styleguide 1.2.1.1.3
 */
 
 /*
-Star types
+Star icons
 
-The different star types.
+The different star icons.
 
 none                  - Stars svg icon is used
-.fa fa-star           -font-awesome star-icon
-.fa fa-heart          -bootstrat star-icon
-.fa fa-gear           -ionic star-icon
+.fa fa-star           - font-awesome star-icon
+.fa fa-heart          - bootstrap star-icon
+.fa fa-gear           - ionic star-icon
 
 markup:
 <div class="star filled custom-icon">
@@ -231,7 +230,6 @@ markup:
 Styleguide 1.2.1.1.3.1
 */
 
-
 /*
 Star sizes
 
@@ -302,10 +300,14 @@ markup:
   </svg>
 </div>
 
+sg-wrapper:
+<div class="phone-simulator padding">
+   <sg-wrapper-content/>
+</div>
+
 Styleguide 1.2.1.5
 */
 
-
 /*
 Star Container
 
@@ -333,7 +335,6 @@ markup:
 Styleguide 1.2.2
 */
 
-
 /*
 Container Direction
 
@@ -426,7 +427,6 @@ markup:
 Styleguide 1.2.3
 */
 
-
 /*
 Label Sizes
 

diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss
@@ -3,22 +3,32 @@
 /*CSS Star Rating Elements
 ====================================================*/
 
+/*HELPER*/
+
+.center-all{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
 /*
 Star element
 ==================================================================*/
 .star {
   position: relative;
   width: $default-star-width;
   height: $default-star-height;
+  @extend .center-all;
 
   svg, i {
+    @extend .center-all;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 
-    display: block;
     font-style: normal;
 
     &.star-half,
@@ -28,6 +38,7 @@ Star element
   }
 
   i {
+    top:1px;
     display: none;
   }
 
@@ -54,7 +65,7 @@ Star element
       content: $default-star-character-empty;
     }
     &.star-half:before {
-      content: $default-star-character-half
+      content: $default-star-character-half;
     }
     &.star-filled:before {
       content: $default-star-character-filled;