fix(comp: message): align icon with text

IDuxFE · Apr 26, 2022 · adda15d · adda15d
1 parent ac63edf
commit adda15d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/packages/components/message/demo/Content.vue b/packages/components/message/demo/Content.vue
@@ -5,16 +5,14 @@
 <script lang="ts">
 import { defineComponent, h } from 'vue'
 
+import { IxIcon } from '@idux/components/icon'
 import { useMessage } from '@idux/components/message'
 
 export default defineComponent({
   setup() {
     const message = useMessage()
 
-    const content = h('ul', {}, [
-      h('li', {}, 'This is a VNode content data'),
-      h('li', {}, 'This is a VNode content data'),
-    ])
+    const content = h('span', {}, [h('span', {}, 'This is a VNode content '), h(IxIcon, { name: 'star' })])
 
     const open = () => message.info(content)
 

diff --git a/packages/components/message/style/index.less b/packages/components/message/style/index.less
@@ -11,7 +11,7 @@
   line-height: @message-line-height;
 
   &-content {
-    display: inline-flex;
+    display: inline-block;
     min-width: @message-content-min-width;
     max-width: @message-content-max-width;
     padding: @message-content-padding-vertical @message-content-padding-horizontal;
@@ -20,12 +20,11 @@
     box-shadow: @message-content-box-shadow;
     pointer-events: all;
 
-    &-text {
-      display: inline-block;
-      text-align: left;
-    }
-
     &-icon {
+      display: inline-block;
+      position: relative;
+      top: 1px;
+      line-height: 0;
       margin-right: @message-icon-margin-right;
       font-size: @font-size-lg;
     }