style(page3): add input valid style.

uiwjs · Apr 24, 2023 · 71954db · 71954db
1 parent 13cdded
commit 71954db
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/pages/page3/README.md b/pages/page3/README.md
@@ -6,7 +6,7 @@
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-login-page">
-<img width="571" alt="login-page" src="https://user-images.githubusercontent.com/1680273/233847626-226728ee-58c8-4996-9448-b5e65d3fd89f.png">
+<img width="571" alt="login-page" src="https://user-images.githubusercontent.com/1680273/233929466-66229192-529a-4c86-b0dc-b3bae387c3ec.png">
 </a>
 
 <!--rehype:ignore:end-->
@@ -103,7 +103,7 @@ const Demo = () => (
     <Logo>
       <LoginLogo />
     </Logo>
-    <Email index={3} type="text" placeholder="Email" />
+    <Email index={3} placeholder="Email" />
     <Password index={2} />
     <Email rename="phone" label="Phone:" type="tel" index={1} placeholder="Phone number">
       <div>xx</div>

diff --git 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;
 }