Skip to content

Commit

Permalink
feat(hover): implemented hover modifiers and tests in the styleguide
Browse files Browse the repository at this point in the history
  • Loading branch information
@BioPhoton
BioPhoton committed Apr 7, 2017
1 parent d14e947 commit 5eea511
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 223 deletions.
171 changes: 43 additions & 128 deletions src/sc5-styleguide/modifiers.sc5.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,136 +89,51 @@ The star and all previous the one the mouse hovers are visible as filled and hav
.hover-5 - hover over 5th star
markup:
<p>no hover</p>
<div class="star-container">
<div class="star filled">
<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 class="star filled">
<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 class="star filled">
<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 class="star empty">
<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>
</div>
<div class="star">
<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>
</div>
</div>
<p>hover on star 4</p>
<div class="star-container">
<div class="star filled disabled">
<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 class="star filled disabled">
<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 class="star filled disabled">
<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 class="star filled disabled">
<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 class="star">
<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>
</div>
</div>
<hr>
<div class="star-container">
<div class="star filled">
<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 class="star filled">
<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 class="star filled">
<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 class="star filled disabled">
<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 class="star">
<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>
</div>
</div>
<p>hover on star 3</p>
<div class="star-container">
<div class="star filled">
<svg class="star-filled disabled">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
</svg>
</div>
<div class="star filled disabled">
<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 class="star filled disabled">
<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 class="star">
<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>
</div>
<div class="star">
<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>
</div>
</div>
<hr>
<div class="rating hover value-3 hover-4 {$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 class="rating value-2 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-empty">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
</svg>
</div>
<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-empty">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
</svg>
</div>
<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-empty">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
</svg>
</div>
<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-empty">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
</svg>
</div>
<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-empty">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
</svg>
</div>
</div>
</div>
Styleguide 1.1.2.1
*/

Expand Down
113 changes: 18 additions & 95 deletions src/scss/_modifiers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,115 +58,38 @@ Rating Component
//- all stars before and the hover star should be filled
//- filled stars after the hover star should be empty

/*
PATTERN
//default style
.star-container {
.star:hover,
.star:hover ~ .star { }
}
&.hover:hover {

//hover style
.star-container {
.star { }
.star:hover ~ .star { }
}
*/
@for $i from $minRatingValue through $maxNumOfStars {
&.hover-#{$i} {

&.hover:hover {
/*
//default style
.star-container {
.star:hover,
.star:hover ~ .star {
@extend .filled;
}
}

//hover style
.star-container {
.star {
//@extend .filled;
svg, i {
&.star-half,
&.star-empty {
opacity: 0 !important;
}
&.star-filled {
opacity: 1 !important;
}
}
}
.star:hover ~ .star {
//@extend .empty;
svg, i {
&.star-half,
&.star-filled {
opacity: 0 !important;
}
&.star-empty {
opacity: 1 !important;
}
}
.star,
.star:nth-child(-n+#{$i}) {
@extend .empty;
}

}
@for $i from $minRatingValue through $maxNumOfStars {
//default style
.star:nth-child(-n+#{$i}) {
@extend .filled;
}

//hover style
.star-container {
.star:nth-child(-n+#{$i}):nth-child(#{$i}):hover {
@if $i <= 2 {
background: red !important;
}
.star {
@if $i <= 2 {
@extend .star.negative;
}

.star:nth-child(#{$i}):hover,
.star:nth-child(#{$i}):hover ~ .star {
@if $i <= 2 {
@extend .star.negative;
}
@if $i == 3 {
@extend .ok;
}
@if $i >= 4 {
@extend .positive;
}
@if $i == 3 {
@extend .ok;
}
}
}
*/

@for $i from $minRatingValue through $maxNumOfStars {
&.hover-#{$i} {

.star-container {
.star:nth-child(-n+#{$i}) {
@extend .filled;
}

.star {
@if $i <= 2 {
@extend .star.negative;
}

@if $i == 3 {
@extend .ok;
}

@if $i >= 4 {
@extend .positive;
}
}
@if $i >= 4 {
@extend .positive;
}
}
}
}
}

}

Expand Down

0 comments on commit 5eea511

Please sign in to comment.