data-step attribute for synchronized showing of elements

LeaVerou · Feb 11, 2024 · 6f4a874 · 6f4a874
1 parent 7e980b0
commit 6f4a874
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/inspire.css b/inspire.css
@@ -164,6 +164,22 @@ body {
 	}
 }
 
+.slide[data-steps] {
+	[data-step] {
+		opacity: 0;
+		transition-property: var(--transition-properties);
+		transition-duration: var(--transition-duration);
+	}
+
+	&[data-step-all~="1"] [data-step="1"],
+	&[data-step-all~="2"] [data-step="2"],
+	&[data-step-all~="3"] [data-step="3"],
+	&[data-step-all~="4"] [data-step="4"],
+	&[data-step-all~="5"] [data-step="5"] {
+		opacity: 1;
+	}
+}
+
 @media print {
 	@page {
 		size: landscape;