Style update again - adds animations for focus and hover - (unit tests not ready - ignore)

Author: kseamon

src/material-experimental/popover-edit/_popover-edit.scss

@@ -1,3 +1,4 @@
+@import '../../lib/core/style/variables';
 @import '../../lib/core/style/elevation';
 @import '../../lib/core/theming/palette';
 @import '../../lib/core/theming/theming';
@@ -7,14 +8,6 @@
   @return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
 }
 
-@function mat-edit-focus-background($underline-color, $background-color) {
-  @return linear-gradient(
-      0deg,
-      mat-color($underline-color),
-      mat-color($underline-color) 2px,
-      $background-color 2px);
-}
-
 @mixin mat-edit-theme($theme) {
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
@@ -27,10 +20,12 @@
     background: mat-edit-hover-content-background(90deg, $background-color);
     bottom: 0;
     display: flex;
+    opacity: 0;
     padding: 0 4px 1px;
     position: absolute;
     right: 0;
     top: 0;
+    transition: opacity $swift-ease-in-duration $swift-ease-in-timing-function;
   }
 
   .mat-row-hover-content-rtl {
@@ -39,23 +34,38 @@
     right: auto;
   }
 
+  .mat-row-hover-content-visible {
+    opacity: 1;
+  }
+
   .mat-popover-edit-cell {
     position: relative;
 
+    &::after {
+      background-color: mat-color($primary);
+      bottom: 0;
+      content: '';
+      height: 2px;
+      left: 0;
+      opacity: 0;
+      position: absolute;
+      right: 0;
+      transform-origin: 50%;
+      transform: scaleX(0.5);
+      transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
+      visibility: hidden;
+    }
+
     &:focus {
-      background: mat-edit-focus-background($primary, $background-color);
       outline: none;
 
-      .mat-row-hover-content {
-        background:
-            mat-edit-focus-background($primary, transparent),
-            mat-edit-hover-content-background(90deg, $background-color);
-      }
-
-      .mat-row-hover-content-rtl {
-        background:
-            mat-edit-focus-background($primary, transparent),
-            mat-edit-hover-content-background(270deg, $background-color);
+      &::after {
+        opacity: 1;
+        transform: scaleX(1);
+        transition: transform 300ms $swift-ease-out-timing-function,
+                    opacity 100ms $swift-ease-out-timing-function,
+                    background-color 300ms $swift-ease-out-timing-function;
+        visibility: visible;
       }
     }
   }

src/material-experimental/popover-edit/table-directives.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Directive} from '@angular/core';
-
 import {
   CdkPopoverEdit,
   CdkPopoverEditTabOut,
@@ -92,6 +91,14 @@ export class MatRowHoverContent extends CdkRowHoverContent {
     } else {
       element.classList.remove(RTL_CLASS);
     }
+
+    const ANIMATE_CLASS = 'mat-row-hover-content-visible';
+    element.classList.remove(ANIMATE_CLASS);
+    this.services.ngZone.runOutsideAngular(() => {
+      setTimeout(() => {
+        element.classList.add(ANIMATE_CLASS);
+      });
+    });
   }
 }