fix(MdDialog):change position principle from transform to flex wrapper (#2023)

* Changed dialog positioning to flex

* Revert to transition root element

Co-authored-by: hastom <[email protected]>

Author: hastom

docs/app/pages/Components/Dialog/examples/DialogCustom.vue

@@ -44,7 +44,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .md-dialog {
+  .md-dialog /deep/.md-dialog-container {
     max-width: 768px;
   }
 </style>

src/components/MdDialog/MdDialog.vue

@@ -1,13 +1,13 @@
 <template>
   <md-portal>
     <transition name="md-dialog">
-      <div class="md-dialog" :class="[dialogClasses, $mdActiveTheme]" v-on="$listeners" @keydown.esc="onEsc" v-if="mdActive">
+      <div class="md-dialog" v-if="mdActive">
         <md-focus-trap>
-          <div class="md-dialog-container">
-            <slot />
-
+          <div class="md-dialog-container" :class="[dialogContainerClasses, $mdActiveTheme]" v-on="$listeners"
+               @keydown.esc="onEsc">
+            <slot/>
             <keep-alive>
-              <md-overlay :class="mdBackdropClass" md-fixed :md-active="mdActive" @click="onClick" v-if="mdBackdrop" />
+              <md-overlay :class="mdBackdropClass" md-fixed :md-active="mdActive" @click="onClick" v-if="mdBackdrop"/>
             </keep-alive>
           </div>
         </md-focus-trap>
@@ -55,6 +55,11 @@
     },
     computed: {
       dialogClasses () {
+        return {
+          'md-active': this.mdActive
+        }
+      },
+      dialogContainerClasses () {
         return {
           'md-dialog-fullscreen': this.mdFullscreen
         }
@@ -95,28 +100,72 @@
   @import "~components/MdLayout/mixins";
   @import "~components/MdElevation/mixins";
 
+  $opacity-transition-duration: .15s;
+  $transform-transition-duration: .20s;
+  $max-duration: max($opacity-transition-duration, $transform-transition-duration);
+
   .md-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    display: flex;
+    transition-duration: $max-duration;
+    z-index: 110;
+
+    &.md-dialog-leave,
+    &.md-dialog-enter-to {
+      .md-dialog-container {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      .md-dialog-fullscreen {
+        @include md-layout-xsmall {
+          opacity: 0;
+          transform: translate(0, 30%);
+        }
+      }
+    }
+
+    &.md-dialog-enter,
+    &.md-dialog-leave-to {
+      .md-dialog-container {
+        opacity: 0;
+        transform: scale(.9);
+      }
+
+      .md-dialog-fullscreen {
+        @include md-layout-xsmall {
+          opacity: 1;
+          transform: translate(0, 0);
+        }
+      }
+    }
+
+  }
+
+  .md-dialog-container {
     @include md-elevation(24);
     min-width: 280px;
     max-width: 80%;
     max-height: 80%;
     margin: auto;
     display: flex;
     flex-flow: column;
-    flex-direction: row;
     overflow: hidden;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 110;
     border-radius: 2px;
     backface-visibility: hidden;
     pointer-events: auto;
-    transform: translate(-50%, -50%);
+    opacity: 1;
+    transform: scale(1);
     transform-origin: center center;
-    transition: opacity .15s $md-transition-stand-timing,
-                transform .2s $md-transition-stand-timing;
-    will-change: opacity, transform, left, top;
+    transition: opacity $opacity-transition-duration $md-transition-stand-timing, transform $transform-transition-duration $md-transition-stand-timing;
+    will-change: opacity, transform;
 
     > .md-dialog-tabs,
     > .md-dialog-title,
@@ -128,10 +177,10 @@
     }
   }
 
-.md-dialog-enter-active,
+  .md-dialog-enter-active,
   .md-dialog-leave-active {
     opacity: 0;
-    transform: translate(-50%, -50%) scale(.9);
+    transform: scale(.9);
 
     > .md-dialog-tabs,
     > .md-dialog-title,
@@ -143,10 +192,6 @@
   }
 
   .md-dialog-container {
-    display: flex;
-    flex-flow: column;
-    flex: 1;
-
     .md-tabs {
       flex: 1;
     }
@@ -164,25 +209,12 @@
 
   .md-dialog-fullscreen {
     @include md-layout-xsmall {
+      width: 100%;
+      height: 100%;
       max-width: 100%;
       max-height: 100%;
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
       border-radius: 0;
       transform: none;
-
-      &.md-dialog-enter {
-        opacity: 0;
-        transform: translate3D(0, 30%, 0);
-      }
-
-      &.md-dialog-leave-active {
-        opacity: 0;
-        transform: translate3D(0, 0, 0);
-      }
     }
   }
 </style>

src/components/MdDialog/theme.scss

@@ -1,4 +1,4 @@
-.md-dialog {
+.md-dialog-container {
   @include md-theme-component() {
     @include md-theme-property(background-color, background);
     @include md-theme-property(color, text-primary, background);