MessageBox: fix icon position error (ElemeFE#17410)

nullptru · lzq4047 · commit 5ed7fb454107 · 2020-05-22T14:08:24.000+08:00
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
@@ -28,15 +28,17 @@
           </button>
         </div>
         <div class="el-message-box__content">
-          <div
-            :class="['el-message-box__status', icon]"
-            v-if="icon && !center && message !== ''">
-          </div>
-          <div class="el-message-box__message" v-if="message !== ''">
-            <slot>
-              <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
-              <p v-else v-html="message"></p>
-            </slot>
+          <div class="el-message-box__container">
+            <div
+              :class="['el-message-box__status', icon]"
+              v-if="icon && !center && message !== ''">
+            </div>
+            <div class="el-message-box__message" v-if="message !== ''">
+              <slot>
+                <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+                <p v-else v-html="message"></p>
+              </slot>
+            </div>
           </div>
           <div class="el-message-box__input" v-show="showInput">
             <el-input
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
@@ -73,11 +73,14 @@
   }
 
   @include e(content) {
-    position: relative;
     padding: 10px $--msgbox-padding-primary;
     color: $--messagebox-content-color;
     font-size: $--messagebox-content-font-size;
   }
+  
+  @include e(container) {
+    position: relative;
+  }
 
   @include e(input) {
     padding-top: 15px;

Original file line number	Diff line number	Diff line change
`@@ -73,11 +73,14 @@`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`@include e(content) {`
`76`		`- position: relative;`
`77`	`76`	`padding: 10px $--msgbox-padding-primary;`
`78`	`77`	`color: $--messagebox-content-color;`
`79`	`78`	`font-size: $--messagebox-content-font-size;`
`80`	`79`	`}`
	`80`	`+`
	`81`	`+ @include e(container) {`
	`82`	`+ position: relative;`
	`83`	`+ }`
`81`	`84`
`82`	`85`	`@include e(input) {`
`83`	`86`	`padding-top: 15px;`