style: modify button disabled style.

uiwjs · Apr 24, 2023 · a51e552 · a51e552
1 parent bce11f9
commit a51e552
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 16 deletions.
diff --git a/pages/base/README.md b/pages/base/README.md
@@ -43,7 +43,7 @@ const Demo = () => (
       <Username name="userUserName" />
       <Password placeholder="请输入密码" name="userPassword" />
       <Submit>提交</Submit>
-      <Reset>重置</Reset>
+      <Reset disabled={true}>重置</Reset>
       <Title />
       <Logo>
         <LoginLogo />

diff --git a/pages/base/src/control/Reset.tsx b/pages/base/src/control/Reset.tsx
@@ -6,5 +6,5 @@ export const Reset: FC<Omit<ButtonProps, 'name'>> = (props) => {
   if (!elmProps.children) {
     elmProps.children = 'Reset';
   }
-  return <Button {...elmProps} name="reset" />;
+  return <Button type="reset" name="reset" {...elmProps} />;
 };
diff --git a/pages/base/src/control/Submit.tsx b/pages/base/src/control/Submit.tsx
@@ -6,5 +6,5 @@ export const Submit: FC<Omit<ButtonProps, 'name'>> = (props) => {
   if (!elmProps.children) {
     elmProps.children = 'Submit';
   }
-  return <Button type="submit" {...elmProps} name="submit" />;
+  return <Button type="submit" name="submit" {...elmProps} />;
 };
diff --git a/pages/base/src/index.css b/pages/base/src/index.css
@@ -124,13 +124,17 @@
   font-size: 0.923rem;
 }
 
-.login-page-base section button:focus {
+.login-page-base section button:disabled {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
+.login-page-base section button:focus:not(:disabled) {
   box-shadow: 0 0 0 2px var(--login-btn-focus);
 }
-.login-page-base section button:hover {
+.login-page-base section button:hover:not(:disabled) {
   background-color: var(--login-btn-hover);
 }
-.login-page-base section button:active {
+.login-page-base section button:active:not(:disabled) {
   background-color: var(--login-btn-active);
 }
 .login-page-base footer {

diff --git a/pages/page1/README.md b/pages/page1/README.md
@@ -43,7 +43,7 @@ const Demo = () => (
       <Username name="userUserName" />
       <Password placeholder="请输入密码" name="userPassword" />
       <Submit>提交</Submit>
-      <Reset>重置</Reset>
+      <Reset disabled>重置</Reset>
       <Title />
       <Logo>
         <LoginLogo />

diff --git a/pages/page1/src/index.css b/pages/page1/src/index.css
@@ -103,6 +103,10 @@
   box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);
 }
 
+.login-page-1 section button:disabled {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
 .login-page-1 section button {
   cursor: pointer;
   margin-top: 10px;
@@ -113,7 +117,7 @@
   display: flex;
   gap: 1.35rem;
 }
-.login-page-1 section button:active {
+.login-page-1 section button:active:not(:disabled) {
   background: rgba(255,255,255,0.2);
 }
 

diff --git a/pages/page2/README.md b/pages/page2/README.md
@@ -57,7 +57,7 @@ const Demo = () => (
       <Email name="userUserName" />
       <Password placeholder="请输入密码" name="userPassword" />
       <Submit>提交</Submit>
-      <Reset>重置</Reset>
+      <Reset disabled>重置</Reset>
       <Title visible={false} />
       <Logo>
         <LoginLogo />

diff --git a/pages/page2/src/index.css b/pages/page2/src/index.css
@@ -126,6 +126,11 @@
   display: flex;
   gap: var(--gap);
 }
+
+.login-page2-inner > main > section > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
 .login-page2-inner > main > section > button {
   font-weight: bold;
   color: var(--login-btn);
@@ -143,12 +148,13 @@
   cursor: pointer;
   appearance: button;
   touch-action: manipulation;
+  font-size: 16px;
 }
 
-.login-page2-inner > main > section > button:hover {
+.login-page2-inner > main > section > button:hover:not(:disabled) {
   background: var(--login-btn-bg-hover);
 }
-.login-page2-inner > main > section > button:active {
+.login-page2-inner > main > section > button:active:not(:disabled) {
   background: var(--login-btn-bg-active);
 }
 

diff --git a/pages/page3/README.md b/pages/page3/README.md
@@ -53,7 +53,7 @@ const Demo = () => (
       <Email name="userUserName" />
       <Password placeholder="请输入密码" label="密码" name="userPassword" />
       <Submit>提交</Submit>
-      <Reset>重置</Reset>
+      <Reset disabled>重置</Reset>
       <Welcome>欢迎回来！ 登录您的帐户以查看今天的客户：</Welcome>
       <Title visible={false} />
       <Logo>

diff --git a/pages/page3/src/index.css b/pages/page3/src/index.css
@@ -182,13 +182,16 @@
   gap: var(--gap);
   justify-content: flex-end;
 }
+.login-page3-inner > main > section > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
 .login-page3-inner > main > section > button {
   appearance: none;
   width: auto;
-  min-width: 100px;
   border-radius: 24px;
   text-align: center;
-  padding: 15px 40px;
+  padding: 10px 21px;
   margin-top: 15px;
   background: var(--login-btn-bg);
   color: var(--login-btn);
@@ -201,12 +204,12 @@
   cursor: pointer;
 }
 
-.login-page3-inner > main > section > button:hover {
+.login-page3-inner > main > section > button:hover:not(:disabled) {
   background: var(--login-btn-bg-hover);
   transform: translateY(-3px);
   box-shadow: 0 2px 6px -1px rgba(182, 157, 230, 0.65);
 }
-.login-page3-inner > main > section > button:active {
+.login-page3-inner > main > section > button:active:not(:disabled) {
   background: var(--login-btn-bg-active);
   transform: scale(0.99);
 }