Notification: fix style when message prop is omitted

packages/notification/src/main.js

@@ -25,7 +25,7 @@ const Notification = function(options) {
 
   if (isVNode(options.message)) {
     instance.$slots.default = [options.message];
-    options.message = '';
+    options.message = 'REPLACED_BY_VNODE';
   }
   instance.id = id;
   instance.vm = instance.$mount();

packages/notification/src/main.vue

@@ -16,7 +16,7 @@
       </i>
       <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
         <h2 class="el-notification__title" v-text="title"></h2>
-        <div class="el-notification__content">
+        <div class="el-notification__content" v-show="message">
           <slot>
             <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
             <p v-else v-html="message"></p>

packages/theme-chalk/src/common/var.scss

@@ -292,7 +292,7 @@ $--message-danger-color: $--color-danger !default;
 -------------------------- */
 $--notification-width: 330px !default;
 $--notification-padding: 14px 26px 14px 13px !default;
-$--notification-raduis: 8px !default;
+$--notification-radius: 8px !default;
 $--notification-shadow: $--box-shadow-light !default;
 $--notification-border-color: $--border-color-lighter !default;
 $--notification-icon-size: 24px !default;

packages/theme-chalk/src/notification.scss

@@ -5,7 +5,7 @@
   display: flex;
   width: $--notification-width;
   padding: $--notification-padding;
-  border-radius: $--notification-raduis;
+  border-radius: $--notification-radius;
   box-sizing: border-box;
   border: 1px solid $--notification-border-color;
   position: fixed;
@@ -49,12 +49,11 @@
     height: $--notification-icon-size;
     width: $--notification-icon-size;
     font-size: $--notification-icon-size;
-    transform: translateY(4px);
   }
 
   @include e(closeBtn) {
     position: absolute;
-    top: 15px;
+    top: 18px;
     right: 15px;
     cursor: pointer;
     color: $--notification-close-color;