- reorganize css rules related with states of the rating items;

OutSystems · Sep 20, 2023 · 53d7e8d · 53d7e8d
1 parent 750da77
commit 53d7e8d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css
@@ -12387,6 +12387,12 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{
 .rating-item:last-of-type{
   padding-right:0;
 }
+.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled{
+  opacity:0;
+}
+.rating.is-half input:checked ~ .rating-item .rating-item-half{
+  opacity:0;
+}
 .rating:hover input + .rating-item .rating-item-filled{
   opacity:1;
 }
@@ -12406,10 +12412,13 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{
 .rating input:first-of-type:focus:checked + .rating-item{
   display:block;
 }
-.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled, .rating input:focus + .rating-item .rating-item-empty, .rating input:hover ~ .rating-item .rating-item-filled{
+.rating input:checked + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-half, .rating input:checked ~ .rating-item .rating-item-empty, .rating input:hover ~ .rating-item .rating-item-empty, .rating input:focus ~ .rating-item .rating-item-empty, .rating input:focus + .rating-item .rating-item-filled{
+  opacity:1;
+}
+.rating input:hover ~ .rating-item .rating-item-filled, .rating input:hover ~ .rating-item .rating-item-half{
   opacity:0;
 }
-.rating input:hover ~ .rating-item .rating-item-empty, .rating input:hover + .rating-item .rating-item-filled, .rating input:focus ~ .rating-item .rating-item-empty, .rating input:focus + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-filled, .rating input:checked + .rating-item .rating-item-half, .rating input:checked ~ .rating-item .rating-item-empty{
+.rating input:hover + .rating-item .rating-item-filled{
   opacity:1;
 }
 .rating.is-half .rating-item-half{
@@ -12418,9 +12427,6 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{
 .rating.is-half input:checked + .rating-item .rating-item-half{
   opacity:1;
 }
-.rating.is-half input:checked + .rating-item .rating-item-filled{
-  opacity:0;
-}
 .rating.is-half input:hover ~ .rating-item .rating-item-filled,
 .rating.is-half input:hover ~ .rating-item .rating-item-half{
   opacity:0;

diff --git a/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss b/src/scripts/OSFramework/OSUI/Pattern/Rating/scss/_rating.scss
@@ -86,6 +86,19 @@
 		}
 	}
 
+	input {
+		&:checked + .rating-item .rating-item-empty,
+		&:checked ~ .rating-item .rating-item-filled {
+			opacity: 0;
+		}
+	}
+
+	&.is-half {
+		input:checked ~ .rating-item .rating-item-half {
+			opacity: 0;
+		}
+	}
+
 	/* Selected Styles*/
 	&:hover input + .rating-item .rating-item-filled {
 		opacity: 1;
@@ -110,20 +123,22 @@
 
 		// These need to be separated, to keep exact CSS specificty, for the hover/ checked styles to work as intended
 		/* Checked styles*/
-		&:checked + .rating-item .rating-item-empty,
-		&:checked ~ .rating-item .rating-item-filled,
-		&:focus + .rating-item .rating-item-empty,
-		&:hover ~ .rating-item .rating-item-filled {
+		&:checked + .rating-item .rating-item-filled,
+		&:checked + .rating-item .rating-item-half,
+		&:checked ~ .rating-item .rating-item-empty,
+		&:hover ~ .rating-item .rating-item-empty,
+		&:focus ~ .rating-item .rating-item-empty,
+		&:focus + .rating-item .rating-item-filled {
+			opacity: 1;
+		}
+
+		//&:focus + .rating-item .rating-item-empty,
+		&:hover ~ .rating-item .rating-item-filled,
+		&:hover ~ .rating-item .rating-item-half {
 			opacity: 0;
 		}
 
-		&:hover ~ .rating-item .rating-item-empty,
-		&:hover + .rating-item .rating-item-filled,
-		&:focus ~ .rating-item .rating-item-empty,
-		&:focus + .rating-item .rating-item-filled,
-		&:checked + .rating-item .rating-item-filled,
-		&:checked + .rating-item .rating-item-half,
-		&:checked ~ .rating-item .rating-item-empty {
+		&:hover + .rating-item .rating-item-filled {
 			opacity: 1;
 		}
 	}
@@ -137,9 +152,6 @@
 			.rating-item-half {
 				opacity: 1;
 			}
-			.rating-item-filled {
-				opacity: 0;
-			}
 		}
 
 		input:hover ~ .rating-item {