From 47175cf9afcd86b0b92f7121ce0c3d85b948b6dd Mon Sep 17 00:00:00 2001 From: crupest Date: Thu, 1 Jul 2021 19:59:22 +0800 Subject: ... --- FrontEnd/src/views/common/button/Button.css | 60 +++++-------------------- FrontEnd/src/views/common/button/FlatButton.css | 38 ++-------------- FrontEnd/src/views/common/button/TextButton.css | 36 --------------- FrontEnd/src/views/common/button/TextButton.tsx | 18 -------- FrontEnd/src/views/common/button/common.ts | 6 ++- 5 files changed, 19 insertions(+), 139 deletions(-) delete mode 100644 FrontEnd/src/views/common/button/TextButton.css delete mode 100644 FrontEnd/src/views/common/button/TextButton.tsx (limited to 'FrontEnd/src/views/common/button') diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index 54127f05..c34176f6 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -1,59 +1,19 @@ -.cru-button.primary { - --cru-button-color: var(--cru-primary-color); - --cru-button-t-color: var(--cru-primary-t-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-enhance { - --cru-button-color: var(--cru-primary-enhance-color); - --cru-button-t-color: var(--cru-primary-enhance-t-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 { - --cru-button-color: var(--cru-secondary-color); - --cru-button-t-color: var(--cru-secondary-t-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.success { - --cru-button-color: var(--cru-success-color); - --cru-button-t-color: var(--cru-success-t-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.danger { - --cru-button-color: var(--cru-danger-color); - --cru-button-t-color: var(--cru-danger-t-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:not(.outline) { - color: var(--cru-button-t-color); + color: var(--cru-theme-t-color); cursor: pointer; padding: 0.2em 0.5em; border-radius: 0.2em; border: none; transition: all 0.5s; - background-color: var(--cru-button-color); + background-color: var(--cru-theme-color); } .cru-button:not(.outline):hover { - background-color: var(--cru-button-f1-color); + background-color: var(--cru-theme-f1-color); } .cru-button:not(.outline):active { - background-color: var(--cru-button-f2-color); + background-color: var(--cru-theme-f2-color); } .cru-button:not(.outline):disabled { @@ -62,8 +22,8 @@ } .cru-button.outline { - color: var(--cru-button-color); - border: var(--cru-button-color) 1px solid; + color: var(--cru-theme-color); + border: var(--cru-theme-color) 1px solid; cursor: pointer; padding: 0.2em 0.5em; border-radius: 0.2em; @@ -72,14 +32,14 @@ } .cru-button.outline:hover { - color: var(--cru-button-f1-color); - border-color: var(--cru-button-f1-color); + color: var(--cru-theme-f1-color); + border-color: var(--cru-theme-f1-color); background-color: var(--cru-background-color); } .cru-button.outline:active { - color: var(--cru-button-f2-color); - border-color: var(--cru-button-f2-color); + color: var(--cru-theme-f2-color); + border-color: var(--cru-theme-f2-color); background-color: var(--cru-background-1-color); } diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css index 986fb061..f0d33153 100644 --- a/FrontEnd/src/views/common/button/FlatButton.css +++ b/FrontEnd/src/views/common/button/FlatButton.css @@ -5,44 +5,14 @@ border: none; background-color: transparent; transition: all 0.6s; -} - -.cru-flat-button:hover:not(.disabled) { - background-color: #e9ecef; + color: var(--cru-theme-color); } .cru-flat-button.disabled { + color: var(--cru-theme-l1-color); cursor: default; } -.cru-flat-button.primary { - color: var(--cru-primary-color); -} - -.cru-flat-button.primary.disabled { - color: var(--cru-primary-l1-color); -} - -.cru-flat-button.secondary { - color: var(--cru-secondary-color); -} - -.cru-flat-button.secondary.disabled { - color: var(--cru-secondary-l1-color); -} - -.cru-flat-button.success { - color: var(--cru-success-color); -} - -.cru-flat-button.success.disabled { - color: var(--cru-success-l1-color); -} - -.cru-flat-button.danger { - color: var(--cru-danger-color); -} - -.cru-flat-button.danger.disabled { - color: var(--cru-danger-l1-color); +.cru-flat-button:hover:not(.disabled) { + background-color: #e9ecef; } diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css deleted file mode 100644 index f5c8aefa..00000000 --- a/FrontEnd/src/views/common/button/TextButton.css +++ /dev/null @@ -1,36 +0,0 @@ -.cru-text-button { - background: transparent; - border: none; -} - -.cru-text-button.primary { - color: var(--cru-primary-color); -} - -.cru-text-button.primary:hover { - color: var(--cru-primary-l1-color); -} - -.cru-text-button.secondary { - color: var(--cru-secondary-color); -} - -.cru-text-button.secondary:hover { - color: var(--cru-secondary-l1-color); -} - -.cru-text-button.success { - color: var(--cru-success-color); -} - -.cru-text-button.success:hover { - color: var(--cru-success-l1-color); -} - -.cru-text-button.danger { - color: var(--cru-danger-color); -} - -.cru-text-button.danger:hover { - color: var(--cru-danger-l1-color); -} diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx deleted file mode 100644 index 1d8e7a4b..00000000 --- a/FrontEnd/src/views/common/button/TextButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; - -import { CommonButtonProps } from "./common"; -import Button from "./Button"; - -import "./TextButton.css"; - -function _TextButton( - props: CommonButtonProps, - ref: React.ForwardedRef -): React.ReactElement | null { - return ( -