0.4.4

sass/_checkboxes.scss

@@ -1,32 +1,10 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
 // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
-.form-horizontal .checkbox {
-  padding-top: 20px;
-}
-
-@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
-  .checkbox {
-    // Label is set in _inputs.less
-  }
-}
-
 .form-group {
+}
 
-  //// default label size/location
+.checkbox {
-  @include form-group-checkbox-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
-
-  // sm label size/location
-  &.form-group-sm {
-    @include form-group-checkbox-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
-  }
-
-  // lg label size/location
-  &.form-group-lg {
-    @include form-group-checkbox-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
-  }
-
-  .checkbox {
   label {
     cursor: pointer;
     padding-left: 0; // Reset for Bootstrap rule
@@ -142,7 +120,6 @@
   @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $mdb-checkbox-checked-color);
   @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $mdb-checkbox-checked-color);
   @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $mdb-checkbox-checked-color);
-  }
 }
 
 @keyframes checkbox-on {

sass/_form.scss

@@ -10,6 +10,10 @@
     padding-top: 0px;
   }
 
+  .radio {
+    margin-bottom: 10px;
+  }
+
   label {
     text-align: right;
   }

sass/_inputs.scss

@@ -3,7 +3,7 @@
 @import '_inputs-size';
 
 // must be broken out for reuse - webkit selector breaks firefox
-@mixin label-position($label-top, $static-font-size, $static-line-height){
+@mixin label-static($label-top, $static-font-size, $static-line-height){
   label.control-label {
     top: $label-top;
     left: 0;
@@ -13,6 +13,45 @@
   }
 }
 
+@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){
+  .form-control {
+    @include material-placeholder {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      color: $mdb-input-placeholder-color;
+      font-weight: 400;
+    
+}
+    // 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.
+    margin-bottom: $vertical-padding;
+  }
+
+  // generic labels used anywhere in the form (not control-label)
+  .checkbox label,
+  .radio label,
+  label {
+    font-size: $placeholder-font-size;
+    line-height: $line-height;
+    color: $mdb-input-placeholder-color;
+    font-weight: 400;
+  }
+
+  // smaller focused or static size
+  label.control-label {
+    font-size: $static-font-size;
+    line-height: $static-line-height;
+    color: $mdb-input-placeholder-color;
+    font-weight: 400;
+    margin: 16px 0 0 0; // std and lg
+  }
+
+  .help-block {
+    margin-top: 0px; // allow the input margin to set-off the top of the help-block
+    font-size: $help-block-font-size;
+  }
+}
+
 @mixin form-group-validation-state($name, $color){
 
   &.#{$name} { // e.g. has-error
@@ -29,7 +68,7 @@
   }
 }
 
-@mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
+@mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
   $static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
   $static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
 
@@ -39,38 +78,23 @@
   $help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
   $help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
 
-  // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
+  // this is outside a form-group
-  margin: ($label-top-margin + $static-font-size) 0 0 0;
+  @if not $parent {
-
+    @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
-  .form-control {
-    @include material-placeholder {
-      font-size: $placeholder-font-size;
-    
-}
-    margin-bottom: $vertical-padding; // must be specified to give help-block vertical space
   }
 
-  // upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
+  // this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
-  //  must also be expressed as form-group padding
+  @else {
+    #{$parent} {
+      @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
+
+      // form-group padding-bottom
+      //  upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
+      //  so the form-control margin-bottom must also be expressed as form-group padding
       padding-bottom: $vertical-padding;
 
-  .help-block {
+      // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
-    margin-top: 0px; // allow the input margin to set-off the top of the help-block
+      margin: ($label-top-margin + $static-font-size) 0 0 0;
-    font-size: $help-block-font-size;
-  }
-
-  // generic labels used anywhere in the form (not control-label)
-  label {
-    font-size: $placeholder-font-size;
-    line-height: $line-height;
-    font-weight: normal;
-  }
-
-  // smaller focused or static size
-  label.control-label {
-    font-size: $static-font-size;
-    line-height: $static-line-height;
-  }
 
       // larger labels as placeholders
       &.label-floating,
@@ -86,24 +110,23 @@
       &.label-static,
       &.label-floating.is-focused,
       &.label-floating:not(.is-empty) {
-    @include label-position($label-top, $static-font-size, $static-line-height);
+        @include label-static($label-top, $static-font-size, $static-line-height);
       }
       // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
       &.label-floating input.form-control:-webkit-autofill ~ label.control-label {
-    @include label-position($label-top, $static-font-size, $static-line-height);
+        @include label-static($label-top, $static-font-size, $static-line-height);
+      }
+    }
   }
 }
 
