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 | 1 | <template> |
| 2 | 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 | 24 | <Alert type="success" show-icon>成功提示文案</Alert> |
| 5 | - <Alert type="warning" show-icon banner>警告提示文案</Alert> | |
| 25 | + <Alert type="warning" show-icon>警告提示文案</Alert> | |
| 6 | 26 | <Alert type="error" show-icon>错误提示文案</Alert> |
| 7 | 27 | <Alert show-icon> |
| 8 | 28 | 消息提示文案 | ... | ... |
src/components/alert/alert.vue
| ... | ... | @@ -80,19 +80,20 @@ |
| 80 | 80 | |
| 81 | 81 | switch (this.type) { |
| 82 | 82 | case 'success': |
| 83 | - type = 'checkmark-circled'; | |
| 83 | + type = 'ios-checkmark'; | |
| 84 | 84 | break; |
| 85 | 85 | case 'info': |
| 86 | - type = 'information-circled'; | |
| 86 | + type = 'ios-information'; | |
| 87 | 87 | break; |
| 88 | 88 | case 'warning': |
| 89 | 89 | type = 'android-alert'; |
| 90 | 90 | break; |
| 91 | 91 | case 'error': |
| 92 | - type = 'close-circled'; | |
| 92 | + type = 'ios-close'; | |
| 93 | 93 | break; |
| 94 | 94 | } |
| 95 | 95 | |
| 96 | + if (this.desc) type += '-outline'; | |
| 96 | 97 | return type; |
| 97 | 98 | } |
| 98 | 99 | }, | ... | ... |
src/styles/components/alert.less
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | .@{alert-prefix-cls}{ |
| 5 | 5 | position: relative; |
| 6 | 6 | padding: 8px 48px 8px 16px; |
| 7 | - border-radius: @border-radius-base; | |
| 7 | + border-radius: @border-radius-small; | |
| 8 | 8 | color: @text-color; |
| 9 | 9 | font-size: @font-size-small; |
| 10 | 10 | line-height: 16px; |
| ... | ... | @@ -15,7 +15,7 @@ |
| 15 | 15 | } |
| 16 | 16 | |
| 17 | 17 | &-icon { |
| 18 | - font-size: @font-size-base; | |
| 18 | + font-size: @font-size-large; | |
| 19 | 19 | top: 8px; |
| 20 | 20 | left: 16px; |
| 21 | 21 | position: absolute; |
| ... | ... | @@ -30,32 +30,36 @@ |
| 30 | 30 | } |
| 31 | 31 | |
| 32 | 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 | 36 | .@{alert-prefix-cls}-icon { |
| 36 | 37 | color: @success-color; |
| 37 | 38 | } |
| 38 | 39 | } |
| 39 | 40 | |
| 40 | 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 | 45 | .@{alert-prefix-cls}-icon { |
| 44 | 46 | color: @primary-color; |
| 45 | 47 | } |
| 46 | 48 | } |
| 47 | 49 | |
| 48 | 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 | 54 | .@{alert-prefix-cls}-icon { |
| 52 | 55 | color: @warning-color; |
| 53 | 56 | } |
| 54 | 57 | } |
| 55 | 58 | |
| 56 | 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 | 63 | .@{alert-prefix-cls}-icon { |
| 60 | 64 | color: @error-color; |
| 61 | 65 | } |
| ... | ... | @@ -68,7 +72,7 @@ |
| 68 | 72 | &-with-desc { |
| 69 | 73 | padding: 16px; |
| 70 | 74 | position: relative; |
| 71 | - border-radius: @border-radius-base; | |
| 75 | + border-radius: @border-radius-small; | |
| 72 | 76 | margin-bottom: 10px; |
| 73 | 77 | color: @text-color; |
| 74 | 78 | line-height: 1.5; | ... | ... |
src/styles/custom.less
| ... | ... | @@ -38,6 +38,8 @@ |
| 38 | 38 | // Border color |
| 39 | 39 | @border-color-base : #dddee1; // outside |
| 40 | 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 | 44 | // Background color |
| 43 | 45 | @background-color-base : #f7f7f7; // base | ... | ... |