From 1de30ddbb72ff273fd802da0c832ec1311ed6498 Mon Sep 17 00:00:00 2001 From: zy19940510 Date: Thu, 29 Oct 2020 18:03:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20button=E5=8A=9F=E8=83=BD=E5=AE=8C?= =?UTF-8?q?=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .editorconfig | 12 ++++++++++++ src/packages/button/demo.vue | 30 +++++++++++++++++++++++------- src/packages/button/index.scss | 21 ++++++++++++++++----- src/packages/button/index.vue | 4 +++- src/styles/variables.scss | 21 ++++++++++++++------- 5 files changed, 68 insertions(+), 20 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..b3986732e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = false + +[*.md] +trim_trailing_whitespace = false diff --git a/src/packages/button/demo.vue b/src/packages/button/demo.vue index d060bbbbd..4b0d5cf96 100644 --- a/src/packages/button/demo.vue +++ b/src/packages/button/demo.vue @@ -11,20 +11,36 @@ 警告按钮 成功按钮 -
边框按钮
- +
朴素按钮
+
+ 朴素按钮 + 朴素按钮 +
禁用状态
- +
+ 禁用状态 + 禁用状态 + 禁用状态 +
按钮形状
- +
+ 方形按钮 + 圆形按钮 +
加载状态
图标按钮
按钮尺寸
- 通栏按钮 - 普通按钮 - 小型按钮 +
+
+ 通栏按钮 +
+
+ 普通按钮 + 小型按钮 +
+
diff --git a/src/packages/button/index.scss b/src/packages/button/index.scss index f7aaebbae..5251c0a25 100644 --- a/src/packages/button/index.scss +++ b/src/packages/button/index.scss @@ -74,28 +74,38 @@ } &--plain { - background-color: $button-plain-background-color; + background: $button-plain-background-color; &.nut-button--primary { - color: $button-primary-background-color; + color: $button-primary-border-color; + border-color: $button-primary-border-color; + } + + &.nut-button--info { + color: $button-info-border-color; + border-color: $button-info-border-color; } &.nut-button--success { - color: $button-success-background-color; + color: $button-success-border-color; + border-color: $button-success-border-color; } &.nut-button--danger { - color: $button-danger-background-color; + color: $button-danger-border-color; + border-color: $button-danger-border-color; } &.nut-button--warning { - color: $button-warning-background-color; + color: $button-warning-border-color; + border-color: $button-warning-border-color; } } &--large { width: 100%; height: $button-large-height; + line-height: $button-large-line-height; } &--normal { @@ -105,6 +115,7 @@ &--small { height: $button-small-height; + line-height: $button-small-line-height; padding: 0 $padding-xs; font-size: $font-size-1; } diff --git a/src/packages/button/index.vue b/src/packages/button/index.vue index b7d20936c..4c824cdb6 100644 --- a/src/packages/button/index.vue +++ b/src/packages/button/index.vue @@ -65,7 +65,9 @@ export default createComponent('button')({ [`${prefixCls}--${type.value}`]: type.value, [`${prefixCls}--${size.value}`]: size.value, [`${prefixCls}--${shape.value}`]: shape.value, - [`${prefixCls}--block`]: block.value + [`${prefixCls}--plain`]: plain.value, + [`${prefixCls}--block`]: block.value, + [`${prefixCls}--disabled`]: disabled.value }; }); diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 1bef270a0..b5d987da3 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -27,18 +27,21 @@ $font-weight-bold: 400; // button $button-border-radius: 25px; $button-border-width: 1px; -$button-default-bg-color: #fff; +$button-default-bg-color: $white; $button-default-border-color: rgba(204, 204, 204, 1); $button-default-color: rgba(102, 102, 102, 1); $button-small-height: 28px; $button-default-height: 38px; $button-large-height: 48px; +$button-large-line-height: 46px; +$button-small-line-height: 26px; $button-block-height: 48px; $button-default-line-height: 36px; $button-block-line-height: 46px; $button-default-font-size: $font-size-2; $button-disabled-opacity: 0.68; -$button-primary-color: #fff; +$button-primary-color: $white; +$button-primary-border-color: rgba(250, 44, 25, 1); $button-primary-background-color: linear-gradient( 135deg, rgba(250, 44, 25, 1) 0%, @@ -46,9 +49,11 @@ $button-primary-background-color: linear-gradient( rgba(250, 89, 25, 1) 83%, rgba(250, 100, 25, 1) 100% ); -$button-info-color: #fff; +$button-info-color: $white; +$button-info-border-color: rgba(73, 106, 242, 1); $button-info-background-color: linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%); -$button-success-color: #fff; +$button-success-color: $white; +$button-success-border-color: rgba(38, 191, 38, 1); $button-success-background-color: linear-gradient( 135deg, rgba(38, 191, 38, 1) 0%, @@ -57,9 +62,11 @@ $button-success-background-color: linear-gradient( rgba(41, 212, 70, 1) 100% ); -$button-danger-color: #fff; +$button-danger-color: $white; +$button-danger-border-color: rgba(250, 44, 25, 1); $button-danger-background-color: rgba(250, 44, 25, 1); -$button-warning-color: #fff; +$button-warning-color: $white; +$button-warning-border-color: rgba(255, 158, 13, 1); $button-warning-background-color: linear-gradient( 135deg, rgba(255, 158, 13, 1) 0%, @@ -67,4 +74,4 @@ $button-warning-background-color: linear-gradient( rgba(255, 182, 13, 1) 83%, rgba(255, 190, 13, 1) 100% ); -$button-plain-background-color: #fff; +$button-plain-background-color: $white; -- GitLab