optimize Notice style when without desc

optimize Notice style when without desc

src/components/base/notification/notice.vue

@@ -47,6 +47,11 @@
                 type: String
             }
         },
+        data () {
+            return {
+                withDesc: false
+            }
+        },
         computed: {
             baseClass () {
                 return `${this.prefixCls}-notice`;
@@ -56,7 +61,8 @@
                     this.baseClass,
                     {
                         [`${this.className}`]: !!this.className,
-                        [`${this.baseClass}-closable`]: this.closable
+                        [`${this.baseClass}-closable`]: this.closable,
+                        [`${this.baseClass}-with-desc`]: this.withDesc
                     }
                 ]
             },
@@ -85,6 +91,11 @@
                     this.close();
                 }, this.duration * 1000)
             }
+
+            // check if with desc in Notice component
+            if (this.prefixCls === 'ivu-notice') {
+                this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
+            }
         },
         beforeDestroy () {
             this.clearCloseTimer();

src/components/notice/index.js

@@ -42,9 +42,11 @@ function notice (type, options) {
 
     let content;
 
+    const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
+
     if (type == 'normal') {
         content = `
-            <div class="${prefixCls}-custom-content">
+            <div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
                 <div class="${prefixCls}-title">${title}</div>
                 <div class="${prefixCls}-desc">${desc}</div>
             </div>
@@ -52,7 +54,7 @@ function notice (type, options) {
     } else {
         const iconType = iconTypes[type];
         content = `
-            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon">
+            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
                 <span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
                     <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
                 </span>

src/styles/components/notice.less

@@ -6,26 +6,26 @@
 @notice-margin-bottom: 10px;
 
 .@{notice-prefix-cls} {
-    position: fixed;
-    z-index: @zindex-notification;
     width: @notice-width;
     margin-right: 24px;
+    position: fixed;
+    z-index: @zindex-notification;
 
     &-notice {
-        padding: @notice-padding;
-        border-radius: @border-radius-base;
-        box-shadow: @shadow-base;
-        border: 1px solid @border-color-base;
-        background: #fff;
-        line-height: 1.5;
-        position: relative;
         margin-bottom: @notice-margin-bottom;
+        padding: @notice-padding;
+        border: 1px solid @border-color-split;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+        background: #fff;
+        line-height: 1;
+        position: relative;
         overflow: hidden;
 
         &-close {
             position: absolute;
             right: 16px;
-            top: 10px;
+            top: 15px;
             color: #999;
             outline: none;
 
@@ -33,35 +33,48 @@
                 .close-base(-3px);
             }
         }
+
+        &-with-desc{
+            .@{notice-prefix-cls}-notice-close{
+                top: 11px;
+            }
+        }
     }
 
     &-title {
         font-size: @font-size-base;
-        color: @text-color;
-        margin-bottom: 4px;
+        color: @title-color;
+        padding-right: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    &-with-desc &-title{
+        margin-bottom: 8px;
+    }
+    &-with-desc&-with-icon &-title{
+        margin-left: 51px;
     }
 
     &-desc {
         font-size: 12px;
         color: @legend-color;
         text-align: justify;
+        line-height: 1.5;
+    }
+    &-with-desc&-with-icon &-desc{
+        margin-left: 51px;
     }
 
     &-with-icon &-title{
-        margin-left: 51px;
-        margin-bottom: 4px;
-    }
-
-    &-with-icon  &-desc {
-        margin-left: 51px;
+        margin-left: 26px;
     }
 
     &-icon {
         position: absolute;
-        left: 21px;
-        top: 50%;
-        margin-top: -21px;
-        font-size: 28px;
+        left: 20px;
+        margin-top: -1px;
+        font-size: 16px;
 
         &-success {
             color: @success-color;
@@ -76,4 +89,44 @@
             color: @error-color;
         }
     }
+    &-with-desc &-icon{
+        font-size: 36px;
+    }
+
+    &-custom-content{
+        &:after{
+            content: "";
+            display: block;
+            width: 4px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+        }
+    }
+    &-with-normal{
+        &:after{
+            background: @primary-color;
+        }
+    }
+    &-with-info{
+        &:after{
+            background: @primary-color;
+        }
+    }
+    &-with-success{
+        &:after{
+            background: @success-color;
+        }
+    }
+    &-with-warning{
+        &:after{
+            background: @warning-color;
+        }
+    }
+    &-with-error{
+        &:after{
+            background: @error-color;
+        }
+    }
 }