Commit 27b03d14f8b0aa7ca421619a27aa068a8535d8c7

Authored by 梁灏
1 parent 8390064d

update Alert style

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