Modified Material FormField template so outline DOM is contained within mat-form-field-flex. This approach is more easily overriden by partner team that customizes the look and feel of Material components.

Author: glouischandra

src/lib/form-field/form-field-outline.scss

@@ -31,6 +31,7 @@ $mat-form-field-outline-subscript-padding:
   .mat-form-field-flex {
     padding: 0 $mat-form-field-outline-side-padding 0 $mat-form-field-outline-side-padding;
     margin-top: -$mat-form-field-outline-label-overlap;
+    position: relative;
   }
 
   .mat-form-field-prefix,
@@ -41,9 +42,10 @@ $mat-form-field-outline-subscript-padding:
   .mat-form-field-outline {
     display: flex;
     position: absolute;
-    top: 0;
+    top: $mat-form-field-outline-label-overlap;
     left: 0;
     right: 0;
+    bottom: 0;
     pointer-events: none;
   }
 
@@ -117,12 +119,12 @@ $mat-form-field-outline-subscript-padding:
   }
 
   &:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
-    & ~ .mat-form-field-outline {
+    & .mat-form-field-outline {
       opacity: 0;
       transition: opacity 600ms $swift-ease-out-timing-function;
     }
 
-    & ~ .mat-form-field-outline-thick {
+    & .mat-form-field-outline-thick {
       opacity: 1;
     }
   }

src/lib/form-field/form-field.html

@@ -1,6 +1,21 @@
 <div class="mat-form-field-wrapper">
   <div class="mat-form-field-flex" #connectionContainer
        (click)="_control.onContainerClick && _control.onContainerClick($event)">
+
+    <!-- Outline used for  outline appearance. -->
+    <ng-container *ngIf="appearance == 'outline'">
+      <div class="mat-form-field-outline">
+        <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
+        <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+        <div class="mat-form-field-outline-end"></div>
+      </div>
+      <div class="mat-form-field-outline mat-form-field-outline-thick">
+        <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
+        <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
+        <div class="mat-form-field-outline-end"></div>
+      </div>
+    </ng-container>
+
     <div class="mat-form-field-prefix" *ngIf="_prefixChildren.length">
       <ng-content select="[matPrefix]"></ng-content>
     </div>
@@ -52,20 +67,6 @@
           [class.mat-warn]="color == 'warn'"></span>
   </div>
 
-  <!-- Outline used for  outline appearance. -->
-  <ng-container *ngIf="appearance == 'outline'">
-    <div class="mat-form-field-outline">
-      <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
-      <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
-      <div class="mat-form-field-outline-end"></div>
-    </div>
-    <div class="mat-form-field-outline mat-form-field-outline-thick">
-      <div class="mat-form-field-outline-start" [style.width.px]="_outlineGapStart"></div>
-      <div class="mat-form-field-outline-gap" [style.width.px]="_outlineGapWidth"></div>
-      <div class="mat-form-field-outline-end"></div>
-    </div>
-  </ng-container>
-
   <div class="mat-form-field-subscript-wrapper"
        [ngSwitch]="_getDisplayedMessages()">
     <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">