From 27b03d14f8b0aa7ca421619a27aa068a8535d8c7 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Mon, 25 Jun 2018 10:10:18 +0800
Subject: [PATCH] update Alert style

---
 examples/routers/alert.vue       | 24 ++++++++++++++++++++++--
 src/components/alert/alert.vue   |  7 ++++---
 src/styles/components/alert.less | 26 +++++++++++++++-----------
 src/styles/custom.less           |  2 ++
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/examples/routers/alert.vue b/examples/routers/alert.vue
index 2f35647..6abee49 100644
--- a/examples/routers/alert.vue
+++ b/examples/routers/alert.vue
@@ -1,8 +1,28 @@
 <template>
     <div>
-        <Alert show-icon banner closable>消息提示文案</Alert>
+        <Alert>
+            An info prompt
+            <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
+        </Alert>
+        <Alert type="success">
+            A success prompt
+            <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
+        </Alert>
+        <Alert type="warning">
+            A warning prompt
+            <template slot="desc">
+            Content of prompt. Content of prompt. Content of prompt.
+        </template>
+        </Alert>
+        <Alert type="error">
+            An error prompt
+            <span slot="desc">
+            Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
+        </span>
+        </Alert>
+        <Alert type="info" show-icon closable>消息提示文案</Alert>
         <Alert type="success" show-icon>成功提示文案</Alert>
-        <Alert type="warning" show-icon banner>警告提示文案</Alert>
+        <Alert type="warning" show-icon>警告提示文案</Alert>
         <Alert type="error" show-icon>错误提示文案</Alert>
         <Alert show-icon>
             消息提示文案
diff --git a/src/components/alert/alert.vue b/src/components/alert/alert.vue
index 981a59f..015877c 100644
--- a/src/components/alert/alert.vue
+++ b/src/components/alert/alert.vue
@@ -80,19 +80,20 @@
 
                 switch (this.type) {
                     case 'success':
-                        type = 'checkmark-circled';
+                        type = 'ios-checkmark';
                         break;
                     case 'info':
-                        type = 'information-circled';
+                        type = 'ios-information';
                         break;
                     case 'warning':
                         type = 'android-alert';
                         break;
                     case 'error':
-                        type = 'close-circled';
+                        type = 'ios-close';
                         break;
                 }
 
+                if (this.desc) type += '-outline';
                 return type;
             }
         },
diff --git a/src/styles/components/alert.less b/src/styles/components/alert.less
index 15b9f99..b9f6efa 100644
--- a/src/styles/components/alert.less
+++ b/src/styles/components/alert.less
@@ -4,7 +4,7 @@
 .@{alert-prefix-cls}{
     position: relative;
     padding: 8px 48px 8px 16px;
-    border-radius: @border-radius-base;
+    border-radius: @border-radius-small;
     color: @text-color;
     font-size: @font-size-small;
     line-height: 16px;
@@ -15,7 +15,7 @@
     }
 
     &-icon {
-        font-size: @font-size-base;
+        font-size: @font-size-large;
         top: 8px;
         left: 16px;
         position: absolute;
@@ -30,32 +30,36 @@
     }
 
     &-success {
-        border: 1px solid tint(@success-color, 80%);
-        background-color: tint(@success-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
+        //background-color: tint(@success-color, 90%);
+        background-color: ~`colorPalette("@{success-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @success-color;
         }
     }
 
     &-info {
-        border: 1px solid tint(@primary-color, 80%);
-        background-color: tint(@primary-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{primary-color}", 3)`;
+        //background-color: tint(@primary-color, 90%);
+        background-color: ~`colorPalette("@{primary-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @primary-color;
         }
     }
 
     &-warning {
-        border: 1px solid tint(@warning-color, 80%);
-        background-color: tint(@warning-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
+        //background-color: tint(@warning-color, 90%);
+        background-color: ~`colorPalette("@{warning-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @warning-color;
         }
     }
 
     &-error {
-        border: 1px solid tint(@error-color, 80%);
-        background-color: tint(@error-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
+        //background-color: tint(@error-color, 90%);
+        background-color: ~`colorPalette("@{error-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @error-color;
         }
@@ -68,7 +72,7 @@
     &-with-desc {
         padding: 16px;
         position: relative;
-        border-radius: @border-radius-base;
+        border-radius: @border-radius-small;
         margin-bottom: 10px;
         color: @text-color;
         line-height: 1.5;
diff --git a/src/styles/custom.less b/src/styles/custom.less
index b2dd4ee..eff7238 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -38,6 +38,8 @@
 // Border color
 @border-color-base      : #dddee1;  // outside
 @border-color-split     : #e9eaec;  // inside
+@border-width-base      : 1px;            // width of the border for a component
+@border-style-base      : solid;          // style of a components border
 
 // Background color
 @background-color-base        : #f7f7f7;  // base
--
libgit2 0.21.4