diff --git a/examples/app.vue b/examples/app.vue index 32dfc3656..5564b70f8 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -110,7 +110,7 @@ margin-top: 20px; code { - background-color: rgba(#fff, .7); + background-color: rgba(255, 255, 255, .7); color: #445368; } } @@ -143,7 +143,7 @@ } code { - background-color: rgba(#fff, .7); + background-color: rgba(255, 255, 255, .7); color: #445368; } } diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md index 6e968149a..e85e60771 100644 --- a/examples/docs/en-US/button.md +++ b/examples/docs/en-US/button.md @@ -103,10 +103,10 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa :::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `` tag. Custom icons can be used as well. ```html - - - -Search + + + +Search Upload ``` ::: @@ -119,13 +119,13 @@ Displayed as a button group, can be used to group a series of similar operations ```html - Previous Page + Previous Page Next Page - - - + + + ``` ::: @@ -172,6 +172,6 @@ Besides default size, Button component provides three additional sizes for you t | round | determine whether it's a round button | boolean | — | false | | loading | determine whether it's loading | boolean | — | false | | disabled | disable the button | boolean | — | false | -| icon | button icon, accepts an icon name of Element icon component | string | — | — | +| icon | icon class name | string | — | — | | autofocus | same as native button's `autofocus` | boolean | — | false | | native-type | same as native button's `type` | string | button / submit / reset | button | \ No newline at end of file diff --git a/examples/docs/en-US/color.md b/examples/docs/en-US/color.md index bb7717b02..5ecc0bec4 100644 --- a/examples/docs/en-US/color.md +++ b/examples/docs/en-US/color.md @@ -24,15 +24,8 @@ border-radius: 0 0 4px 4px; } } - .bg-blue-light { - background-color: #58b7ff; - } - .bg-blue, - .bg-info { - background-color: #20a0ff; - } - .bg-blue-dark { - background-color: #1d8ce0; + .bg-blue { + background-color: #1989fa; } .bg-success { @@ -44,43 +37,38 @@ .bg-danger { background-color: #ff4949; } - - .bg-black { - background-color: #1f2d3d; - } - .bg-black-light { - background-color: #324057; - } - .bg-black-lighter { - background-color: #475669; + .bg-info { + background-color: #878D99; } - .bg-silver { - background-color: #8492a6; + .bg-text-primary { + background-color: #2d2f33; } - .bg-silver-light { - background-color: #99a9bf; + .bg-text-regular { + background-color: #5a5e66; } - .bg-silver-lighter { - background-color: #c0ccda; + .bg-text-secondary { + background-color: #878d99; + } + .bg-text-placeholder { + background-color: #b4bccc; } - .bg-gray { - background-color: #d3dce6; + .bg-border-base { + background-color: #d8dce6; } - .bg-gray-light { - background-color: #e5e9f2; + .bg-border-light { + background-color: #dfe4ed; } - .bg-gray-lighter { - background-color: #eff2f7; + .bg-border-lighter { + background-color: #e6ebf5; + } + .bg-border-extra-light { + background-color: #edf2fc; } - .bg-white-dark { - background-color: #f9fafc; - } - - .color-gray { - color: #5e6d82; + [class*=" bg-border-"] { + color: #5a5e66; } @@ -92,14 +80,8 @@ Element uses a specific set of palettes to specify colors to provide a consisten The main color of Element is bright and friendly blue. - -
Light Blue
#58B7FF
- - -
Blue
#20A0FF
- - -
Dark Blue
#1D8CE0
+ +
Blue
#1989FA
 @@ -109,16 +91,16 @@ Besides the main color, you need to use different scene colors in different scen -
Blue
#20A0FF
+
Success
#67C23A
 -
Success
#13CE66
+
Warning
#EB9E05
 -
Warning
#F7BA2A
+
Danger
#FA5555
 -
Danger
#FF4949
+
Info
#878D99
 @@ -129,29 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
-
Black
#1F2D3D
-
Light Black
#324057
-
Extra Light Black
#475669
+
Primary Text
#2D2F33
+
Regular Text
#5A5E66
+
Secondary Text
#878D99
+
Placeholder Text
#B4BCCC
-
Silver
#8492A6
-
Light Silver
#99A9BF
-
Extra Light Silver
#C0CCDA
-
- - -
-
Gray
#D3DCE6
-
Light Gray
#E5E9F2
-
Extra Light Gray
#EFF2F7
-
- - -
-
Dark White
#F9FAFC
-
White
#FFFFFF
+
Base Border
#D8DCE6
+
Light Border
#DFE4ED
+
Lighter Border
#E6EBF5
+
Extra Light Border
#EDF2FC
 \ No newline at end of file diff --git a/examples/docs/en-US/icon.md b/examples/docs/en-US/icon.md index db92dd76c..177e3396a 100644 --- a/examples/docs/en-US/icon.md +++ b/examples/docs/en-US/icon.md @@ -22,7 +22,7 @@ margin: 0 20px; } - .icon-list { + .page-component .content > ul.icon-list { overflow: hidden; list-style: none; padding: 0; diff --git a/examples/docs/zh-CN/button.md b/examples/docs/zh-CN/button.md index 93f0a3ede..6374818fe 100644 --- a/examples/docs/zh-CN/button.md +++ b/examples/docs/zh-CN/button.md @@ -104,10 +104,10 @@ :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。 ```html - - - -搜索 + + + +搜索 上传 ``` ::: @@ -120,13 +120,13 @@ ```html - 上一页 + 上一页 下一页 - - - + + + ``` ::: @@ -173,6 +173,6 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 | round | 是否圆形按钮 | boolean | — | false | | loading | 是否加载中状态 | boolean | — | false | | disabled | 是否禁用状态 | boolean | — | false | -| icon | 图标，已有的图标库中的图标名 | string | — | — | +| icon | 图标类名 | string | — | — | | autofocus | 是否默认聚焦 | boolean | — | false | | native-type | 原生 type 属性 | string | button / submit / reset | button | diff --git a/examples/docs/zh-CN/color.md b/examples/docs/zh-CN/color.md index 7a50c649a..b63c61aaf 100644 --- a/examples/docs/zh-CN/color.md +++ b/examples/docs/zh-CN/color.md @@ -24,63 +24,51 @@ border-radius: 0 0 4px 4px; } } - .bg-blue-light { - background-color: #58b7ff; - } - .bg-blue, - .bg-info { - background-color: #20a0ff; - } - .bg-blue-dark { - background-color: #1d8ce0; + .bg-blue { + background-color: #1989fa; } .bg-success { - background-color: #13CE66; + background-color: #67C23A; } .bg-warning { - background-color: #f7ba2a; + background-color: #EB9E05; } .bg-danger { - background-color: #ff4949; + background-color: #FA5555; + } + .bg-info { + background-color: #878D99; } - .bg-black { - background-color: #1f2d3d; + .bg-text-primary { + background-color: #2d2f33; } - .bg-black-light { - background-color: #324057; + .bg-text-regular { + background-color: #5a5e66; } - .bg-black-lighter { - background-color: #475669; + .bg-text-secondary { + background-color: #878d99; + } + .bg-text-placeholder { + background-color: #b4bccc; } - .bg-silver { - background-color: #8492a6; + .bg-border-base { + background-color: #d8dce6; } - .bg-silver-light { - background-color: #99a9bf; + .bg-border-light { + background-color: #dfe4ed; } - .bg-silver-lighter { - background-color: #c0ccda; + .bg-border-lighter { + background-color: #e6ebf5; + } + .bg-border-extra-light { + background-color: #edf2fc; } - .bg-gray { - background-color: #d3dce6; - } - .bg-gray-light { - background-color: #e5e9f2; - } - .bg-gray-lighter { - background-color: #eff2f7; - } - - .bg-white-dark { - background-color: #f9fafc; - } - - .color-gray { - color: #5e6d82; + [class*=" bg-border-"] { + color: #5a5e66; } @@ -93,14 +81,8 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定 Element 主要品牌颜色是鲜艳、友好的蓝色。 - -
Light Blue
#58B7FF
- - -
Blue
#20A0FF
- - -
Dark Blue
#1D8CE0
+ +
Blue
#1989FA
 @@ -110,16 +92,16 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。 -
Blue
#20A0FF
+
Success
#67C23A
 -
Success
#13CE66
+
Warning
#EB9E05
 -
Warning
#F7BA2A
+
Danger
#FA5555
 -
Danger
#FF4949
+
Info
#878D99
 @@ -130,29 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
-
Black
#1F2D3D
-
Light Black
#324057
-
Extra Light Black
#475669
+
主要文字
#2D2F33
+
常规文字
#5A5E66
+
次要文字
#878D99
+
占位文字
#B4BCCC
-
Silver
#8492A6
-
Light Silver
#99A9BF
-
Extra Light Silver
#C0CCDA
-
- - -
-
Gray
#D3DCE6
-
Light Gray
#E5E9F2
-
Extra Light Gray
#EFF2F7
-
- - -
-
Dark White
#F9FAFC
-
White
#FFFFFF
+
一级边框
#D8DCE6
+
二级边框
#DFE4ED
+
三级边框
#E6EBF5
+
四级边框
#EDF2FC
 diff --git a/examples/docs/zh-CN/icon.md b/examples/docs/zh-CN/icon.md index e8e7f0038..b67797481 100644 --- a/examples/docs/zh-CN/icon.md +++ b/examples/docs/zh-CN/icon.md @@ -21,7 +21,7 @@ margin: 0 20px; } - .icon-list { + .page-component .content > ul.icon-list { overflow: hidden; list-style: none; padding: 0; diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue index 2bc7d3fde..df454d0cf 100644 --- a/packages/button/src/button.vue +++ b/packages/button/src/button.vue @@ -16,7 +16,7 @@ ]" > - + diff --git a/test/unit/specs/button.spec.js b/test/unit/specs/button.spec.js index e74dbc33e..0a6e89891 100644 --- a/test/unit/specs/button.spec.js +++ b/test/unit/specs/button.spec.js @@ -16,7 +16,7 @@ describe('Button', () => { }); it('icon', () => { vm = createTest(Button, { - icon: 'search' + icon: 'el-icon-search' }, true); let buttonElm = vm.$el; expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;