@nxgt/material 3.54.0 → 3.56.0

package/dist/components/ui/display/vote-tally/vote-tally.css

@@ -0,0 +1,94 @@
+/* VoteTally: ranked rows, label and "n votes, x%" as text, a decorative bar
+ * beneath. The bar is an SVG whose rect width is an attribute (no `style`,
+ * strict CSP). Leader and tie take the primary fill and a word; the others a
+ * quieter one. Layout is one column at any width: the stat wraps under the
+ * label on a phone, the bar keeps its own line, so counts changing never move
+ * a row. Bars ease only without reduced motion. */
+@layer components {
+	.nxgt-vote-tally {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		min-inline-size: 0;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-list"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.875rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-row"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		min-inline-size: 0;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-head"] {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		justify-content: space-between;
+		column-gap: 0.75rem;
+		row-gap: 0.125rem;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-name"] {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem 0.5rem;
+		min-inline-size: 0;
+		font-weight: 500;
+		overflow-wrap: anywhere;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-marks"] {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-stat"] {
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-bar"] {
+		display: block;
+		block-size: 0.625rem;
+		overflow: hidden;
+		border-radius: 9999px;
+		background: var(--muted);
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-bar"] svg {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+	.nxgt-vote-tally:dir(rtl) [data-slot="vote-tally-bar"] svg {
+		transform: scaleX(-1);
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-fill"] {
+		fill: color-mix(in oklab, var(--muted-foreground) 70%, var(--background));
+	}
+	.nxgt-vote-tally [data-leader] [data-slot="vote-tally-fill"],
+	.nxgt-vote-tally [data-selected] [data-slot="vote-tally-fill"] {
+		fill: var(--primary-indicator, var(--primary));
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-voters"] {
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-empty"],
+	.nxgt-vote-tally [data-slot="vote-tally-abstain"] {
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.nxgt-vote-tally[data-animated] [data-slot="vote-tally-fill"] {
+			transition: width 400ms cubic-bezier(0.2, 0, 0, 1);
+		}
+	}
+}