diff --git a/pages/page3/README.md b/pages/page3/README.md
index f9d6c97..9228a92 100644
--- a/pages/page3/README.md
+++ b/pages/page3/README.md
@@ -6,7 +6,7 @@
-
+
@@ -103,7 +103,7 @@ const Demo = () => (
-
+
xx
diff --git a/pages/page3/src/index.css b/pages/page3/src/index.css
index 4631b89..683e343 100644
--- a/pages/page3/src/index.css
+++ b/pages/page3/src/index.css
@@ -4,6 +4,7 @@
--login-logo: #fff;
--login-inner-bg: #fff;
--login-banner-bg: #fbfbfb;
+ --login-valid: #e15549;
--login-input: #333;
--login-input-icon: #dddddd;
--login-input-bg: transparent;
@@ -21,6 +22,7 @@
--login-logo: #fff;
--login-inner-bg: #fff;
--login-banner-bg: #fbfbfb;
+ --login-valid: #e15549;
--login-input: #333;
--login-input-icon: #dddddd;
--login-input-bg: transparent;
@@ -155,6 +157,21 @@
font-size: 14px;
}
+.login-page3-inner label > input:not(:valid):not(:focus) ~ :last-child:not(input) {
+ animation-name: shake-shake;
+ animation-duration: .3s;
+ color: var(--login-valid);
+}
+
+@keyframes shake-shake {
+ 0% { transform: translateX(-3px); }
+ 20% { transform: translateX(3px); }
+ 40% { transform: translateX(-3px); }
+ 60% { transform: translateX(3px); }
+ 80% { transform: translateX(-3px); }
+ 100% { transform: translateX(0px); }
+}
+
.login-page3-inner label > input:not(:placeholder-shown) {
padding: 28px 0px 12px 0px;
}