UX: Give ranked choice polls distinctive bullets in preview (#29439)

This commit is contained in:
Kris 2024-10-28 11:10:37 -04:00 committed by GitHub
parent 8ee00dcbd0
commit f371258b42
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -452,11 +452,45 @@ div.poll-outer {
content: ""; content: "";
} }
&[data-poll-type="multiple"],
&[data-poll-type="ranked_choice"] {
[data-poll-option-id] {
display: flex;
align-items: center;
}
}
&[data-poll-type="multiple"] { &[data-poll-type="multiple"] {
li[data-poll-option-id]:before { li[data-poll-option-id]:before {
border-radius: 3px; 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);
}
}
}
} }
} }