fix(hover): fixed hover for half star ratings, extended styleguide

BioPhoton · Apr 7, 2017 · 7f56a09 · 7f56a09
1 parent d957b70
commit 7f56a09
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/sc5-styleguide/modifiers.sc5.scss b/src/sc5-styleguide/modifiers.sc5.scss
@@ -82,18 +82,22 @@ Styles for mouse hover effects.
 The star and all previous the one the mouse hovers are visible as filled and have opacity
 
                         - no hover
+.hover-0                - hover over no star
 .hover-1                - hover over 1st star
 .hover-2                - hover over 2nd star
 .hover-3                - hover over 3rd star
 .hover-4                - hover over 4th star
 .hover-5                - hover over 5th star
 
 markup:
-<div class="rating value-2 hover {$modifiers}">
+<div class="rating value-2 half hover {$modifiers}">
   <div class="star-container">
       <div class="star">
            <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>
+          <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-empty">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
@@ -102,6 +106,9 @@ markup:
        <div class="star">
            <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>
+          <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-empty">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
@@ -110,6 +117,9 @@ markup:
       <div class="star">
            <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>
+          <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-empty">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
@@ -119,6 +129,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>
+          <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-empty">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
           </svg>
@@ -127,6 +140,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>
+          <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-empty">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
           </svg>

diff --git a/src/scss/_modifiers.scss b/src/scss/_modifiers.scss
@@ -61,14 +61,18 @@ Rating Component
   &.hover:hover {
 
     @for $i from $minRatingValue through $maxNumOfStars {
-      &.hover-#{$i} {
 
+      &.value-#{$i}.half,
+      &.hover-#{$i} {
         .star-container {
-
-          .star,
-          .star:nth-child(-n+#{$i}) {
+          .star {
             @extend .empty;
           }
+        }
+      }
+
+      &.hover-#{$i} {
+        .star-container {
 
           .star:nth-child(-n+#{$i}) {
             @extend .filled;