-.form-group {
+// -----
-  //border: solid 1px red;
+// Inputs
-  position: relative;
+//
-
+// Reference http://www.google.com/design/spec/components/text-fields.html
-  // -----
+// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-  // Inputs
+.form-control,
-  //
+.form-group .form-control {
-  // Reference http://www.google.com/design/spec/components/text-fields.html
-  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-  .form-control {
   border: 0;
   background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
   background-size: 0 2px, 100% 1px;
@@ -118,7 +141,7 @@
   // Placeholders and and labels-as-placeholders should look the same
   @include material-placeholder {
     color: $mdb-input-placeholder-color;
-      font-weight: normal;
+    font-weight: 400;
   
 }
 
@@ -138,29 +161,26 @@
     background-image: none;
     border-bottom: 1px dotted $mdb-input-underline-color;
   }
-  }
+}
 
-  &.is-focused .form-control {
+// -----
-    outline: none;
+// Labels with form-group signalled state
-    background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+//
-    background-size: 100% 2px, 100% 1px;
+// Reference http://www.google.com/design/spec/components/text-fields.html
-    box-shadow: none;
+// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-    transition-duration: 0.3s;
+//.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
 
-    .material-input:after {
+.form-group {
-      background-color: $mdb-input-default;
+  position: relative;
-    }
-  }
 
   // -----
-  // Labels
+  // Labels with form-group signalled state
   //
   // Reference http://www.google.com/design/spec/components/text-fields.html
   // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
   &.label-static,
   &.label-placeholder,
   &.label-floating {
-
     label.control-label {
       position: absolute;
       pointer-events: none;
@@ -168,19 +188,6 @@
     }
   }
 
-  // generic labels and control labels
-  label,
-  label.control-label {
-    // same label properties as form-group placeholder
-    color: $mdb-input-placeholder-color;
-    font-weight: normal;
-  }
-
-  label.control-label {
-    // same label properties as form-group placeholder
-    margin: 16px 0 0 0; // std and lg
-  }
-
   // hide label-placeholders when the field is not empty
   &.label-placeholder:not(.is-empty){
     label.control-label{
@@ -188,30 +195,40 @@
     }
   }
 
-  @include variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
+  // Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
-  @include variations(unquote(".is-focused label.control-label"), color, $mdb-input-default); // focused label color variations
-  @include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
-
-  // default floating size/location
-  @include form-group-size-variant($mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
-
-  // sm floating size/location
-  &.form-group-sm {
-    @include form-group-size-variant($mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
-  }
-
-  // lg floating size/location
-  &.form-group-lg {
-    @include form-group-size-variant($mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
-  }
-
-  // Hints - 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;
   }
 
+  // form-group is-focused display
   &.is-focused {
+    .form-control {
+      outline: none;
+      background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
+      background-size: 100% 2px, 100% 1px;
+      box-shadow: none;
+      transition-duration: 0.3s;
+
+      .material-input:after {
+        background-color: $brand-primary;
+      }
+    }
+
+    //.variations(unquote(".is-focused label.control-label"), color, $brand-primary); // focused label color variations
+    label,
+    label.control-label {
+      color: $brand-primary;
+    }
+
+    //.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color);  // default label color variations
+    &.label-placeholder {
+      label,
+      label.control-label {
+        color: $mdb-input-placeholder-color;
+      }
+    }
+
     .help-block {
       display: block;
     }
@@ -220,10 +237,10 @@
   // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
   @include bg-img-variations(unquote(".is-focused .form-control"), $brand-primary);
 
-  @include form-group-validation-state(has-warning, $mdb-input-warning);
+  @include form-group-validation-state(has-warning, $brand-warning);
-  @include form-group-validation-state(has-error, $mdb-input-danger);
+  @include form-group-validation-state(has-error, $brand-danger);
-  @include form-group-validation-state(has-success, $mdb-input-success);
+  @include form-group-validation-state(has-success, $brand-success);
-  @include form-group-validation-state(has-info, $mdb-input-info);
+  @include form-group-validation-state(has-info, $brand-info);
 
   textarea {
     resize: none;
@@ -241,6 +258,19 @@
   }
 }
 
+// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
+@include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
+
+// default floating size/location with a form-group (need margin etc from a default form-group)
+@include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
+
+// sm floating size/location
+@include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
+
+// lg floating size/location
+@include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
+
+
 select.form-control {
 
   border: 0;
@@ -271,7 +301,7 @@ select.form-control {
 // ----------------
 // input group/addon related styles
 
-// default margin
+// default margin - no form-group required
 @include input-group-button-variation($mdb-input-padding-base-vertical);
 
 .form-group {

sass/_navbar.scss

@@ -88,7 +88,7 @@
       }
     }
 
-    @media (max-width: 767px) {
+    @media (max-width: $grid-float-breakpoint-max) {
       .navbar-text {
         color: inherit;
         margin-top: 15px;
@@ -193,7 +193,7 @@
     background-color: $indigo;
   }
 
-  @media (max-width: 1199px) {
+  @media (max-width: $screen-md-max) {
 
     .navbar-brand {
       height: 50px;

sass/_radios.scss

@@ -1,31 +1,5 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
-.form-horizontal .radio {
-  margin-bottom: 10px;
-}
-
-@mixin form-group-radio-variant($placeholder-font-size, $line-height){
-  .radio {
-    // Label is set in _inputs.less
-  }
-}
-
-.form-group {
-
-  // default label size/location
-  @include form-group-radio-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
-
-  // sm label size/location
-  &.form-group-sm {
-    @include form-group-radio-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
-  }
-
-  // lg label size/location
-  &.form-group-lg {
-    @include form-group-radio-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
-  }
-}
-
 .radio {
   label {
     cursor: pointer;

sass/_togglebutton.scss

@@ -1,27 +1,6 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
-@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
+.togglebutton {
-  .togglebutton {
-    // Label is set in _inputs.less
-  }
-}
-
-.form-group {
-
-  //// default label size/location
-  @include form-group-toggle-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
-
-  // sm label size/location
-  &.form-group-sm {
-    @include form-group-toggle-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
-  }
-
-  // lg label size/location
-  &.form-group-lg {
-    @include form-group-toggle-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
-  }
-
-  .togglebutton {
   vertical-align: middle;
   &, label, input, .toggle {
     user-select: none;
@@ -86,5 +65,4 @@
   @include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $brand-primary);
   // Ripple on
   @include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $brand-primary);
-  }
 }

sass/_typography.scss

@@ -1,17 +1,17 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
 .text-warning {
-  color: $btn-warning;
+  color: $brand-warning;
 }
 .text-primary {
-  color: $btn-primary;
+  color: $brand-primary;
 }
 .text-danger {
-  color: $btn-danger;
+  color: $brand-danger;
 }
 .text-success {
-  color: $btn-success;
+  color: $brand-success;
 }
 .text-info {
-  color: $btn-info;
+  color: $brand-info;
 }

sass/_variables.scss

@@ -39,56 +39,8 @@ $btn-default: transparent !default;
 $btn-default-text: $lightbg-text !default;
 //---
 
-$btn-primary: $brand-primary !default;
-$btn-primary-text: $darkbg-text !default;
-
-$btn-success: $brand-success !default;
-$btn-success-text: $darkbg-text !default;
-
-$btn-info: $brand-info !default;
-$btn-info-text: $darkbg-text !default;
-
-$btn-warning: $brand-warning !default;
-$btn-warning-text: $darkbg-text !default;
-
-$btn-danger: $brand-danger !default;
-$btn-danger-text: $darkbg-text !default;
-
-$mdb-input-unchecked: rgba(137, 137, 137, 0.3) !default;
-$mdb-input-checked: rgba(15, 157, 88, 0.3) !default;
 
 $mdb-radio-default: $lightbg-text !default;
-$mdb-radio-primary: $brand-primary !default;
-$mdb-radio-success: $brand-success !default;
-$mdb-radio-info:    $brand-info !default;
-$mdb-radio-warning: $brand-warning !default;
-$mdb-radio-danger:  $brand-danger !default;
-
-$mdb-input-danger: $brand-danger !default;
-$mdb-input-default: $brand-primary !default;
-$mdb-input-warning: $brand-warning !default;
-$mdb-input-success: $brand-success !default;
-$mdb-input-info:    $brand-info !default;
-
-$alert-success: $brand-success !default;
-$alert-info: $brand-info !default;
-$alert-warning: $brand-warning !default;
-$alert-danger: $brand-danger !default;
-
-$progress-success: $brand-success !default;
-$progress-info: $brand-info !default;
-$progress-warning: $brand-warning !default;
-$progress-danger: $brand-danger !default;
-
-$font-size-base: 14px !default;
-$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
-$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
-
-$screen-sm:                  768px !default;
-$screen-sm-min:              $screen-sm !default;
-
-
-// Global Material variables
 $mdb-border-radius: 2px !default;
 
 // --------------------
@@ -104,7 +56,7 @@ $mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
 
 // FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
 //** Unit-less `line-height` for use in components like buttons.
-$mdb-input-line-height-base:        1.428571429 !default; // 20/14
+$mdb-input-line-height-base:        $line-height-base; //1.428571429 !default; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 $mdb-input-line-height-computed:    floor(($mdb-input-font-size-base * $mdb-input-line-height-base)) !default; // ~20px
 $mdb-input-line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome