From 1f0b41ec20b3a41ac89c21c5196a43f48de76aa9 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 2 Oct 2018 17:24:33 +0800 Subject: [PATCH] [improvement] Button: update disabled style (#1886) --- packages/button/demo/index.vue | 61 +++++++++---------- packages/button/en-US.md | 51 ++++++++-------- .../test/__snapshots__/demo.spec.js.snap | 41 ++++++------- packages/button/zh-CN.md | 51 ++++++++-------- packages/vant-css/src/button.css | 6 +- packages/vant-css/src/common/var.css | 7 +-- 6 files changed, 102 insertions(+), 115 deletions(-) diff --git a/packages/button/demo/index.vue b/packages/button/demo/index.vue index 7b490bd2e..df6ff9001 100644 --- a/packages/button/demo/index.vue +++ b/packages/button/demo/index.vue @@ -1,43 +1,40 @@ @@ -45,10 +42,10 @@ export default { i18n: { 'zh-CN': { - title1: '按钮类型', - title2: '按钮尺寸', - title3: '加载状态', - title4: '按钮形状', + type: '按钮类型', + size: '按钮尺寸', + loading: '加载状态', + shape: '按钮形状', default: '默认按钮', primary: '主要按钮', danger: '危险按钮', @@ -62,10 +59,10 @@ export default { round: '圆形按钮' }, 'en-US': { - title1: 'Type', - title2: 'Size', - title3: 'Loading', - title4: 'Shape', + type: 'Type', + size: 'Size', + loading: 'Loading', + shape: 'Shape', default: 'Default', primary: 'Primary', danger: 'Danger', diff --git a/packages/button/en-US.md b/packages/button/en-US.md index 4ed14ed27..3a4e337ec 100644 --- a/packages/button/en-US.md +++ b/packages/button/en-US.md @@ -12,19 +12,38 @@ Vue.use(Button); #### Type ```html -Default Primary -Warning Danger +Default +Warning ``` #### Plain ```html -Default -Primary -Warning -Danger +Primary +Danger +``` + +#### Disabled + +```html +Diabled +Diabled +``` + +#### Loading + +```html + + +``` + +#### Shape + +```html +Square +Round ``` #### Size @@ -36,26 +55,6 @@ Vue.use(Button); Mini ``` -#### Disabled - -```html -Diabled -``` - -#### Loading - -```html - - -``` - -#### Shape - -```html -Square -Round -``` - ### API | Attribute | Description | Type | Default | diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap index 49c5e5f40..1a6fa580a 100644 --- a/packages/button/test/__snapshots__/demo.spec.js.snap +++ b/packages/button/test/__snapshots__/demo.spec.js.snap @@ -4,40 +4,37 @@ exports[`renders demo correctly 1`] = `
- +
+ -
-
- - -
- +
+
+ + +
+
+ + +
+
+ + +
-
- -
-
- - -
-
- - -
`; diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md index 1e21c7ab5..d6856350b 100644 --- a/packages/button/zh-CN.md +++ b/packages/button/zh-CN.md @@ -22,10 +22,31 @@ Vue.use(Button); #### 朴素按钮 ```html -默认按钮 -主要按钮 -警告按钮 -危险按钮 +主要按钮 +危险按钮 +``` + +#### 禁用状态 + +通过`disabled`属性来禁用按钮，此时按钮不可点击 + +```html +禁用状态 +禁用状态 +``` + +#### 加载状态 + +```html + + +``` + +#### 按钮形状 + +```html +方形按钮 +圆形按钮 ``` #### 按钮尺寸 @@ -38,28 +59,6 @@ Vue.use(Button); 迷你按钮 ``` -#### 禁用状态 - -通过`disabled`属性来禁用按钮，此时按钮不可点击 - -```html -禁用状态 -``` - -#### 加载状态 - -```html - - -``` - -#### 按钮形状 - -```html -方形按钮 -圆形按钮 -``` - ### API diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css index 2b6c6d2c9..ef1cf7019 100644 --- a/packages/vant-css/src/button.css +++ b/packages/vant-css/src/button.css @@ -6,7 +6,7 @@ display: inline-block; height: 44px; line-height: 42px; - border-radius: 3px; + border-radius: 2px; box-sizing: border-box; font-size: 16px; text-align: center; @@ -135,9 +135,7 @@ } &--disabled { - color: $button-disabled-color; - background-color: $button-disabled-background-color; - border: 1px solid $button-disabled-border-color; + opacity: .5; } &--round { diff --git a/packages/vant-css/src/common/var.css b/packages/vant-css/src/common/var.css index bfddf7d70..323598418 100644 --- a/packages/vant-css/src/common/var.css +++ b/packages/vant-css/src/common/var.css @@ -3,7 +3,7 @@ $black: #000; $white: #fff; $red: #f44; $blue: #38f; -$orange: #f85; +$orange: #ff976a; $green: #06bf04; $gray: #c9c9c9; $gray-light: #e5e5e5; @@ -29,10 +29,7 @@ $button-danger-border-color: $red; $button-warning-color: $white; $button-warning-background-color: $orange; $button-warning-border-color: $orange; -$button-disabled-color: $gray-dark; -$button-disabled-background-color: $active-color; -$button-disabled-border-color: $border-color; $button-bottom-action-default-color: $white; -$button-bottom-action-default-background-color: #f85; +$button-bottom-action-default-background-color: $orange; $button-bottom-action-primary-color: $white; $button-bottom-action-primary-background-color: $red;