refactor(drawer): style

src/_styles/global/index.cssr.js

@@ -1,36 +1,14 @@
-import { c, cB } from '../../_utils/cssr'
+import { c } from '../../_utils/cssr'
 import commonVariables from '../base/_common'
 
 export default c([
-  // virtualScrollerStyle,
   c('body', {
     margin: 0,
     fontSize: commonVariables.fontSize,
     fontFamily: commonVariables.fontFamily
-  }, [
-    c('>', [
-      cB('positioning-container', {
-        position: 'fixed'
-      })
-    ])
-  ]),
+  }),
   c('input', {
     fontSize: 'inherit',
     fontFamily: commonVariables.fontFamily
-  }),
-  cB('positioning-container', {
-    raw: `
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      pointer-events: none;
-      transform: translateZ(0);
-    `
-  }, [
-    cB('positioning-content', {
-      pointerEvents: 'all'
-    })
-  ])
+  })
 ])

src/_styles/transitions/fade-in-width-expand.js

@@ -19,25 +19,27 @@ export default function ({ duration = '.2s', delay = '.1s' } = {}) {
         marginRight: '0 !important'
       }
     ),
-    c(`&.${namespace}-fade-in-width-expand-transition-leave-active`, {
-      raw: `
-        overflow: hidden;
-        transition:
-          opacity ${duration} ${cubicBezierEaseInOut},
-          max-width ${duration} ${cubicBezierEaseInOut} ${delay},
-          margin-left ${duration} ${cubicBezierEaseInOut} ${delay},
-          margin-right ${duration} ${cubicBezierEaseInOut} ${delay};
+    c(
+      `&.${namespace}-fade-in-width-expand-transition-leave-active`,
       `
-    }),
-    c(`&.${namespace}-fade-in-width-expand-transition-enter-active`, {
-      raw: `
-        overflow: hidden;
-        transition:
-          opacity ${duration} ${cubicBezierEaseInOut} ${delay},
-          max-width ${duration} ${cubicBezierEaseInOut},
-          margin-left ${duration} ${cubicBezierEaseInOut},
-          margin-right ${duration} ${cubicBezierEaseInOut};
+      overflow: hidden;
+      transition:
+        opacity ${duration} ${cubicBezierEaseInOut},
+        max-width ${duration} ${cubicBezierEaseInOut} ${delay},
+        margin-left ${duration} ${cubicBezierEaseInOut} ${delay},
+        margin-right ${duration} ${cubicBezierEaseInOut} ${delay};
+    `
+    ),
+    c(
+      `&.${namespace}-fade-in-width-expand-transition-enter-active`,
       `
-    })
+      overflow: hidden;
+      transition:
+        opacity ${duration} ${cubicBezierEaseInOut} ${delay},
+        max-width ${duration} ${cubicBezierEaseInOut},
+        margin-left ${duration} ${cubicBezierEaseInOut},
+        margin-right ${duration} ${cubicBezierEaseInOut};
+    `
+    )
   ]
 }

src/drawer/src/Drawer.vue

@@ -2,10 +2,12 @@
   <v-lazy-teleport :to="to" :show="show">
     <div
       v-zindexable="{ enabled: show }"
-      class="n-positioning-container"
-      :class="{
-        [namespace]: namespace
-      }"
+      :class="[
+        'n-drawer-container',
+        {
+          [namespace]: namespace
+        }
+      ]"
       :style="cssVars"
     >
       <transition name="n-fade-in-transition" :appear="isMounted">

src/drawer/src/DrawerBodyWrapper.vue

@@ -2,8 +2,11 @@
   <div
     v-if="displayDirective === 'show' || displayed || show"
     v-show="displayDirective === 'if' || displayed || show"
-    class="n-drawer-container"
   >
+    <!--
+      Keep the wrapper dom. Make sure the drawer has a host. Nor the detached
+      content will disappear without transition
+    -->
     <transition
       :name="transitionName"
       :appear="NDrawer.isMounted"

src/drawer/src/styles/index.cssr.js

@@ -62,6 +62,26 @@ export default c([
       right: 0;
     `)
   ]),
+  c('body', [
+    c('>', [
+      cB('drawer-container', {
+        position: 'fixed'
+      })
+    ])
+  ]),
+  cB('drawer-container', `
+    position: relative;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+  `, [
+    c('> *', {
+      pointerEvents: 'all'
+    })
+  ]),
   cB('drawer-mask', `
     background-color: rgba(0, 0, 0, .3);
     position: absolute;
@@ -69,22 +89,12 @@ export default c([
     right: 0;
     top: 0;
     bottom: 0;
-    pointer-events: all;
   `, [
     fadeInTransition({
-      enterDuration: '0.3s',
-      leaveDuration: '0.3s',
+      enterDuration: '0.2s',
+      leaveDuration: '0.2s',
       enterCubicBezier: 'var(--bezier-in)',
       leaveCubicBezier: 'var(--bezier-out)'
     })
-  ]),
-  cB('drawer-container', `
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    pointer-events: none;
-    overflow: hidden;
-  `)
+  ])
 ])