style tweaks

Author: mmalerba

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

@@ -14,55 +14,50 @@
   $is-dark-theme: map-get($theme, is-dark);
 
   $label-disabled-color: mat-color($foreground, disabled-text);
-  $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
+  $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.30, 0.12));
+  $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
+  $outline-color-primary: mat-color($primary);
   $outline-color-accent: mat-color($accent);
   $outline-color-warn: mat-color($warn);
-  $outline-focused-color: mat-color($primary);
+  $outline-color-disabled: mat-color($foreground, divider, if($is-dark-theme, 0.15, 0.06));
 
   .mat-form-field-appearance-outline {
     .mat-form-field-outline {
-      &::before,
-      &::after {
-        border-color: $outline-color;
-      }
+      color: $outline-color;
     }
 
-    &.mat-form-field-disabled {
-      .mat-form-field-label {
-        color: $label-disabled-color;
-      }
+    .mat-form-field-outline-thick {
+      color: $outline-color-hover;
     }
 
     &.mat-focused {
-      .mat-form-field-outline {
-        &::before,
-        &::after {
-          border-color: $outline-focused-color;
-        }
+      .mat-form-field-outline-thick {
+        color: $outline-color-primary;
       }
 
-      &.mat-accent .mat-form-field-outline {
-        &::before,
-        &::after {
-          border-color: $outline-color-accent;
-        }
+      &.mat-accent .mat-form-field-outline-thick {
+        color: $outline-color-accent;
       }
 
-      &.mat-warn .mat-form-field-outline {
-        &::before,
-        &::after {
-          border-color: $outline-color-warn;
-        }
+      &.mat-warn .mat-form-field-outline-thick {
+        color: $outline-color-warn;
       }
     }
 
     // Class repeated so that rule is specific enough to override focused accent color case.
     &.mat-form-field-invalid.mat-form-field-invalid {
+      .mat-form-field-outline-thick {
+        color: $outline-color-warn;
+      }
+    }
+
+    &.mat-form-field-disabled {
+      .mat-form-field-label {
+        color: $label-disabled-color;
+      }
+
       .mat-form-field-outline {
-        &::before,
-        &::after {
-          border-color: $outline-color-warn;
-        }
+        color: $outline-color-disabled;
       }
     }
   }

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

@@ -45,28 +45,53 @@ $mat-form-field-outline-subscript-padding:
     &::after {
       content: '';
       width: $mat-form-field-outline-side-padding;
-      border: $mat-form-field-outline-width solid;
+      border: $mat-form-field-outline-width solid currentColor;
       flex-grow: 1;
     }
 
     &::before {
-      border-radius: $mat-form-field-outline-border-radius 0 0 $mat-form-field-outline-border-radius;
+      border-radius: $mat-form-field-outline-border-radius 0 0
+                     $mat-form-field-outline-border-radius;
       border-right: none;
     }
 
     &::after {
-      border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius 0;
+      border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius
+                     0;
       border-left: none;
     }
   }
 
+  .mat-form-field-outline-gap {
+    border-bottom: $mat-form-field-outline-width solid currentColor;
+    width: 100px; // TODO(mmalerba): set size dynamically.
+
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      border-top: $mat-form-field-outline-width solid currentColor;
+      opacity: 1;
+      transition: opacity 300ms $swift-ease-out-timing-function;
+    }
+  }
+
+  &.mat-form-field-can-float.mat-form-field-should-float {
+    .mat-form-field-outline-gap::before {
+      opacity: 0;
+    }
+  }
+
   .mat-form-field-outline-thick {
     opacity: 0;
 
     &::before,
-    &::after {
+    &::after,
+    .mat-form-field-outline-gap,
+    .mat-form-field-outline-gap::before {
       border-width: $mat-form-field-outline-thick-width;
-      transition: border-color 300ms $swift-ease-out-timing-function;
+      transition: border-color 300ms $swift-ease-out-timing-function,
+                  opacity 300ms $swift-ease-out-timing-function;
     }
   }