changed flyout to position: fixed (#351)

Co-authored-by: Shane Weaver <[email protected]>

Author: nmetulev

src/components/mgt-login/mgt-login.scss

@@ -79,10 +79,8 @@ mgt-login .login-icon {
 
 :host .popup,
 mgt-login .popup {
-  position: absolute;
   font-family: var(--default-font-family);
   background: var(--popup-content-background-color);
-  box-shadow: 0 12px 40px 2px rgba(0, 0, 0, 0.08);
   min-width: 240px;
   z-index: 1;
   color: var(--popup-color);

src/components/mgt-people-picker/mgt-people-picker.scss

@@ -40,9 +40,7 @@ mgt-people-picker .people-picker {
 
 :host .flyout-root,
 mgt-people-picker .flyout-root {
-  margin: 7px 0px 0px 0px;
   padding: 0;
-  box-shadow: 0px 1.3289px 2.65781px rgba(180, 180, 180, 0.182), 0px 1.3289px 2.65781px rgba(68, 68, 68, 0.3);
   border-radius: 2px;
   background-color: $people-list-background-color;
   width: 100%;
@@ -218,6 +216,8 @@ mgt-people-picker .loading-text {
   line-height: 19px;
   text-align: center;
   color: #232222;
+  margin-left: 50px;
+  margin-right: 50px;
 }
 
 :host .SearchErrorIcon,
@@ -229,8 +229,7 @@ mgt-people-picker .SearchErrorIcon {
 
 :host .message-parent,
 mgt-people-picker .message-parent {
-  margin-top: 30px;
-  margin-bottom: 30px;
+  margin: 20px;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/mgt-person-card/mgt-person-card.scss

@@ -16,7 +16,6 @@ $color: var(--color, #{$ms-color-neutralDark});
   position: relative;
   width: 340px;
   background: #ffffff;
-  box-shadow: 0px 0px 4.55172px rgba(0, 0, 0, 0.16);
   font-family: var(--default-font-family);
 
   .person-details-container {

src/components/mgt-person/mgt-person.scss

@@ -223,7 +223,3 @@ mgt-person .user-email {
   grid-row: 2;
   -ms-grid-row: 2;
 }
-
-.flyout {
-  padding: 8px;
-}

src/components/mgt-tasks/mgt-tasks.scss

@@ -387,13 +387,11 @@ mgt-tasks,
         }
         .Picker {
           background-color: white;
-          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
           -webkit-background-clip: padding-box;
           -moz-background-clip: padding-box;
           background-clip: padding-box;
           width: 350px;
           color: var(--task-detail-color, black);
-          margin: 8px;
           mgt-people-picker {
             --separator-margin: 0px 10px 0px 10px;
           }

src/components/sub-components/mgt-flyout/mgt-flyout.scss

@@ -5,29 +5,37 @@
  * -------------------------------------------------------------------------------------------
  */
 
-.root {
-  position: relative;
-}
+@import '../../../../node_modules/office-ui-fabric-core/dist/sass/References';
 
-.root .flyout {
-  display: none;
-  position: absolute;
-  z-index: 1;
-  animation-duration: 300ms;
-  width: 100%;
-}
+.root {
+  .flyout {
+    display: none;
+    position: fixed;
+    z-index: 9999999;
+    opacity: 0;
+    box-shadow: $ms-depth-shadow-8;
+  }
 
-.root .flyout.visible {
-  display: inline-block;
-  animation-name: fade-in;
+  &.visible {
+    .flyout {
+      display: inline-block;
+      animation-name: fadeIn;
+      animation-duration: 0.3s;
+      animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+      animation-fill-mode: both;
+    }
+  }
 }
 
-@keyframes fade-in {
+@keyframes fadeIn {
   from {
     opacity: 0;
+    margin-top: -10px;
+    margin-bottom: -10px;
   }
-
   to {
     opacity: 1;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 }