Commit 27b03d14f8b0aa7ca421619a27aa068a8535d8c7
1 parent
8390064d
update Alert style
Showing
4 changed files
with
43 additions
and
16 deletions
Show diff stats
examples/routers/alert.vue
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <Alert show-icon banner closable>消息提示文案</Alert> | 3 | + <Alert> |
4 | + An info prompt | ||
5 | + <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template> | ||
6 | + </Alert> | ||
7 | + <Alert type="success"> | ||
8 | + A success prompt | ||
9 | + <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template> | ||
10 | + </Alert> | ||
11 | + <Alert type="warning"> | ||
12 | + A warning prompt | ||
13 | + <template slot="desc"> | ||
14 | + Content of prompt. Content of prompt. Content of prompt. | ||
15 | + </template> | ||
16 | + </Alert> | ||
17 | + <Alert type="error"> | ||
18 | + An error prompt | ||
19 | + <span slot="desc"> | ||
20 | + Custom error description copywriting. <Icon type="help-circled" size="14"></Icon> | ||
21 | + </span> | ||
22 | + </Alert> | ||
23 | + <Alert type="info" show-icon closable>消息提示文案</Alert> | ||
4 | <Alert type="success" show-icon>成功提示文案</Alert> | 24 | <Alert type="success" show-icon>成功提示文案</Alert> |
5 | - <Alert type="warning" show-icon banner>警告提示文案</Alert> | 25 | + <Alert type="warning" show-icon>警告提示文案</Alert> |
6 | <Alert type="error" show-icon>错误提示文案</Alert> | 26 | <Alert type="error" show-icon>错误提示文案</Alert> |
7 | <Alert show-icon> | 27 | <Alert show-icon> |
8 | 消息提示文案 | 28 | 消息提示文案 |
src/components/alert/alert.vue
@@ -80,19 +80,20 @@ | @@ -80,19 +80,20 @@ | ||
80 | 80 | ||
81 | switch (this.type) { | 81 | switch (this.type) { |
82 | case 'success': | 82 | case 'success': |
83 | - type = 'checkmark-circled'; | 83 | + type = 'ios-checkmark'; |
84 | break; | 84 | break; |
85 | case 'info': | 85 | case 'info': |
86 | - type = 'information-circled'; | 86 | + type = 'ios-information'; |
87 | break; | 87 | break; |
88 | case 'warning': | 88 | case 'warning': |
89 | type = 'android-alert'; | 89 | type = 'android-alert'; |
90 | break; | 90 | break; |
91 | case 'error': | 91 | case 'error': |
92 | - type = 'close-circled'; | 92 | + type = 'ios-close'; |
93 | break; | 93 | break; |
94 | } | 94 | } |
95 | 95 | ||
96 | + if (this.desc) type += '-outline'; | ||
96 | return type; | 97 | return type; |
97 | } | 98 | } |
98 | }, | 99 | }, |
src/styles/components/alert.less
@@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
4 | .@{alert-prefix-cls}{ | 4 | .@{alert-prefix-cls}{ |
5 | position: relative; | 5 | position: relative; |
6 | padding: 8px 48px 8px 16px; | 6 | padding: 8px 48px 8px 16px; |
7 | - border-radius: @border-radius-base; | 7 | + border-radius: @border-radius-small; |
8 | color: @text-color; | 8 | color: @text-color; |
9 | font-size: @font-size-small; | 9 | font-size: @font-size-small; |
10 | line-height: 16px; | 10 | line-height: 16px; |
@@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
15 | } | 15 | } |
16 | 16 | ||
17 | &-icon { | 17 | &-icon { |
18 | - font-size: @font-size-base; | 18 | + font-size: @font-size-large; |
19 | top: 8px; | 19 | top: 8px; |
20 | left: 16px; | 20 | left: 16px; |
21 | position: absolute; | 21 | position: absolute; |
@@ -30,32 +30,36 @@ | @@ -30,32 +30,36 @@ | ||
30 | } | 30 | } |
31 | 31 | ||
32 | &-success { | 32 | &-success { |
33 | - border: 1px solid tint(@success-color, 80%); | ||
34 | - background-color: tint(@success-color, 90%); | 33 | + border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`; |
34 | + //background-color: tint(@success-color, 90%); | ||
35 | + background-color: ~`colorPalette("@{success-color}", 1)`; | ||
35 | .@{alert-prefix-cls}-icon { | 36 | .@{alert-prefix-cls}-icon { |
36 | color: @success-color; | 37 | color: @success-color; |
37 | } | 38 | } |
38 | } | 39 | } |
39 | 40 | ||
40 | &-info { | 41 | &-info { |
41 | - border: 1px solid tint(@primary-color, 80%); | ||
42 | - background-color: tint(@primary-color, 90%); | 42 | + border: @border-width-base @border-style-base ~`colorPalette("@{primary-color}", 3)`; |
43 | + //background-color: tint(@primary-color, 90%); | ||
44 | + background-color: ~`colorPalette("@{primary-color}", 1)`; | ||
43 | .@{alert-prefix-cls}-icon { | 45 | .@{alert-prefix-cls}-icon { |
44 | color: @primary-color; | 46 | color: @primary-color; |
45 | } | 47 | } |
46 | } | 48 | } |
47 | 49 | ||
48 | &-warning { | 50 | &-warning { |
49 | - border: 1px solid tint(@warning-color, 80%); | ||
50 | - background-color: tint(@warning-color, 90%); | 51 | + border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`; |
52 | + //background-color: tint(@warning-color, 90%); | ||
53 | + background-color: ~`colorPalette("@{warning-color}", 1)`; | ||
51 | .@{alert-prefix-cls}-icon { | 54 | .@{alert-prefix-cls}-icon { |
52 | color: @warning-color; | 55 | color: @warning-color; |
53 | } | 56 | } |
54 | } | 57 | } |
55 | 58 | ||
56 | &-error { | 59 | &-error { |
57 | - border: 1px solid tint(@error-color, 80%); | ||
58 | - background-color: tint(@error-color, 90%); | 60 | + border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`; |
61 | + //background-color: tint(@error-color, 90%); | ||
62 | + background-color: ~`colorPalette("@{error-color}", 1)`; | ||
59 | .@{alert-prefix-cls}-icon { | 63 | .@{alert-prefix-cls}-icon { |
60 | color: @error-color; | 64 | color: @error-color; |
61 | } | 65 | } |
@@ -68,7 +72,7 @@ | @@ -68,7 +72,7 @@ | ||
68 | &-with-desc { | 72 | &-with-desc { |
69 | padding: 16px; | 73 | padding: 16px; |
70 | position: relative; | 74 | position: relative; |
71 | - border-radius: @border-radius-base; | 75 | + border-radius: @border-radius-small; |
72 | margin-bottom: 10px; | 76 | margin-bottom: 10px; |
73 | color: @text-color; | 77 | color: @text-color; |
74 | line-height: 1.5; | 78 | line-height: 1.5; |
src/styles/custom.less
@@ -38,6 +38,8 @@ | @@ -38,6 +38,8 @@ | ||
38 | // Border color | 38 | // Border color |
39 | @border-color-base : #dddee1; // outside | 39 | @border-color-base : #dddee1; // outside |
40 | @border-color-split : #e9eaec; // inside | 40 | @border-color-split : #e9eaec; // inside |
41 | +@border-width-base : 1px; // width of the border for a component | ||
42 | +@border-style-base : solid; // style of a components border | ||
41 | 43 | ||
42 | // Background color | 44 | // Background color |
43 | @background-color-base : #f7f7f7; // base | 45 | @background-color-base : #f7f7f7; // base |