From 7b99f9a791e3b194c56ced7b9170174f18cc6309 Mon Sep 17 00:00:00 2001 From: blobt Date: Sat, 2 Jan 2021 23:27:48 +0800 Subject: [PATCH] =?UTF-8?q?button=E6=8F=92=E4=BB=B62?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- src/App.tsx | 4 +- src/components/Button/_style.scss | 64 +++++++++++++++++++++++++++++++ src/styles/_mixin.scss | 33 ++++++++++++++++ src/styles/index.scss | 9 ++++- 5 files changed, 109 insertions(+), 3 deletions(-) create mode 100755 src/components/Button/_style.scss create mode 100755 src/styles/_mixin.scss diff --git a/.eslintcache b/.eslintcache index da5a144..f6331d5 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx":"6"},{"size":508,"mtime":1609414907652,"results":"7","hashOfConfig":"8"},{"size":425,"mtime":1608882568140,"results":"9","hashOfConfig":"8"},{"size":425,"mtime":1609589147292,"results":"10","hashOfConfig":"8"},{"size":535,"mtime":1608965352064,"results":"11","hashOfConfig":"8"},{"size":485,"mtime":1608970157307,"results":"12","hashOfConfig":"8"},{"size":1301,"mtime":1609588234575,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"46l3t",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["28","29"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],["30","31"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["32","33"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"34","replacedBy":"38"},{"ruleId":"36","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12},{"ruleId":"40","severity":1,"message":"43","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12,"suggestions":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],["45"],["46"],"react-hooks/exhaustive-deps","React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["47"],"no-global-assign","no-unsafe-negation",{"desc":"48","fix":"49"},"Update the dependencies array to be: [url]",{"range":"50","text":"51"},[415,419],"[url]"] \ No newline at end of file +[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx":"6"},{"size":508,"mtime":1609414907652,"results":"7","hashOfConfig":"8"},{"size":425,"mtime":1608882568140,"results":"9","hashOfConfig":"8"},{"size":570,"mtime":1609600603207,"results":"10","hashOfConfig":"8"},{"size":535,"mtime":1608965352064,"results":"11","hashOfConfig":"8"},{"size":485,"mtime":1608970157307,"results":"12","hashOfConfig":"8"},{"size":1301,"mtime":1609588234575,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"46l3t",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["28","29"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],["30","31"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["32","33"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"34","replacedBy":"38"},{"ruleId":"36","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12},{"ruleId":"40","severity":1,"message":"43","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12,"suggestions":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],["45"],["46"],"react-hooks/exhaustive-deps","React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["47"],"no-global-assign","no-unsafe-negation",{"desc":"48","fix":"49"},"Update the dependencies array to be: [url]",{"range":"50","text":"51"},[415,419],"[url]"] \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 0383556..29b64de 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,8 +4,10 @@ import Button, { ButtonType, ButtonSize } from './components/Button/button'; const App: React.FC = () => { return (
- + + +
); diff --git a/src/components/Button/_style.scss b/src/components/Button/_style.scss new file mode 100755 index 0000000..fd06256 --- /dev/null +++ b/src/components/Button/_style.scss @@ -0,0 +1,64 @@ +.btn { + position: relative; + display: inline-block; + font-weight: $btn-font-weight; + line-height: $btn-line-height; + color: $body-color; + white-space: nowrap; + text-align: center; + vertical-align: middle; + background-image: none; + border: $btn-border-width solid transparent; + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $border-radius); + box-shadow: $btn-box-shadow; + cursor: pointer; + transition: $btn-transition; + &.disabled, + &[disabled] { + cursor: not-allowed; + opacity: $btn-disabled-opacity; + box-shadow: none; + > * { + pointer-events: none; + } + } +} + +.btn-lg { + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $border-radius-lg); +} + +.btn-sm { + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $border-radius-sm); +} + +.btn-primary { + @include button-style($primary, $primary, $white); +} + +.btn-danger { + @include button-style($danger, $danger, $white); +} + +.btn-default { + @include button-style($white, $gray-400, $body-color, $white, $primary,$primary ); +} + +.btn-link { + font-weight: $font-weight-normal; + color: $btn-link-color; + text-decoration: $link-decoration; + box-shadow: none; + &:hover { + color: $btn-link-hover-color; + text-decoration: $link-hover-decoration; + } + &:focus,&.focus{ + text-decoration: $link-hover-decoration; + box-shadow: none; + } + &:disable,&.disable{ + color: $btn-link-disabled-color; + pointer-events: none; + } +} \ No newline at end of file diff --git a/src/styles/_mixin.scss b/src/styles/_mixin.scss new file mode 100755 index 0000000..615b405 --- /dev/null +++ b/src/styles/_mixin.scss @@ -0,0 +1,33 @@ +@mixin button-size($padding-y, $padding-x, $front-size, $border-radius) { + padding: $padding-y $padding-x; + font-size: $front-size; + border-radius: $border-radius; +} + +@mixin button-style( + $background, + $border, + $color, + $hover-background: lighten($background, 7.5%), + $hover-border: lighten($border, 10%), + $hover-color: $color +) { + color: $color; + background: $background; + border-color: $border; + &:hover { + color: $hover-color; + background: $hover-background; + border-color: $hover-border; + } + &:hover,&.focus { + color: $hover-color; + background: $hover-background; + border-color: $hover-border; + } + &:disabled,&.disabled { + color: $color; + background: $background; + border-color: $border; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index bb2296d..5bb67e6 100755 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,4 +2,11 @@ @import "variables"; //layout -@import "reboot"; \ No newline at end of file +@import "reboot"; + + +//mixin +@import "mixin"; + +//button +@import "../components/Button/style"; \ No newline at end of file