refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,95 @@
+.row {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	gap: var(--mantine-spacing-sm);
+	align-items: center;
+	padding: var(--mantine-spacing-md);
+	border-color: var(--wl-color-border);
+	background: var(--wl-color-subtle);
+}
+
+.identity,
+.value {
+	min-width: 0;
+}
+
+.value {
+	text-align: right;
+	white-space: nowrap;
+}
+
+.positive {
+	color: var(--wl-color-positive);
+}
+
+.negative {
+	color: var(--wl-color-negative);
+}
+
+.neutral {
+	color: var(--mantine-color-gray-7);
+}
+
+@media (max-width: 36em) {
+	.row {
+		grid-template-columns: auto minmax(0, 1fr);
+	}
+
+	.value {
+		grid-column: 2;
+		text-align: left;
+	}
+}
+
+.valueFooter {
+	display: grid;
+	align-items: center;
+	justify-items: end;
+	min-height: 28px;
+}
+.valueLabel,
+.actions {
+	grid-area: 1 / 1;
+	transition: opacity 180ms ease;
+}
+.valueLabel {
+	opacity: 0;
+}
+.actions {
+	display: flex;
+}
+@media (hover: hover) and (pointer: fine) {
+	.valueLabel {
+		opacity: 1;
+	}
+	.actions {
+		opacity: 0;
+		pointer-events: none;
+	}
+	.row:hover .actions,
+	.row:focus-within .actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+	.row:hover .valueLabel,
+	.row:focus-within .valueLabel {
+		opacity: 0;
+	}
+}
+@media (max-width: 36em) {
+	.valueFooter {
+		justify-items: start;
+	}
+}
+@media (pointer: coarse) {
+	.actions button {
+		min-width: 36px;
+		min-height: 36px;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.valueLabel,
+	.actions {
+		transition: none;
+	}
+}