diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index e57be1583fb0..bade74950614 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -74,10 +74,6 @@ color: $input-underline-color-warn; } - .mat-input-underline { - border-color: $input-underline-color-warn; - } - .mat-input-ripple { background-color: $input-underline-color-warn; } diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index 9437d7004478..b365bb600a29 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -217,12 +217,17 @@ $mat-input-underline-disabled-background-image: z-index: 1; top: -1px; width: 100%; - transform-origin: top; - opacity: 0; - transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function; - - .mat-focused & { - opacity: 1; + transform-origin: 50%; + transform: scaleX(0.5); + visibility: hidden; + transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function; + + .mat-focused &, + .mat-input-invalid & { + visibility: visible; + transform: scaleX(1); + transition: transform 150ms linear, + background-color $swift-ease-in-duration $swift-ease-in-timing-function; } } }