fix(alert): 修复Alert有description没有icon时样式异常的问题

Yoshino-UI · Jun 24, 2018 · 949b32f · 949b32f
1 parent c5b4175
commit 949b32f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx
@@ -112,12 +112,14 @@ export class Alert extends Component<IAlertProps, IAlertState> {
             <span style={{display: showIcon ? 'inline-block' : 'none'}} className={`${preCls}-icon`}>
               {icon ? icon : (<Icon type={defaultIcon[type]}/>)}
             </span>
-            <p className={`${preCls}-message`}>{title}</p>
-            {
-              this.props.children ? (
-                <p className={`${preCls}-description`}>{this.props.children}</p>
-              ) : null
-            }
+            <div className={showIcon && this.props.children ? `${preCls}-has-icon-description` : ''}>
+              <p className={`${preCls}-message`}>{title}</p>
+              {
+                this.props.children ? (
+                  <p className={`${preCls}-description`}>{this.props.children}</p>
+                ) : null
+              }
+            </div>
             {
               closable ? (
                 <span className={`${preCls}-close`} onClick={this.closeAlert}>

diff --git a/components/Alert/style/index.less b/components/Alert/style/index.less
@@ -63,7 +63,7 @@
 
 
   &-with-description {
-    padding: 16px 16px 16px 60px;
+    padding: 16px;
 
     .@{alert-prefix-cls}-icon {
       position: absolute;
@@ -72,11 +72,16 @@
     }
 
     .@{alert-prefix-cls}-close {
-      font-size: 20px;
+      font-size: 14px;
       right: 8px;
     }
   }
 
+  &-has-icon-description {
+    display: inline-block;
+    padding-left: 46px;
+  }
+
   &-message {
     color: rgba(0,0,0,.85);
   }