fix(ui5-rating-indicator): apply correct color for readonly unselecte…

…d icon (#3992)
SAP · Sep 27, 2021 · 5854e0f · 5854e0f
1 parent 5857496
commit 5854e0f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
@@ -23,6 +23,8 @@
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else if this.halfStar}}
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+			{{else if ../readonly}}
+				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else}}
 				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
 			{{/if}}

diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css
@@ -14,6 +14,10 @@
 	cursor: initial;
 }
 
+:host([readonly]) .ui5-rating-indicator-icon.ui5-rating-indicator-readonly-unselected-icon {
+	color: var(--sapContent_UnratedColor);
+}
+
 :host([_focused]) {
 	outline: 1px dotted var(--sapContent_FocusColor);
 }
@@ -34,11 +38,11 @@
 
 .ui5-rating-indicator-icon.ui5-rating-indicator-half-icon:before {
 	content: "\2605";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 50%;
-    height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 50%;
+	height: 100%;
 	color: var(--sapContent_RatedColor);
 	overflow: hidden;
 }