From f371258b4288803139bb57b384409fc305f3963f Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 28 Oct 2024 11:10:37 -0400
Subject: [PATCH] UX: Give ranked choice polls distinctive bullets in preview
 (#29439)

---
 .../poll/assets/stylesheets/common/poll.scss  | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 6db6031a496..4c645da9fb7 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -452,11 +452,45 @@ div.poll-outer {
       content: "";
     }
 
+    &[data-poll-type="multiple"],
+    &[data-poll-type="ranked_choice"] {
+      [data-poll-option-id] {
+        display: flex;
+        align-items: center;
+      }
+    }
+
     &[data-poll-type="multiple"] {
       li[data-poll-option-id]:before {
         border-radius: 3px;
       }
     }
+
+    &[data-poll-type="ranked_choice"] {
+      li[data-poll-option-id] {
+        position: relative;
+        &:before {
+          mask-image: svg-uri(
+            '<svg width="0.75em" height="0.75em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>'
+          );
+          z-index: 1;
+          width: 0.75em;
+          margin-right: 0.75em;
+          left: 0.2em;
+          background: var(--primary-high);
+          border-radius: var(--d-button-border-radius);
+          border: none;
+        }
+        &:after {
+          content: "";
+          position: absolute;
+          height: 1.125em;
+          width: 1.125em;
+          background: var(--primary-low);
+          border-radius: var(--d-button-border-radius);
+        }
+      }
+    }
   }
 }