📦 [refact] update Alert Component demo code.

chuangqiTeam · Mar 27, 2017 · b0aeb77 · b0aeb77
1 parent bd731ab
commit b0aeb77
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 32 deletions.
diff --git a/components/alert/theme.css b/components/alert/theme.css
@@ -3,7 +3,7 @@
 
 :root {
   --alert-hasDscription-icon-font-size: calc(2.4 * var(--unit));
-  --alert-hasDscription-padding: var(--pd) var(--pd) var(--pd) calc(6 * var(--unit));
+  --alert-hasDscription-padding: var(--pd) calc(4.8 * var(--unit)) var(--pd) calc(6 * var(--unit));
   --alert-noIocn-padding: var(--pd) calc(4.8 * var(--unit)) var(--pd) calc(1.6 * var(--unit));
   --alert-padding: var(--pd) calc(4.8 * var(--unit)) var(--pd) calc(3.8 * var(--unit));
   --lpd: calc(1.6 * var(--unit));
@@ -28,8 +28,6 @@
   }
   .icon {
     font-size: var(--alert-hasDscription-icon-font-size);
-
-    top: var(--pd);
     left: var(--lpd);
   }
 
@@ -113,15 +111,16 @@
 
 .icon {
   position: absolute;
-  top: calc(.9 * var(--unit));
-  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  left: var(--lpd);
 }
 
 .closeIcon {
   position: absolute;
-  top: var(--pd);
+  top: 50%;
+  transform: translateY(-50%);
   right: var(--lpd);
-
   cursor: pointer;
 }
 

diff --git a/src/components/alert.js b/src/components/alert.js
@@ -1,37 +1,36 @@
 import React, {Component} from 'react';
 import Alert from '../../components/alert';
-
+import Button from '../../components/button';
 import Section from '../../components/section';
 
-
 class AlertTest extends Component {
   render() {
 
     return (
       <Section title="警告提示">
-        <Alert message="success提示" />
-<br />
-        <Alert message="success提示" />
-<br />
-        <Alert showIcon={false} message="success提示" description="想要提升排名到TOP3？请联系我们" />
-<br />
-        <Alert type="info" message="info提示" description="想要提升排名到TOP3？请联系我们" />
-<br />
-        <Alert type="info" message="info提示" />
-<br />
-        <Alert type="info" showIcon={false} message="info成功提示" description="想要提升排名到TOP3？请联系我们" />
-<br />
-        <Alert type="warning" message="warning提示" description="想要提升排名到TOP3？请联系我们" />
-<br />
-        <Alert type="warning" message="warning提示" />
-<br />
-        <Alert type="warning" showIcon={false} className="margin-bottom" message="info成功提示" description="想要提升排名到TOP3？请联系我们" />
-<br />
-        <Alert type="error" message="error提示" description="想要提升排名到TOP3？请联系我们" />
-<br />
-        <Alert type="error" message="error提示" />
-<br />
-        <Alert type="error" showIcon={false} message="info成功提示" description="想要提升排名到TOP3？请联系我们" />
+        <Alert message={<div> 想要提升排名到TOP3？请联系我们 <Button className="margin-left" primary raised label="立即提升" /></div>}/>
+        <br/>
+        <Alert message="success提示"/>
+        <br/>
+        <Alert showIcon={false} message="success提示" description="想要提升排名到TOP3？请联系我们"/>
+        <br/>
+        <Alert type="info" message="info提示" description="想要提升排名到TOP3？请联系我们"/>
+        <br/>
+        <Alert type="info" message="info提示"/>
+        <br/>
+        <Alert type="info" showIcon={false} message="info成功提示" description="想要提升排名到TOP3？请联系我们"/>
+        <br/>
+        <Alert type="warning" message="warning提示" description="想要提升排名到TOP3？请联系我们"/>
+        <br/>
+        <Alert type="warning" message="warning提示"/>
+        <br/>
+        <Alert type="warning" showIcon={false} className="margin-bottom" message="info成功提示" description="想要提升排名到TOP3？请联系我们"/>
+        <br/>
+        <Alert type="error" message="error提示" description="想要提升排名到TOP3？请联系我们"/>
+        <br/>
+        <Alert type="error" message="error提示"/>
+        <br/>
+        <Alert type="error" showIcon={false} message="info成功提示" description="想要提升排名到TOP3？请联系我们"/>
       </Section>
     );
   }