From 5eea511284da150e14e3c2eb86184034aba60739 Mon Sep 17 00:00:00 2001 From: Michael Hladky Date: Fri, 7 Apr 2017 17:43:26 +0200 Subject: [PATCH] feat(hover): implemented hover modifiers and tests in the styleguide --- src/sc5-styleguide/modifiers.sc5.scss | 171 +++++++------------------- src/scss/_modifiers.scss | 113 +++-------------- 2 files changed, 61 insertions(+), 223 deletions(-) diff --git a/src/sc5-styleguide/modifiers.sc5.scss b/src/sc5-styleguide/modifiers.sc5.scss index 5d5464d..26c0bc0 100644 --- a/src/sc5-styleguide/modifiers.sc5.scss +++ b/src/sc5-styleguide/modifiers.sc5.scss @@ -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: -

no hover

-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-

hover on star 4

-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-
-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-

hover on star 3

-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-
-
-
-
- - - - - - - - - -
-
+
+
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
- Styleguide 1.1.2.1 */ diff --git a/src/scss/_modifiers.scss b/src/scss/_modifiers.scss index 75894ef..e462939 100644 --- a/src/scss/_modifiers.scss +++ b/src/scss/_modifiers.scss @@ -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; } } } + } + } }