Added back coloration on validation states

js/src/baseInput.js

@@ -18,7 +18,7 @@ const BaseInput = (($) => {
   const ClassName = {
     FORM_GROUP: 'form-group',
     MDB_FORM_GROUP: 'mdb-form-group',
-    HAS_ERROR: 'has-error',
+    HAS_DANGER: 'has-danger',
     IS_EMPTY: 'is-empty',
     IS_FOCUSED: 'is-focused'
   }
@@ -130,9 +130,9 @@ const BaseInput = (($) => {
             //        BUT, I've left it here for backwards compatibility.
             let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity())
             if (isValid) {
-              this.removeHasError()
+              this.removeHasDanger()
             } else {
-              this.addHasError()
+              this.addHasDanger()
             }
           }
         })
@@ -146,12 +146,12 @@ const BaseInput = (($) => {
       this.$mdbFormGroup.removeClass(ClassName.IS_FOCUSED)
     }
 
-    addHasError() {
+    addHasDanger() {
-      this.$mdbFormGroup.addClass(ClassName.HAS_ERROR)
+      this.$mdbFormGroup.addClass(ClassName.HAS_DANGER)
     }
 
-    removeHasError() {
+    removeHasDanger() {
-      this.$mdbFormGroup.removeClass(ClassName.HAS_ERROR)
+      this.$mdbFormGroup.removeClass(ClassName.HAS_DANGER)
     }
 
     addIsEmpty() {

scss/_forms.scss

@@ -16,18 +16,18 @@
 }
 
 @mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size) {
-  .form-control {
+  //.form-control {
-    @include material-placeholder {
+  //  @include material-placeholder {
-      //font-size: $placeholder-font-size;
+  //    font-size: $placeholder-font-size;
-      //line-height: $line-height;
+  //    line-height: $line-height;
-      //color: $mdb-input-placeholder-color;
+  //    color: $mdb-input-placeholder-color;
-      //font-weight: 400;
+  //    font-weight: 400;
-    }
+  //  }
-
+  //
-    // margin-bottom must be specified to give help-block vertical space.
+  //  // margin-bottom must be specified to give help-block vertical space.
-    //    $see also form-group padding-bottom (and size variants) re: collapsible margins.  These work together.
+  //  //    $see also form-group padding-bottom (and size variants) re: collapsible margins.  These work together.
-    //margin-bottom: $vertical-padding;
+  //  margin-bottom: $vertical-padding;
-  }
+  //}
 
   // generic labels used anywhere in the form (not control-label)
   .checkbox label,
@@ -54,28 +54,44 @@
   }
 }
 
-@mixin mdb-form-group-validation-state($name, $color) {
+@mixin mdb-form-color($label-color, $border-color) {
+  // Use the BS provided mixin for the bulk of the color
+  @include form-control-validation($label-color);
 
-  &.has-#{$name} { // e.g. has-error
+  // Set the border and box shadow on specific inputs to match
+  .form-control {
+    border-color: $border-color;
+  }
+
+  // Set validation states also for addons
+  .input-group-addon {
+    border-color: $border-color;
+  }
+
+  label {
+    color: $label-color;
+  }
+}
+
+@mixin mdb-form-control-validation($name, $color) {
+  // e.g. has-danger
+  &.has-#{$name} {
+
+    // override BS and keep the border-color normal/grey so that focus animation draws attention
     .form-control {
-      //box-shadow: none; // replaced with variable
+      border-color: $input-border-color;
-    }
-
-    // e.g. form-control-success
-    .form-control-#{$name} {
-      //  background-image: none;
     }
 
     &.is-focused {
-      .form-control {
+      // on focus set borders and labels to the validation color
-        //background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+      @include mdb-form-color($color, $color);
-      }
+
-      .mdb-form-control-decorator::after {
+      // underline animation color on focus
-        //background-color: $color;
+      .mdb-form-control-decorator {
-      }
+        &::before,
-      label.control-label,
+        &::after {
-      .help-block {
+          @include gradient-vertical($color, $input-border-color);
-        color: $color;
+        }
       }
     }
   }
@@ -133,21 +149,18 @@
   }
 }
 
+@include mdb-form-color($mdb-label-color, $input-border-color);
+@include mdb-form-control-validation(warning, $brand-warning);
+@include mdb-form-control-validation(danger, $brand-danger);
+@include mdb-form-control-validation(success, $brand-success);
+@include mdb-form-control-validation(info, $brand-info);
+
 // -----
 // Inputs
 //
 // Reference http://www.google.com/design/spec/components/text-fields.html
 // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-//.mdb-form-group .form-control,
 .form-control {
-  //background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
-  //background-repeat: no-repeat;
-  //background-position: center bottom, center calc(100% - 1px);
-  //background-size: 0 2px, 100% 1px;
-  //transition: background 0s ease-out;
-
-  //float: none;  // why?
-
   // The border bottom should be static in all states, the decorator will be animated over this.
   &,
   &:focus,
@@ -158,29 +171,8 @@
 
   &[disabled],
   fieldset[disabled] & {
-    //background-image: none;
     border-bottom: $input-border-width dotted $input-border-color;
   }
-
-  //&:textarea {
-  //  height: 40px;
-  //}
-
-  //&:focus,
-  //.mdb-form-group.is-focused & {
-  //  background-size: 100% 2px, 100% 1px;
-  //  outline: none; // redundant - in bootstrap
-  //  transition-duration: 0.3s;
-  //}
-  //.mdb-form-group.is-focused .mdb-form-control-decorator::after {
-  //  background-color: $brand-primary;
-  //}
-
-  //&[readonly],
-  //&[disabled],
-  //fieldset[disabled] & {
-  //  background-color: rgba($black, 0);  // replaced with $input-bg-disabled
-  //}
 }
 
 // Focus underline animation =================================
@@ -194,7 +186,7 @@
     width: 0;
     height: $input-border-width;
     content: "";
-    @include gradient-vertical($brand-primary, $mdb-input-underline-color);
+    @include gradient-vertical($brand-primary, $input-border-color);
     transition: 0.3s ease all;
 
     // focused state - it transitions the width of each (before and after) to 50% creating the center out effect
@@ -210,7 +202,8 @@
     right: 50%;
   }
 }
-// Focus underline animation =================================
+
+// End: Focus underline animation =================================
 
 // -----
 // Labels with mdb-form-group signalled state
@@ -276,16 +269,8 @@
     }
   }
 
-  @include mdb-form-group-validation-state(warning, $brand-warning);
-  @include mdb-form-group-validation-state(error, $brand-danger);
-  @include mdb-form-group-validation-state(success, $brand-success);
-  @include mdb-form-group-validation-state(info, $brand-info);
-
   textarea {
     //resize: none;
-    ~ .form-control-highlight {
-      //margin-top: -11px;
-    }
   }
 
   select {

scss/_variables.scss

@@ -45,7 +45,10 @@ $contrast-factor: 40% !default;
 // --------------------
 // inputs
 //$mdb-input-placeholder-color: #BDBDBD !default;
-$mdb-input-underline-color: #d2d2d2 !default;
+
+$mdb-label-color: rgba($black, 0.26) !default;   // synced
+
+//$mdb-input-underline-color: #d2d2d2 !default;
 $mdb-label-static-size-ratio: 75 / 100 !default;
 $mdb-help-block-size-ratio: 75 / 100 !default;