1 files changed, 93 insertions, 0 deletions
diff --git a/public/register.css b/public/register.css
new file mode 100644
index 0000000..eef7490
--- /dev/null
+++ b/public/register.css
@@ -0,0 +1,93 @@
+.check-popup {
+	transition-property: margin, box-shadow;
+	transition-duration: .3s;
+	background-color: var(--bg-alt);
+	position: relative;
+	margin-bottom: 16px;
+	border-radius: 8px;
+	box-shadow: 0px 8px 32px -16px #0004;
+}
+
+.check-popup::before {
+	transition: opacity .3s;
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 50%;
+	background-color: var(--bg-alt);
+	width: 16px;
+	height: 16px;
+	transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.requirements {
+	display: grid;
+	list-style: none;
+}
+
+.requirements .requirement {
+	transition-property: opacity;
+	transition-duration: .3s;
+	opacity: calc(100% - 50% * var(--done));
+	--done: 0;
+}
+
+.requirements .requirement .inner {
+	position: relative;
+}
+
+.requirements .requirement .inner::before {
+	content: "- ";
+	position: absolute;
+	left: -0.5em;
+	transform: translateX(-100%);
+}
+
+.requirements .requirement .inner::after {
+	transition-property: width;
+	transition-duration: .3s;
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 0;
+	width: calc(100% * var(--done));
+	background-color: currentColor;
+	height: 2px;
+}
+
+.requirements.len-3 .requirement.len-3,
+.requirements.nosymbol .requirement.nosymbol,
+.requirements.nospace .requirement.nospace,
+.requirements.valid .requirement.valid,
+.requirements.len-8 .requirement.len-8,
+.requirements.digit-2 .requirement.digit-2,
+.requirements.symbol-2 .requirement.symbol-2,
+.requirements.has-uppercase .requirement.has-uppercase,
+.requirements.has-lowercase .requirement.has-lowercase
+{ --done: 1; }
+
+#username-requirements { --requirement-count: 3; }
+#email-requirements { --requirement-count: 1; }
+#password-requirements { --requirement-count: 5; }
+.check-popup .requirements {
+	--requirement-count: 0; /* TODO: this should dynamically change */
+	transition-property: margin, opacity, grid-template-rows;
+	transition-duration: .3s;
+	grid-template-rows: repeat(var(--requirement-count), 1fr);
+	overflow: hidden;
+}
+
+.check-popup .requirements .requirement {
+	min-height: 0;
+}
+
+.check-popup.all .requirements {
+	margin: 0;
+	opacity: 0;
+	grid-template-rows: repeat(var(--requirement-count), 0fr);
+}
+.check-popup.all {
+	margin: 0;
+	box-shadow: none;
+}
+.check-popup.all::before { opacity: 0; }