From fcabb79b7311ca8eb1f0cbc123159e57fb131f4e Mon Sep 17 00:00:00 2001
From: Majid Abdolhosseini <majid8911303@gmail.com>
Date: Thu, 25 Apr 2019 22:32:27 +0430
Subject: [PATCH] fix issue for compiling package

---
 scss/_drawer.scss | 345 +++++++++++++++++++++----------
 scss/_forms.scss  | 502 +++++++++++++++++++++++++++-------------------
 2 files changed, 534 insertions(+), 313 deletions(-)

diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 6fdf69c9..b0d8d4f1 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -1,120 +1,253 @@
-// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
+// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
 
-// Drawer.
-.bmd-layout-drawer {
-  position: absolute;
-  z-index: 5; // over a header and content
-  box-sizing: border-box;
-  display: flex;
+@mixin bmd-drawer-x-out($size) {
+  @each $side, $abbrev in (left: l, right: r) {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
+      > .bmd-layout-drawer {
+        // position
+        top: 0;
+        #{$side}: 0;
 
-  flex-direction: column;
-  flex-wrap: nowrap;
+        width: $size;
+        height: 100%;
 
-  max-height: 100%;
-  overflow: visible;
-  overflow-y: auto;
-  font-size: .875rem;
-  background: $bmd-layout-drawer-bg-color;
+        @if $side == left {
+          transform: translateX(
+                          -$size - 10px
+          ); // initial position of drawer (closed), way off screen
+        } @else {
+          transform: translateX(
+                          $size + 10px
+          ); // initial position of drawer (closed), way off screen
+        }
+      }
 
-  // Transform offscreen.
-  transition: transform;
-  will-change: transform;
-  transform-style: preserve-3d;
-  @include box-shadow($bmd-shadow-2dp);
-  @include material-animation-default();
-
-  > * {
-    flex-shrink: 0;
-  }
-
-  // Placement of common components within the drawer
-  //  You might say this is opinionated - feedback welcome.
-  > header {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: 1rem;
-
-    .navbar-brand {
-      padding-left: 1.5rem;
-      font-size: 1.25rem;
-    }
-  }
-
-  > .list-group {
-    padding-top: 1rem;
-
-    .list-group-item {
-      padding-right: 2.5rem;
-      padding-left: 2.5rem;
-      font-size: .8125rem;
-      font-weight: 500;
+      > .bmd-layout-header,
+      > .bmd-layout-content {
+        margin-#{$side}: 0;
+      }
     }
   }
 }
 
-//----------------
-// Sizing and positioning below here
+@mixin bmd-drawer-y-out($size) {
+  @each $side, $abbrev in (top: t, bottom: b) {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
+      > .bmd-layout-drawer {
+        // position
+        #{$side}: 0;
+        left: 0;
 
-// for left or right drawers, setup widths, heights and positions
-@include bmd-drawer-x-out($bmd-drawer-x-size);
+        width: 100%;
+        height: $size;
 
-// for top or bottom drawers, setup widths, heights and positions
-@include bmd-drawer-y-out($bmd-drawer-y-size);
+        @if $side == top {
+          transform: translateY(
+                          -$size - 10px
+          ); // initial position of drawer (closed), way off screen
+        } @else {
+          transform: translateY(
+                          $size + 10px
+          ); // initial position of drawer (closed), way off screen
+        }
+      }
 
-// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
-//  as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px).
-//
-//
-// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
-//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-in`
-//  without a size (for triggered openings).  Since the xs size is 0, instead of using `bmd-drawer-in-xs`
-//  (which is mostly meaningless), we create `bmd-drawer-in` meaning always open.
-//
-//  NOTE: bmd-drawer-in-* uses media-breakpoint-up()
-//
-// bmd-drawer-out
-//  A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
-//  strange reason) both bmd-drawer-out and bmd-drawer-in are present, it appears that the closed option wins.
-//
-// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
-//  We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-overlay`.
-//  Since the xs size is 0, instead of using `bmd-drawer-overlay-xs`, we create `bmd-drawer-overlay` meaning always overlay.
-//
-//  NOTE: bmd-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios.
-//
-
-//
-// Drawer open positioning, and style options (push is default, overlay is optional)
-:not(.bmd-drawer-out) {
-  // first eliminate positioning or sizing rules if the drawer is already forced closed
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include bmd-drawer-x-in-up($bmd-drawer-x-size, $breakpoint);
-    @include bmd-drawer-y-in-up($bmd-drawer-y-size, $breakpoint);
-
-    @include bmd-drawer-x-overlay-down($breakpoint);
-    @include bmd-drawer-y-overlay-down($breakpoint);
+      > .bmd-layout-content {
+        margin-#{$side}: 0;
+      }
+    }
   }
 }
 
-////----
-//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with bmd-drawer-in-lg and allows for the bmd-drawer-in trigger
-//.kitchen-sink-drawer {
-//  $custom-size: 500px;
-//  @include bmd-drawer-x-out($custom-size);
-//  &:not(.bmd-drawer-out) {
-//    @each $breakpoint in map-keys($grid-breakpoints) {
-//      @include bmd-drawer-x-in-up($custom-size, $breakpoint);
-//    }
-//  }
-//}
-//
-////
-////----
-//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the bmd-drawer-in trigger
-//.kitchen-sink-drawer-static {
-//  $custom-size: 500px;
-//  @include bmd-drawer-x-out($custom-size); // closed by default
-//  @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
-//  @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
-//}
+@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: "&-#{$breakpoint}#{$suffix}";
+  @if $breakpoint == xs {
+    $name: "&";
+  }
+  @return $name;
+}
+
+@mixin bmd-drawer-x-in($size) {
+  @each $side, $abbrev in (left: l, right: r) {
+    &.bmd-drawer-f-#{$abbrev} {
+      // Push - drawer will push the header and content (default behavior)
+      > .bmd-layout-header {
+        width: calc(100% - #{$size});
+        margin-#{$side}: $size;
+      }
+
+      > .bmd-layout-drawer {
+        transform: translateX(0);
+      }
+
+      > .bmd-layout-content {
+        margin-#{$side}: $size;
+      }
+    }
+  }
+}
+
+@mixin bmd-drawer-y-in($size) {
+  @each $side, $abbrev in (top: t, bottom: b) {
+    &.bmd-drawer-f-#{$abbrev} {
+      // 1. Push - drawer will push the header or content
+      > .bmd-layout-header {
+        @if $side == top {
+          // only add margin-top on a header when the drawer is at the top
+          margin-#{$side}: $size;
+        }
+      }
+
+      > .bmd-layout-drawer {
+        transform: translateY(0);
+      }
+
+      > .bmd-layout-content {
+        @if $side == bottom {
+          // only add margin-bottom on content when the drawer is at the bottom
+          margin-#{$side}: $size;
+        }
+      }
+    }
+  }
+}
+
+// breakpoint based open to a particular size
+@mixin bmd-drawer-x-in-up($size, $breakpoint) {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: bmd-drawer-breakpoint-name($breakpoint, "-up");
+
+  &.bmd-drawer-in {
+    #{unquote($name)} {
+      // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
+
+      @if $breakpoint == xs {
+        // bmd-drawer-in marker class (non-responsive)
+        @include bmd-drawer-x-in($size);
+      } @else {
+        // responsive class
+        @include media-breakpoint-up($breakpoint) {
+          // bmd-drawer-f-(left and right) styles
+          @include bmd-drawer-x-in($size);
+        }
+      }
+    }
+  }
+}
+
+// breakpoint based open to a particular size
+@mixin bmd-drawer-y-in-up($size, $breakpoint) {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: bmd-drawer-breakpoint-name($breakpoint, "-up");
+
+  &.bmd-drawer-in {
+    #{unquote($name)} {
+      // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
+
+      @if $breakpoint == xs {
+        // bmd-drawer-in marker class (non-responsive)
+        @include bmd-drawer-y-in($size);
+      } @else {
+        // responsive class
+        @include media-breakpoint-up($breakpoint) {
+          // bmd-drawer-f-(left and right) styles
+          @include bmd-drawer-y-in($size);
+        }
+      }
+    }
+  }
+}
+
+@mixin bmd-drawer-x-overlay() {
+  @include bmd-layout-backdrop-in();
+
+  @each $side, $abbrev in (left: l, right: r) {
+    &.bmd-drawer-f-#{$abbrev} {
+      > .bmd-layout-header,
+      > .bmd-layout-content {
+        width: 100%;
+        margin-#{$side}: 0;
+      }
+    }
+  }
+}
+
+@mixin bmd-drawer-y-overlay() {
+  @include bmd-layout-backdrop-in();
+
+  @each $side, $abbrev in (top: t, bottom: b) {
+    &.bmd-drawer-f-#{$abbrev} {
+      > .bmd-layout-header {
+        @if $side == top {
+          // only add margin-top on a header when the drawer is at the top
+          margin-#{$side}: 0;
+        }
+      }
+
+      > .bmd-layout-content {
+        @if $side == bottom {
+          // only add margin-bottom on content when the drawer is at the bottom
+          margin-#{$side}: 0;
+        }
+      }
+    }
+  }
+}
+
+// Overlay - left/right responsive overlay classes and marker class
+@mixin bmd-drawer-x-overlay-down($breakpoint) {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: bmd-drawer-breakpoint-name($breakpoint, "-down");
+
+  &.bmd-drawer-overlay {
+    #{unquote($name)} {
+      // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
+
+      // x - left/right
+
+      @if $breakpoint == xs {
+        // overlay marker class (non-responsive)
+
+        // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
+        //  responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
+        &.bmd-drawer-overlay {
+          @include bmd-drawer-x-overlay();
+        }
+      } @else {
+        @include media-breakpoint-down($breakpoint) {
+          // overlay responsive class
+          @include bmd-drawer-x-overlay();
+        }
+      }
+    }
+  }
+}
+
+// Overlay - top/bottom responsive overlay classes and marker class
+@mixin bmd-drawer-y-overlay-down($breakpoint) {
+  // e.g. &, &-sm, &-md, &-lg
+  $name: bmd-drawer-breakpoint-name($breakpoint, "-down");
+
+  &.bmd-drawer-overlay {
+    #{unquote($name)} {
+      // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
+      //// y - top/bottom
+
+      @if $breakpoint == xs {
+        // overlay marker class (non-responsive)
+
+        // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
+        //  responsive bmd-drawer-in-* media queries above win (and overlay is ignored)
+        &.bmd-drawer-overlay {
+          @include bmd-drawer-y-overlay();
+        }
+      } @else {
+        @include media-breakpoint-down($breakpoint) {
+          // overlay responsive class
+          @include bmd-drawer-y-overlay();
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/scss/_forms.scss b/scss/_forms.scss
index a8573a7d..78888ab5 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,229 +1,317 @@
-form {
-  // ensure enough room at the bottom of any form to display a one-line bmd-help
-  margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
-
-  // reverse the above for navbars (no help expected in a navbar form)
-  .navbar & {
-    margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
-
-    .bmd-form-group {
-      display: inline-block;
-      padding-top: 0;
-    }
-
-    .btn {
-      margin-bottom: 0;
-    }
+@mixin bmd-disabled() {
+  fieldset[disabled][disabled] &,
+  &.disabled,
+  &:disabled,
+  &[disabled] {
+    @content;
   }
 }
 
-// -----
-// Inputs
-//
-// Reference http://www.google.com/design/spec/components/text-fields.html
-// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-.form-control {
-  background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
-  background-size: $bmd-form-control-bg-size;
-  border: 0;
-  transition: background 0s ease-out;
-  padding-left: 0;
-  padding-right: 0;
+@mixin bmd-selection-color() {
+  .radio label,
+  .radio-inline,
+  .checkbox label,
+  .checkbox-inline,
+  .switch label {
+    // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
+    //color: $bmd-label-color;
 
-  // The border bottom should be static in all states, the decorator will be animated over this.
-  &:focus,
-  .bmd-form-group.is-focused & {
-    background-size: $bmd-form-control-bg-size-active;
-    //border-bottom: $input-btn-border-width solid $input-border-color;
-    transition-duration: 0.3s;
-  }
-}
+    &,
+    .is-focused & {
+      // form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
+      color: $bmd-label-color;
 
-// 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?
-//
-.bmd-help {
-  position: absolute;
-  display: none;
-  font-size: .8rem;
-  font-weight: normal;
-  @extend .text-muted;
+      // on focus just darken the specific labels, do not turn them to the brand-primary
+      @include hover-focus-active() {
+        //&:hover,
+        //&:focus {
+        color: $bmd-label-color-inner-focus;
+      }
 
-  .bmd-form-group.is-focused & {
-    display: block;
-  }
-
-  //--------------------------------------
-  // Multiple help blocks
-  // - absolute positioning is used above to prevent bouncing
-  // - when there is more than one, this will bounce but will at least show
-  &:nth-of-type(2) {
-    padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
-  }
-
-  + .bmd-help {
-    position: relative;
-    margin-bottom: 0;
-  }
-}
-
-// -----
-// State coloring: default, success, info, warning, danger
-//
-@include bmd-selection-color();
-@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
-
-.has-success {
-  @include bmd-form-color(theme-color(success), theme-color(success), theme-color(success));
-}
-
-.has-info {
-  @include bmd-form-color(theme-color(info), theme-color(info), theme-color(info));
-}
-
-.has-warning {
-  @include bmd-form-color(theme-color(warning), theme-color(warning), theme-color(warning));
-}
-
-.has-danger {
-  @include bmd-form-color(theme-color(danger), theme-color(danger), theme-color(danger));
-}
-
-// Reference http://www.google.com/design/spec/components/text-fields.html
-// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-//.variations(unquote(" label"), color, $bmd-input-placeholder-color);  // default label color variations
-
-// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work.  That's the only purpose.
-.bmd-form-group {
-  position: relative;
-
-  // -----
-  // Labels
-  //
-  // Reference http://www.google.com/design/spec/components/text-fields.html
-  // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
-  [class^='bmd-label'],
-  [class*=' bmd-label'] {
-    position: absolute;
-    pointer-events: none;
-    transition: 0.3s ease all;
-
-    // hint to browser for optimization
-    &.bmd-label-floating {
-      will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
-    }
-  }
-
-  // hide label-placeholders when the field is filled
-  &.is-filled .bmd-label-placeholder {
-    display: none;
-  }
-
-  // Optional class to make the text field inline collapsible/expandable (collapsed by default)
-  //    This uses the BS collapse js to make the width expand.
-  //    `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
-  //    FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
-  &.bmd-collapse-inline {
-    display: flex;
-    align-items: center;
-    padding: 0; // get rid of any padding as this is a width transition
-    min-height: 2.1em;
-
-    // Expandable Holder.
-    .collapse {
-      flex: 1;
-      display: none;
-      &.show {
-        // This is an unfortunate hack. Animating between widths in percent (%)
-        // in many browsers (Chrome, Firefox) only animates the inner visual style
-        // of the input - the outer bounding box still 'jumps'.
-        // Thus assume a sensible maximum, and animate to/from that value.
-        max-width: 1200px;
+      // correct the above focus color for disabled items
+      label:has(input[type=radio][disabled]),
+        // css 4 which is unlikely to work for a while, but no other pure css way.
+      label:has(input[type=checkbox][disabled]),
+        // css 4
+      fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus {
+          color: $bmd-label-color;
+        }
       }
     }
-
-    .collapsing,
-    .width:not(.collapse),
-    // collapsing is removed and momentarily only width is present
-    .collapse.show {
-      display: block;
-    }
-
-    .collapsing {
-      @include material-animation-default();
-    }
   }
 
-  // default floating size/location with an bmd-form-group
-  @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
+  // Style for disabled inputs  OLD, use color approach with opacity built in, see radios
+  //fieldset[disabled] &,
+  //fieldset[disabled] & input[type=checkbox],
+  //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
+  //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
+  //input[type=checkbox][disabled] + .bmd-radio-outer-circle {
+  //  opacity: 0.5;
+  //}
+}
 
-  // sm floating size/location
-  &.bmd-form-group-sm {
-    @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
+@mixin bmd-radio-color($color) {
+  &::after {
+    border-color: $color;
   }
-
-  // lg floating size/location
-  &.bmd-form-group-lg {
-    @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
+  &::before {
+    background-color: $color;
   }
 }
 
-// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
-@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
-
-select {
-  &,
-  &.form-control {
-    // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this.
-    -moz-appearance: none;
-    -webkit-appearance: none;
+@mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
+  [class^='bmd-label'],
+  [class*=' bmd-label'] {
+    color: $label-color;
   }
-}
 
-// Input files - hide actual input - requires specific markup in the sample.
-//.bmd-form-group input[type=file] {
-//  opacity: 0;
-//  position: absolute;
-//  top: 0;
-//  right: 0;
-//  bottom: 0;
-//  left: 0;
-//  width: 100%;
-//  height: 100%;
-//  z-index: 100;
-//}
+  // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
+  .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-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%
+    );
 
-//
-//
-//.form-horizontal {
-//
-//  // Consistent vertical alignment of radios and checkboxes
-//  .radio,
-//  .checkbox,
-//  .radio-inline,
-//  .checkbox-inline {
-//    padding-top: 0;
-//  }
-//
-//  .radio {
-//    margin-bottom: 10px;
-//  }
-//
-//  label {
-//    text-align: right;
-//  }
-//
-//  label {
-//    margin: 0;
-//  }
-//}
+    // bg image is always there, we just need to reveal it
+    &,
+    .is-focused & {
+      background-image: $underline-background-image;
+    }
 
-.form-inline {
-  @include media-breakpoint-up(sm) {
-    .input-group {
-      display: inline-flex;
-      align-items: center;
+    &: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 {
+      &,
+      .is-focused & {
+        background-image: $underline-background-image, $form-icon-success;
+      }
+    }
+    &.form-control-warning {
+      &,
+      .is-focused & {
+        background-image: $underline-background-image, $form-icon-warning;
+      }
+    }
+    &.form-control-danger {
+      &,
+      .is-focused & {
+        background-image: $underline-background-image, $form-icon-danger;
+      }
+    }
+  }
+
+  .is-focused,
+    // may or may not be a form-group or bmd-form-group
+  #{if(&, "&", "*")}.is-focused {
+    // on focus set borders and labels to the validation color
+
+    // Use the BS provided mixin for the bulk of the color
+    @include form-validation-state("valid", $label-color);
+
+    [class^='bmd-label'],
+    [class*=' bmd-label'] {
+      color: $label-color-focus;
+    }
+
+    .bmd-label-placeholder {
+      color: $label-color; // keep the placeholder color
+    }
+
+    // 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;
+    //}
+
+    .bmd-help {
+      color: $bmd-label-color-inner-focus;
     }
   }
 }
+
+// must be broken out for reuse - webkit selector breaks firefox
+@mixin bmd-label-static($label-top, $static-font-size) {
+  top: $label-top;
+  left: 0;
+  // must repeat because the previous (more generic) selectors
+  font-size: $static-font-size;
+}
+
+@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
+  $variant-input-height: (
+          ($font-size * $variant-line-height) + ($variant-padding-y * 2)
+  );
+  $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
+  $help-font-size: ($bmd-help-size-ratio * $font-size);
+
+  $label-static-top: $label-top-margin;
+  $label-placeholder-top: $label-top-margin + $static-font-size +
+    $variant-padding-y;
+
+  //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
+
+  //Label height: 72dp
+  //Padding above label text: 16dp
+  //Padding between label and input text: 8dp
+  //Padding below input text (including divider): 16dp
+  //Padding below text divider: 8dp
+
+  @if $form-group-context {
+    // Create a space at the top of the bmd-form-group for the label.
+    //  The label is absolutely positioned, so we use top padding to make space.  This padding extends over the label down to the top of the input (padding).
+    padding-top: ($label-top-margin + $static-font-size);
+    // note: bottom-margin of this is determined by $spacer.  @see _spacer.scss
+    //margin-bottom: (1.5 * $help-font-size);
+  }
+
+  // TODO: remove this when known stable.  https://github.com/FezVrasta/bootstrap-material-design/issues/849
+  //@else {
+  //
+  //  // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that
+  //  //  any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups
+  //  .radio,
+  //  label.radio-inline,
+  //  .checkbox,
+  //  label.checkbox-inline,
+  //  .switch {
+  //    padding-top: $spacer-y;
+  //  }
+  //}
+
+  // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space
+  //  from the default line-height of 1.5
+  .form-control,
+  label,
+  input::placeholder {
+    line-height: $variant-line-height;
+  }
+
+  .radio label,
+  label.radio-inline,
+  .checkbox label,
+  label.checkbox-inline,
+  .switch label {
+    line-height: $line-height-base; // keep the same line height for radios and checkboxes
+  }
+
+  // Note: this may be inside or outside a form-group, may be .bmd-form-group.bmd-form-group-sm or .bmd-form-group.bmd-form-group-lg
+  input::placeholder {
+    font-size: $font-size;
+  }
+
+  // generic labels used anywhere in the form
+  .checkbox label,
+  .radio label,
+  label {
+    font-size: $font-size;
+  }
+
+  // floating/placeholder default (no focus)
+  .bmd-label-floating,
+  .bmd-label-placeholder {
+    //@debug "top: #{$label-as-placeholder-top}";
+    top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding
+  }
+
+  // floating focused/filled will look like static
+  #{if(&, "&", "*")}.is-focused,
+  .is-focused,
+  #{if(&, "&", "*")}.is-filled,
+  .is-filled {
+    .bmd-label-floating {
+      @include bmd-label-static($label-static-top, $static-font-size);
+    }
+  }
+
+  // static
+  .bmd-label-static {
+    @include bmd-label-static($label-static-top, $static-font-size);
+  }
+  // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
+  //input:-webkit-autofill ~ .bmd-label-floating {  FIXME: confirm that the autofill js generation of change event makes this unnecessary
+  //  @include bmd-label-static($label-top, $static-font-size, $static-line-height);
+  //}
+
+  .bmd-help {
+    margin-top: 0; // allow the input margin to set-off the top of the help-block
+    font-size: $help-font-size;
+  }
+
+  // validation icon placement
+  .form-control {
+    &.form-control-success,
+    &.form-control-warning,
+    &.form-control-danger {
+      $icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5);
+      background-size: $bmd-form-control-bg-size, $icon-bg-size;
+
+      &,
+      &:focus,
+      .bmd-form-group.is-focused & {
+        padding-right: ($input-padding-x * 3);
+        background-repeat: $bmd-form-control-bg-repeat-y, no-repeat;
+        background-position: $bmd-form-control-bg-position,
+        center right ($variant-input-height * .25);
+      }
+
+      &:focus,
+      .bmd-form-group.is-focused & {
+        background-size: $bmd-form-control-bg-size-active, $icon-bg-size;
+      }
+    }
+  }
+}
\ No newline at end of file