mdb-ui-kit/scss/_forms.scss

@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
.form-control {
  // The border bottom should be static in all states, the decorator will be animated over this.
  &,
  &:focus,
  .mdb-form-group.is-focused & {
    border: 0;
    border-bottom: $input-btn-border-width solid $input-border-color;
  }

  &[disabled],
  fieldset[disabled] & {
    border-bottom: $input-btn-border-width dotted $input-border-color;
  }
}

// Focus underline animation =================================
.mdb-form-control-decorator {
  position: relative;
  top: (-1 * $input-btn-border-width); // move the top up enough to overlay the border from the input
  display: block;
  &::before,
  &::after {
    position: absolute;
    width: 0;
    height: $input-btn-border-width;
    content: "";
    @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
    .form-control:focus ~ &,
    .mdb-form-group.is-focused .form-control ~ & {
      width: 50%;
    }
  }
  &::before {
    left: 50%;
  }
  &::after {
    right: 50%;
  }
}

// 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
//
// 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, $mdb-input-placeholder-color);  // default label color variations

.mdb-form-group {
  position: relative;

  // -----
  // 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 {
    //  position: absolute;
    //  pointer-events: none;
    //  transition: 0.3s ease all;
    //
    //  label {
    //    position: relative;
    //  }
    //}
  }

  // hint to browser for optimization
  &.label-floating {
    label {
      will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback
    }
  }

  // hide label-placeholders when the field is not empty
  &.label-placeholder:not(.is-empty) {
    label {
      display: none;
    }
  }

  &.is-focused {
    label {
      color: $brand-primary;

      label { // inner label e.g. checkbox or radio label
        color: $mdb-label-color-inner-focus;
      }
    }

    &.label-placeholder {
      label {
        color: $mdb-label-color;

        label { // inner label e.g. checkbox or radio label
          color: $mdb-label-color-inner-focus;
        }
      }
    }

    .mdb-help {
      color: $mdb-label-color-inner-focus;
    }
  }
  // default floating size/location with an mdb-form-group
  @include mdb-form-group-size-variant($font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default");

  // sm floating size/location
  //&.mdb-form-group-sm {
  //  @include mdb-form-group-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm");
  //}
  //
  //// lg floating size/location
  //&.mdb-form-group-lg {
  //  @include mdb-form-group-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg");
  //}
}

// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
//@include mdb-form-group-size-variant($font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base);

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;
  }
}

// Input files - hide actual input - requires specific markup in the sample.
//.mdb-form-group input[type=file] {
//  opacity: 0;
//  position: absolute;
//  top: 0;
//  right: 0;
//  bottom: 0;
//  left: 0;
//  width: 100%;
//  height: 100%;
//  z-index: 100;
//}

//  I don't think this was in use...
//legend {
//  border-bottom: 0;
//}
//
//
//.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;
//  }
//}