fix(rating): partial rating needs webkit prefix

The autoprefixer was not creating the vendor specific attributes for the rating module anymore, making partial ratings not visually work in chrome/webkit based browsers.
fomantic · Jul 24, 2021 · 6ceeeb8 · 6ceeeb8
1 parent c65b85c
commit 6ceeeb8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/definitions/modules/rating.less b/src/definitions/modules/rating.less
@@ -69,13 +69,20 @@
   color: @activeColor;
 }
 
-/* Partially Active Icon */
-.ui.rating .icon.partial.active {
-  background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
-  background-clip: text;
-  color: transparent;
-}
+& when (@variationRatingPartial) {
+  /* Partially Active Icon */
+  .ui.rating .icon.partial.active {
+    background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
+  }
 
+  /* central override for colors */
+  .ui.ui.rating .icon.partial.active {
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: none;
+  }
+}
 /* Selected Icon */
 .ui.rating .icon.selected,
 .ui.rating .icon.selected.active,
@@ -116,12 +123,11 @@ each(@colors, {
     -webkit-text-stroke: unset;
     background-clip: unset;
   }
-  .ui.@{color}.rating .icon.partial.active {
-    background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
-    text-shadow: none;
-    -webkit-text-stroke: @c 0.78px;
-    background-clip: text;
-    color: transparent;
+  & when (@variationRatingPartial) {
+    .ui.@{color}.rating .icon.partial.active {
+      background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
+      -webkit-text-stroke: @c 0.78px;
+    }
   }
 })
 

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -485,6 +485,7 @@
 
 /* Rating */
 @variationRatingDisabled: true;
+@variationRatingPartial: true;
 @variationRatingSizes: @variationAllSizes;
 
 /* Search */