feat(notification): close & width & padding customization

src/notification/src/Notification.tsx

@@ -7,6 +7,7 @@ import {
   VNodeChild,
   CSSProperties
 } from 'vue'
+import { getPadding } from 'seemly'
 import { createKey, keysOf, render as Render } from '../../_utils'
 import { NBaseIcon, NBaseClose } from '../../_internal'
 import {
@@ -83,6 +84,10 @@ export default defineComponent({
             boxShadow,
             lineHeight,
             fontSize,
+            closeMargin,
+            closeSize,
+            width,
+            padding,
             [createKey('iconColor', type)]: iconColor
           },
           common: {
@@ -91,6 +96,7 @@ export default defineComponent({
             cubicBezierEaseInOut
           }
         } = NNotificationProvider.mergedTheme
+        const { left, right, top, bottom } = getPadding(padding)
         return {
           '--color': color,
           '--font-size': fontSize,
@@ -108,7 +114,14 @@ export default defineComponent({
           '--close-color-hover': closeColorHover,
           '--close-color-pressed': closeColorPressed,
           '--line-height': lineHeight,
-          '--icon-color': iconColor
+          '--icon-color': iconColor,
+          '--close-margin': closeMargin,
+          '--close-size': closeSize,
+          '--width': width,
+          '--padding-left': left,
+          '--padding-right': right,
+          '--padding-top': top,
+          '--padding-bottom': bottom
         }
       })
     }

src/notification/src/styles/index.cssr.ts

@@ -12,11 +12,18 @@ import { c, cB, cE, cM } from '../../../_utils/cssr'
 // --bezier-ease-in
 // --border-radius
 // --box-shadow
+// --close-margin
+// --close-size
 // --close-color
 // --close-color-hover
 // --close-color-pressed
 // --line-height
 // --icon-color
+// --width
+// --padding-top
+// --padding-bottom
+// --padding-left
+// --padding-right
 export default c([
   cB('notification-container', `
     z-index: 4000;
@@ -96,9 +103,9 @@ export default c([
       margin-bottom: 12px;
       margin-left: 28px;
       margin-right: 16px;
-      padding-left: 16px;
-      padding-right: 16px;
-      width: 365px;
+      padding-left: var(--padding-left);
+      padding-right: var(--padding-right);
+      width: var(--width);
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
       box-sizing: border-box;
@@ -127,16 +134,17 @@ export default c([
         ]),
         cE('close', `
           position: absolute;
-          top: 16px;
-          right: 12px;
-          font-size: 14px;
+          top: 0;
+          right: 0;
+          margin: var(--close-margin);
+          font-size: var(--close-size);
           transition: color .3s var(--bezier);
         `)
       ]),
       cE('avatar', `
         position: absolute;
-        top: 16px;
-        left: 16px;
+        top: var(--padding-top);
+        left: var(--padding-left);
         width: 28px;
         height: 28px;
         font-size: 28px;
@@ -146,8 +154,8 @@ export default c([
         })
       ]),
       cB('notification-main', `
-        padding-top: 16px;
-        padding-bottom: 16px;
+        padding-top: var(--padding-top);
+        padding-bottom: var(--padding-bottom);
         box-sizing: border-box;
         display: flex;
         flex-direction: column;

src/notification/styles/_common.ts

@@ -0,0 +1,6 @@
+export default {
+  closeMargin: '18px 14px',
+  closeSize: '16px',
+  width: '365px',
+  padding: '16px'
+}

src/notification/styles/dark.ts

@@ -1,5 +1,6 @@
 import { scrollbarDark } from '../../scrollbar/styles'
 import { commonDark } from '../../_styles/common'
+import commonVars from './_common'
 import type { NotificationTheme } from './light'
 
 const notificationDark: NotificationTheme = {
@@ -27,6 +28,7 @@ const notificationDark: NotificationTheme = {
       fontSize
     } = vars
     return {
+      ...commonVars,
       borderRadius,
       lineHeight,
       fontSize,

src/notification/styles/light.ts

@@ -2,6 +2,7 @@ import { scrollbarLight } from '../../scrollbar/styles'
 import { commonLight } from '../../_styles/common'
 import type { ThemeCommonVars } from '../../_styles/common'
 import { createTheme } from '../../_mixins'
+import commonVars from './_common'
 
 const self = (vars: ThemeCommonVars) => {
   const {
@@ -22,6 +23,7 @@ const self = (vars: ThemeCommonVars) => {
     fontSize
   } = vars
   return {
+    ...commonVars,
     borderRadius,
     lineHeight,
     fontSize,

src/upload/demos/enUS/drag.demo.md

@@ -11,7 +11,7 @@
     <n-text style="font-size: 16px;"
       >Click or drag file to this area to upload</n-text
     >
-    <n-p depth="3" style="margin-bottom: 0;"
+    <n-p depth="3" style="margin: 8px 0 0 0;"
       >Strictly prohibit from uploading sensitive information. For example, your
       deposit card's password or your credit card's expiration date and security
       code.</n-p

src/upload/demos/zhCN/drag.demo.md

@@ -9,7 +9,7 @@
       </n-icon>
     </div>
     <n-text style="font-size: 16px;">点击或者拖动文件到该区域来上传</n-text>
-    <n-p depth="3" style="margin-bottom: 0;"
+    <n-p depth="3" style="margin: 8px 0 0 0;"
       >请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</n-p
     >
   </n-upload-dragger>