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 @@ -login-page +login-page @@ -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; }