From 528f56f38a91563c3c8a9c97dc9f91caa880677d Mon Sep 17 00:00:00 2001
From: FezVrasta <federico.zivolo@gmail.com>
Date: Wed, 3 Aug 2016 00:51:17 +0200
Subject: [PATCH] added input style for read-only and invalid,  fixed disabled
 style

---
 scss/_forms.scss        |  6 ------
 scss/_variables.scss    |  5 ++++-
 scss/mixins/_forms.scss | 19 ++++++++++++++++++-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index e662ee34..2961f0bb 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -28,12 +28,6 @@ form {
   border: 0;
   transition: background 0s ease-out;
 
-  // on disabled, kill the bg animation image and fall back to a simple dotted bottom border
-  @include bmd-disabled() {
-    background-image: none;
-    border-bottom: $input-btn-border-width dotted $input-border-color;
-  }
-
   // The border bottom should be static in all states, the decorator will be animated over this.
   &:focus,
   .bmd-form-group.is-focused & {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index aee71f49..f5f34228 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -46,7 +46,10 @@ $enable-shadows: true;  // enable shadows, set to false to turn off shadows
 @import "variables/menu";
 @import "variables/drawer";
 
-$bmd-label-color-focus: $brand-primary !default;
+$bmd-label-color-focus:  $brand-primary !default;
+$bmd-invalid-underline:  $red-a700 !default;
+$bmd-readonly-underline: $input-border-color !default;
+
 //---
 // verified in use with refactoring to v4
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index a87abab0..bdb79bca 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -74,7 +74,10 @@
   .form-control {
 
     // underline animation color on focus
-    $underline-background-image: linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image:          linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image-invalid:  linear-gradient(to top, $bmd-invalid-underline 2px, fade-out($bmd-invalid-underline, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image-readonly: linear-gradient(to top, $bmd-readonly-underline 1px, fade-out($bmd-readonly-underline, 1) 1px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image-disabled: linear-gradient(to right, $input-border-color 0%, $input-border-color 30%, transparent 30%, transparent 100%);
 
     // bg image is always there, we just need to reveal it
     &,
@@ -82,6 +85,20 @@
       background-image: $underline-background-image;
     }
 
+    &:invalid {
+      background-image: $underline-background-image-invalid;
+    }
+
+    &:read-only {
+      background-image: $underline-background-image-readonly;
+    }
+
+    @include bmd-disabled() {
+      background-image: $underline-background-image-disabled;
+      background-repeat: repeat-x;
+      background-size: 3px 1px;
+    }
+
     // allow underline focus image and validation images to coexist
     &.form-control-success {
       &,