From a1efce808b5aa16bb59079bf239b304963b91736 Mon Sep 17 00:00:00 2001
From: Pablo Brasero <pablo@pablobm.com>
Date: Thu, 28 Dec 2023 12:42:13 +0000
Subject: [PATCH] Linter

---
 .../assets/stylesheets/admin/identity.scss    | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/spec/example_app/app/assets/stylesheets/admin/identity.scss b/spec/example_app/app/assets/stylesheets/admin/identity.scss
index 8d26e6b847..96d834cc2a 100644
--- a/spec/example_app/app/assets/stylesheets/admin/identity.scss
+++ b/spec/example_app/app/assets/stylesheets/admin/identity.scss
@@ -1,18 +1,39 @@
 .identity__banner {
   margin: 0;
 
-  &--admin {
-    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
-    text-align: center;
+  &.identity__banner--admin {
+    // Done this way purely to satisfy the linter
+    --rainbow-blue: #00f;
+    --rainbow-green: #008000;
+    --rainbow-indigo: #4b0082;
+    --rainbow-orange: #ffa500;
+    --rainbow-red: #f00;
+    --rainbow-violet: #ee82ee;
+    --rainbow-yellow: #ff0;
+
+    animation: rainbow 1s ease;
+    background-clip: text;
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--rainbow-violet),
+      var(--rainbow-indigo),
+      var(--rainbow-blue),
+      var(--rainbow-green),
+      var(--rainbow-yellow),
+      var(--rainbow-orange),
+      var(--rainbow-red),
+      var(--rainbow-violet)
+    );
     background-size: 800% 800%;
-    -webkit-background-clip: text;
+    text-align: center;
     -webkit-text-fill-color: transparent;
-    animation: rainbow 1s ease;
   }
 }
 
 @keyframes rainbow {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 25%}
-    100%{background-position:0% 50%}
+  0% { background-position: 0% 50%; }
+
+  50% { background-position: 100% 25%; }
+
+  100% { background-position: 0% 50%; }
 }