From 6882035fee5bf021ad7ccda782804414b89f06ae Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 18 Jan 2021 19:15:04 +0800
Subject: [PATCH] fix(alert): icon margin

---
 src/alert/src/Alert.tsx            |   2 +-
 src/alert/src/styles/index.cssr.ts | 120 ++++++++++++-----------------
 2 files changed, 51 insertions(+), 71 deletions(-)

diff --git a/src/alert/src/Alert.tsx b/src/alert/src/Alert.tsx
index 11cdf43c6..1a3f23c1c 100644
--- a/src/alert/src/Alert.tsx
+++ b/src/alert/src/Alert.tsx
@@ -136,7 +136,7 @@ export default defineComponent({
                   class: [
                     'n-alert',
                     {
-                      'n-alert--no-icon': this.showIcon
+                      'n-alert--no-icon': !this.showIcon
                     }
                   ],
                   style: this.cssVars
diff --git a/src/alert/src/styles/index.cssr.ts b/src/alert/src/styles/index.cssr.ts
index 2ed1d7864..9a68cb1d7 100644
--- a/src/alert/src/styles/index.cssr.ts
+++ b/src/alert/src/styles/index.cssr.ts
@@ -15,46 +15,38 @@ import fadeInHeightExpandTranstion from '../../../_styles/transitions/fade-in-he
 // --border-radius
 // --font-size
 // --title-font-weight
-export default cB(
-  'alert',
-  `
+export default cB('alert', `
   line-height: var(--line-height);
   border-radius: var(--border-radius);
   position: relative;
   transition: background-color .3s var(--bezier);
   background-color: var(--color);
   text-align: start;
-`,
-  [
-    cE('icon', {
-      color: 'var(--icon-color)'
+`, [
+  cE('icon', {
+    color: 'var(--icon-color)'
+  }),
+  cB('alert-body', {
+    border: 'var(--border)'
+  }, [
+    cE('title', {
+      color: 'var(--title-text-color)'
     }),
-    cB(
-      'alert-body',
-      {
-        border: 'var(--border)'
-      },
-      [
-        cE('title', {
-          color: 'var(--title-text-color)'
-        }),
-        cE('content', {
-          color: 'var(--content-text-color)'
-        })
-      ]
-    ),
-    fadeInHeightExpandTranstion({
-      originalTransition: 'transform .3s var(--bezier)',
-      enterToProps: {
-        transform: 'scale(1)'
-      },
-      leaveToProps: {
-        transform: 'scale(0.9)'
-      }
-    }),
-    cE(
-      'icon',
-      `
+    cE('content', {
+      color: 'var(--content-text-color)'
+    })
+  ]
+  ),
+  fadeInHeightExpandTranstion({
+    originalTransition: 'transform .3s var(--bezier)',
+    enterToProps: {
+      transform: 'scale(1)'
+    },
+    leaveToProps: {
+      transform: 'scale(0.9)'
+    }
+  }),
+  cE('icon', `
     position: absolute;
     left: 12px;
     top: 14px;
@@ -64,54 +56,42 @@ export default cB(
     height: 26px;
     font-size: 26px;
   `
-    ),
-    cE(
-      'close',
-      `
+  ),
+  cE('close', `
     transition: color .3s var(--bezier);
     position: absolute;
     right: 16px;
     font-size: 14px;
     top: 14px;
-  `
-    ),
-    cB(
-      'alert-body',
-      `
+  `),
+  cB('alert-body', `
     border-radius: var(--border-radius);
     padding: 15px 15px 15px 47px;
     transition: border-color .3s var(--bezier);
-  `,
-      [
-        cE(
-          'title',
-          `
+  `, [
+    cE('title', `
       transition: color .3s var(--bezier);
       font-size: 16px;
       line-height: 19px;
       font-weight: var(--title-font-weight);
-    `,
-          [
-            c('& +', [
-              cE('content', {
-                marginTop: '9px'
-              })
-            ])
-          ]
-        ),
+    `, [
+      c('& +', [
         cE('content', {
-          transition: 'color .3s var(--bezier)',
-          fontSize: 'var(--font-size)'
+          marginTop: '9px'
         })
-      ]
-    ),
-    cE('icon', {
-      transition: 'color .3s var(--bezier)'
-    }),
-    cM('no-icon', [
-      cB('alert-body', {
-        paddingLeft: '19px'
-      })
-    ])
-  ]
-)
+      ])
+    ]),
+    cE('content', {
+      transition: 'color .3s var(--bezier)',
+      fontSize: 'var(--font-size)'
+    })
+  ]),
+  cE('icon', {
+    transition: 'color .3s var(--bezier)'
+  }),
+  cM('no-icon', [
+    cB('alert-body', {
+      paddingLeft: '19px'
+    })
+  ])
+])