working on inputs, label colors and focus. Introduced .mdb-help to replace .help-block

docs/material-design/forms.md

@@ -19,7 +19,7 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
   <fieldset class="form-group label-floating">
     <label for="exampleInputEmail1">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-    <small class="text-muted">We'll never share your email with anyone else.</small>
+    <span class="mdb-help">We'll never share your email with anyone else.</span>
   </fieldset>
   <fieldset class="form-group label-floating">
     <label for="exampleInputPassword1">Password</label>

scss/_checkboxes.scss

@@ -6,7 +6,7 @@ label.checkbox-inline,
   padding-left: 0; // Reset for Bootstrap rule
   cursor: pointer;
 
-  @include mdb-label-color-toggle-focus();
+  @include mdb-label-color-inner-focus();
 
   // Hide native checkbox
   input[type=checkbox] {

scss/_forms.scss

@@ -1,3 +1,4 @@
+
 @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);
@@ -53,6 +54,22 @@
 }
 // End: Focus underline animation =================================
 
+// Help blocks (not in v4)
+//  position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
+//  FIXME: width/wrapping isn't automatic and overflows occur.  What are some solutions?
+//
+.mdb-help {
+  position: absolute;
+  display: none;
+  font-size: 80%;
+  font-weight: normal;
+  @extend .text-muted;
+
+  .mdb-form-group.is-focused & {
+    display: block;
+  }
+}
+
 // -----
 // Labels with mdb-form-group signalled state
 //
@@ -79,9 +96,8 @@
   }
 
   // hint to browser for optimization
-  //    TODO: evaluate effectiveness - looking for community feedback
   &.label-floating label.control-label {
-    will-change: left, top, contents;
+    will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
   }
 
   // hide label-placeholders when the field is not empty
@@ -91,30 +107,26 @@
     }
   }
 
-  // Help blocks (not in v4) - position: absolute approach - uses no vertical space, text wrapping - not so good.
-  //.help-block {
-  //  position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
-  //  display: none;
-  //}
-
-  // mdb-form-group is-focused display
   &.is-focused {
-
+    label, // this is a control-label, but often times (too often) not marked as such so work around bad markup
-    label,
     label.control-label {
       color: $brand-primary;
+
+      label { // inner label
+        color: $mdb-label-color-inner-focus;
+      }
     }
 
     &.label-placeholder {
       label,
       label.control-label {
-        //color: $mdb-input-placeholder-color;
+        color: $mdb-label-color;
       }
     }
 
-    //.help-block {
+    .mdb-help {
-    //  display: block;
+      color: $mdb-label-color-inner-focus;
-    //}
+    }
   }
 }
 

scss/_radios.scss

@@ -20,7 +20,7 @@ label.radio-inline,
   position: relative;
   padding-left: 45px;
 
-  @include mdb-label-color-toggle-focus();
+  @include mdb-label-color-inner-focus();
 
   cursor: pointer;
 

scss/_switch.scss

@@ -5,7 +5,7 @@
   }
   label {
     cursor: pointer;
-    @include mdb-label-color-toggle-focus();
+    @include mdb-label-color-inner-focus();
 
     // Hide original checkbox
     input[type=checkbox] {

scss/_variables.scss

@@ -1,10 +1,18 @@
 @import "variables/colors";
 
-$mdb-text-color-primary: rgba($black, 0.87) !default;
-$mdb-text-color-light: rgba($white, 0.84) !default;
 
 // redefine ? TODO: do we need this mdb variant?  This is used as $body-color
-$gray-dark: $mdb-text-color-primary;
+$gray-light: rgba($black, 0.26) !default;
+$gray: rgba($black, .54) !default;
+$gray-dark: rgba($black, 0.87) !default;
+
+$mdb-text-color-light: rgba($white, 0.84) !default;
+$mdb-text-color-primary: $gray-dark !default;
+
+
+$mdb-label-color: $gray-light !default;
+$mdb-label-color-inner-focus: $gray !default;  // e.g. radio label or text-muted not a control-label which is primary
+
 
 //---
 // Customized BS variables
@@ -46,8 +54,6 @@ $contrast-factor: 40% !default;
 // inputs
 //$mdb-input-placeholder-color: #BDBDBD !default;
 
-$mdb-label-color: rgba($black, 0.26) !default;
-$mdb-label-color-toggle-focus: rgba($black, .54) !default;
 
 
 //$mdb-input-underline-color: #d2d2d2 !default;
@@ -82,7 +88,7 @@ $mdb-checkbox-size: 20px !default;
 $mdb-checkbox-animation-ripple: 500ms !default;
 $mdb-checkbox-animation-check: 0.3s !default;
 $mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default;
-$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
+$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
 
 // Popovers and Popups
 $mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
@@ -92,7 +98,7 @@ $mdb-popover-color: #ececec !default;
 $mdb-dropdown-font-size: 16px !default;
 
 // Radio:
-$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
+$mdb-radio-color-off: $mdb-label-color-inner-focus !default;
 $mdb-radio-color-on: $brand-primary !default;
 
 // Buttons:

scss/mixins/_forms.scss

@@ -36,16 +36,24 @@
     //margin: 16px 0 0 0; // std and lg
   }
 
-  .help-block {
+  //.mdb-help {
-    //margin-top: 0; // allow the input margin to set-off the top of the help-block
+  //  margin-top: 0; // allow the input margin to set-off the top of the help-block
-    //font-size: $help-block-font-size;
+  //  font-size: $help-block-font-size;
-  }
+  //}
 }
 
 @mixin mdb-form-color($label-color, $border-color) {
+
+  // This may or may not be already in the context of an mdb-form-group depending on if it is
+  //    default or comes from a validation state
+
   // Use the BS provided mixin for the bulk of the color
   @include form-control-validation($label-color);
 
+  label {
+    color: $label-color;
+  }
+
   // Set the border and box shadow on specific inputs to match
   .form-control {
     border-color: $border-color;
@@ -58,17 +66,13 @@
   .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
+    // override BS and keep the border-color normal/grey so that overlayed focus animation draws attention
     .form-control {
       border-color: $input-border-color;
     }
@@ -140,7 +144,7 @@
   }
 }
 
-@mixin mdb-label-color-toggle-focus() {
+@mixin mdb-label-color-inner-focus() {
   // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
   .mdb-form-group.is-focused & {
     color: $mdb-label-color;
@@ -148,7 +152,7 @@
     // on focus just darken the specific labels, do not turn them to the brand-primary
     &:hover,
     &:focus {
-      color: $mdb-label-color-toggle-focus;
+      color: $mdb-label-color-inner-focus;
     }
 
     // correct the above focus color for disabled items