diff options
| author | crupest <crupest@outlook.com> | 2021-06-30 23:02:41 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2021-06-30 23:02:41 +0800 |
| commit | 1d320f3e363d46900a420650360b68ba9a4f3f2f (patch) | |
| tree | 1c8f7efd5383a656ab1876337e2589bdcdab2272 /FrontEnd/src/views/common/button | |
| parent | fdc2d4a971d608bb230cd8aa1e602197c7775231 (diff) | |
| download | timeline-1d320f3e363d46900a420650360b68ba9a4f3f2f.tar.gz timeline-1d320f3e363d46900a420650360b68ba9a4f3f2f.tar.bz2 timeline-1d320f3e363d46900a420650360b68ba9a4f3f2f.zip | |
...
Diffstat (limited to 'FrontEnd/src/views/common/button')
| -rw-r--r-- | FrontEnd/src/views/common/button/Button.css | 99 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/button/LoadingButton.tsx | 11 |
2 files changed, 63 insertions, 47 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index 8b5b74a7..3e408d8d 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -1,72 +1,81 @@ -.cru-button {
- color: white;
- cursor: pointer;
- padding: 0.2em 0.5em;
- border-radius: 0.2em;
- border: none;
- transition: all 0.6s;
-}
-
.cru-button.primary {
- background-color: var(--cru-primary-color);
-}
-
-.cru-button.primary:hover {
- background-color: var(--cru-primary-f1-color);
+ --cru-button-color: var(--cru-primary-color);
+ --cru-button-f1-color: var(--cru-primary-f1-color);
+ --cru-button-f2-color: var(--cru-primary-f2-color);
+ --cru-button-f3-color: var(--cru-primary-f3-color);
}
-.cru-button.primary:active {
- background-color: var(--cru-primary-f2-color);
-}
-
-.cru-button.primary.disabled {
- background-color: var(--cru-primary-f3-color);
+.cru-button.primary-enhance {
+ --cru-button-color: var(--cru-primary-enhance-color);
+ --cru-button-f1-color: var(--cru-primary-enhance-f1-color);
+ --cru-button-f2-color: var(--cru-primary-enhance-f2-color);
+ --cru-button-f3-color: var(--cru-primary-enhance-f3-color);
}
.cru-button.secondary {
- background-color: var(--cru-secondary-color);
-}
-
-.cru-button.secondary:hover {
- background-color: var(--cru-secondary-f1-color);
+ --cru-button-color: var(--cru-secondary-color);
+ --cru-button-f1-color: var(--cru-secondary-f1-color);
+ --cru-button-f2-color: var(--cru-secondary-f2-color);
+ --cru-button-f3-color: var(--cru-secondary-f3-color);
}
-.cru-button.secondary:active {
- background-color: var(--cru-secondary-f2-color);
+.cru-button.success {
+ --cru-button-color: var(--cru-success-color);
+ --cru-button-f1-color: var(--cru-success-f1-color);
+ --cru-button-f2-color: var(--cru-success-f2-color);
+ --cru-button-f3-color: var(--cru-success-f3-color);
}
-.cru-button.secondary.disabled {
- background-color: var(--cru-secondary-f3-color);
+.cru-button.danger {
+ --cru-button-color: var(--cru-danger-color);
+ --cru-button-f1-color: var(--cru-danger-f1-color);
+ --cru-button-f2-color: var(--cru-danger-f2-color);
+ --cru-button-f3-color: var(--cru-danger-f3-color);
}
-.cru-button.success {
- background-color: var(--cru-success-color);
+.cru-button:not(.outline) {
+ color: white;
+ cursor: pointer;
+ padding: 0.2em 0.5em;
+ border-radius: 0.2em;
+ border: none;
+ transition: all 0.5s;
+ background-color: var(--cru-button-color);
}
-.cru-button.success:hover {
- background-color: var(--cru-success-f1-color);
+.cru-button:not(.outline):hover {
+ background-color: var(--cru-button-f1-color);
}
-.cru-button.success:active {
- background-color: var(--cru-success-f2-color);
+.cru-button:not(.outline):active {
+ background-color: var(--cru-button-f2-color);
}
-.cru-button.success.disabled {
- background-color: var(--cru-success-f3-color);
+.cru-button:not(.outline):disabled {
+ background-color: var(--cru-button-f3-color);
}
-.cru-button.danger {
- background-color: var(--cru-danger-color);
+.cru-button.outline {
+ color: var(--cru-button-color);
+ border: var(--cru-button-color) 1px solid;
+ cursor: pointer;
+ padding: 0.2em 0.5em;
+ border-radius: 0.2em;
+ transition: all 0.6s;
+ background-color: white;
}
-.cru-button.danger:hover {
- background-color: var(--cru-danger-f1-color);
+.cru-button.outline:hover {
+ color: var(--cru-button-f1-color);
+ border-color: var(--cru-button-f1-color);
}
-.cru-button.danger:active {
- background-color: var(--cru-danger-f2-color);
+.cru-button.outline:active {
+ color: var(--cru-button-f2-color);
+ border-color: var(--cru-button-f2-color);
}
-.cru-button.danger.disabled {
- background-color: var(--cru-danger-f3-color);
+.cru-button.outline:disabled {
+ color: var(--cru-button-f3-color);
+ border-color: var(--cru-button-f3-color);
}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx index aee83aa2..a7e34f91 100644 --- a/FrontEnd/src/views/common/button/LoadingButton.tsx +++ b/FrontEnd/src/views/common/button/LoadingButton.tsx @@ -11,9 +11,16 @@ const LoadingButton: React.FC<{ loading?: boolean } & CommonButtonProps> = ({ ...otherProps }) => { return ( - <Button color={color} disabled={disabled || loading} {...otherProps}> + <Button + color={color} + outline + disabled={disabled || loading} + {...otherProps} + > {otherProps.children} - {loading ? <Spinner color={color} /> : null} + {loading ? ( + <Spinner className="cru-align-text-bottom ms-1" color={color} /> + ) : null} </Button> ); }; |