From 282a7574f9f98141f92fc6daffe221a4b9ee140e Mon Sep 17 00:00:00 2001
From: Anand raja <meetanandns@gmail.com>
Date: Sun, 6 Oct 2024 18:59:55 +0000
Subject: [PATCH] extra css for readin purpose

---
 README.md                                     |  1 +
 .../rating/rating.component.css               | 38 +++++++++++++++++++
 .../rating/rating.component.scss              | 37 ++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 src/app/control-value-accessor/rating/rating.component.css
 create mode 100644 src/app/control-value-accessor/rating/rating.component.scss

diff --git a/README.md b/README.md
index 21177ab..cf2b916 100644
--- a/README.md
+++ b/README.md
@@ -311,3 +311,4 @@ const NG_VALUE_ACCESSOR: InjectionToken<readonly ControlValueAccessor[]>;
 ## Sources
 
 1. [How to PROPERLY implement ControlValueAccessor - Angular Form](https://blog.woodies11.dev/how-to-properly-implement-controlvalueaccessor/)
+2. [CSS Previous sibling selectors and how to fake them](https://medium.com/free-code-camp/how-to-make-the-impossible-possible-in-css-with-a-little-creativity-bd96bb42b29d)
diff --git a/src/app/control-value-accessor/rating/rating.component.css b/src/app/control-value-accessor/rating/rating.component.css
new file mode 100644
index 0000000..f9ed6bd
--- /dev/null
+++ b/src/app/control-value-accessor/rating/rating.component.css
@@ -0,0 +1,38 @@
+.stars {
+  cursor: pointer;
+}
+
+/* When a user hovers over the .stars container, this rule changes the fill color of all polygon elements inside .star elements to yellow (#ffd055) */
+/* It means all stars will be yellow when user hovers */
+.stars:hover .star polygon {
+  fill: #ffd055 !important;
+}
+
+.stars.disabled:hover {
+  cursor: not-allowed;
+}
+
+.stars.disabled:hover .star polygon {
+  fill: #d8d8d8 !important;
+}
+
+.stars .star {
+  float: left;
+  margin: 0px 5px;
+}
+
+.stars .star polygon {
+  fill: #d8d8d8;
+}
+
+/* ~ .star: This is the general sibling combinator. It selects all .star elements that are siblings of the hovered .star and come after it in the DOM. */
+/* When a user hovers over a .star element within the .stars container, this rule changes the fill color of all subsequent sibling .star elements' polygon elements to light gray (#d8d8d8). */
+/* Consider a star rating component with 5 stars. When you hover over the second star, The last 3 stars (third, fourth, and fifth) will change to light gray. */
+
+.stars .star:hover ~ .star polygon {
+  fill: #d8d8d8 !important;
+}
+
+.stars .star.selected polygon {
+  fill: #ffd055 !important;
+}
diff --git a/src/app/control-value-accessor/rating/rating.component.scss b/src/app/control-value-accessor/rating/rating.component.scss
new file mode 100644
index 0000000..f8b69fc
--- /dev/null
+++ b/src/app/control-value-accessor/rating/rating.component.scss
@@ -0,0 +1,37 @@
+.stars {
+  cursor: pointer;
+
+  &:hover {
+    .star polygon {
+      fill: #ffd055 !important;
+    }
+  }
+  &.disabled:hover {
+    cursor: not-allowed;
+    .star {
+      polygon {
+        fill: #d8d8d8 !important;
+      }
+    }
+  }
+
+  .star {
+    float: left;
+    margin: 0px 5px;
+
+    polygon {
+      fill: #d8d8d8;
+    }
+
+    &:hover ~ .star {
+      polygon {
+        fill: #d8d8d8 !important;
+      }
+    }
+    &.selected {
+      polygon {
+        fill: #ffd055 !important;
+      }
+    }
+  }
+}