fix(component/starsinput): fix the display of stars in s, l & xl vari…

…ations (#1291)
adeo · Dec 14, 2022 · 1bc5d9c · 1bc5d9c
1 parent b85410d
commit 1bc5d9c
Showing 1 changed file with 40 additions and 18 deletions.
diff --git a/packages/styles/components/_c.stars-input.scss b/packages/styles/components/_c.stars-input.scss
@@ -82,8 +82,11 @@
       @if ($size != "m") {
         @include set-stars-container($props);
 
-
-        $bg-variation-size: map-deep-get($stars-sizes, $size, "width"); // fix for ie11
+        $bg-variation-size: map-deep-get(
+          $stars-sizes,
+          $size,
+          "width"
+        ); // fix for ie11
         $icon-empty: map-deep-get($stars-sizes, $size, "icon-empty");
         $icon-full: map-deep-get($stars-sizes, $size, "icon-full");
 
@@ -100,23 +103,42 @@
             }
           }
 
+          &__radio {
+            &:checked,
+            &:focus {
+              & ~ #{$parent}__label {
+                background-image: url(
+                  inline-icons(
+                    $icon-empty,
+                    $color-star-full
+                  ));
+              }
+              & + #{$parent}__label {
+                background-image: url(
+                  inline-icons(
+                    $icon-full,
+                    $color-star-full
+                  ));
+              }
+            }
 
-          :checked ~ &__label,
-          :focus ~ &__label {
-            background-image: url(inline-icons($icon-empty, $color-star-full));
-          }
-
-          :checked + &__label,
-          :focus + &__label {
-            background-image: url(inline-icons($icon-full, $color-star-full));
-          }
-
-          &__radio:hover ~ &__label {
-            background-image: url(inline-icons($icon-empty, $color-star-full));
-          }
-
-          &__radio:hover + &__label {
-            background-image: url(inline-icons($icon-full, $color-star-full));
+            &:hover {
+              & ~ #{$parent}__label {
+                background-image: url(
+                  inline-icons(
+                    $icon-empty,
+                    $color-star-full
+                  ));
+              }
+
+              & + #{$parent}__label {
+                background-image: url(
+                  inline-icons(
+                    $icon-full,
+                    $color-star-full
+                  ));
+              }
+            }
           }
         }
       }