mdb-ui-kit/scss/mixins/_forms.scss

// must be broken out for reuse - webkit selector breaks firefox
@mixin label-static($label-top, $static-font-size, $static-line-height) {
  label.control-label {
    top: $label-top;
    left: 0;
    // must repeat because the selector above is more specific than the general label sizing
    //font-size: $static-font-size;
    //line-height: $static-line-height;
  }
}

@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size) {
  .form-control {
    @include mdb-input-placeholder {
      font-size: $placeholder-font-size;
      //    line-height: $line-height;
    }
    //
    //  // 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;
  }

  // smaller focused or static size
  label.control-label {
    //font-size: $static-font-size;
    //line-height: $static-line-height;
    //margin: 16px 0 0 0; // std and lg
  }

  //.mdb-help {
  //  margin-top: 0; // allow the input margin to set-off the top of the help-block
  //  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;
    @include mdb-input-placeholder {
      color: $label-color;
    }
  }

  // Set validation states also for addons
  .input-group-addon {
    border-color: $border-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 overlayed focus animation draws attention
    .form-control {
      border-color: $input-border-color;
    }

    &.is-focused {
      // on focus set borders and labels to the validation color
      @include mdb-form-color($color, $color);

      // underline animation color on focus
      .mdb-form-control-decorator {
        &::before,
        &::after {
          @include gradient-vertical($color, $input-border-color);
        }
      }
    }
  }
}

@mixin mdb-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;

  $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
  $label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;

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

  // this is outside a form-group
  @if not $parent {
    @include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
  } @else {
    // this is inside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
    #{$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;

      // FIXME: need to avoid top margin http://v4-alpha.getbootstrap.com/content/reboot/#approach
      // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
      //margin: ($label-top-margin + $static-font-size) 0 0 0; // old, try padding below
      //padding-top: ($label-top-margin + $static-font-size);

      // larger labels as placeholders
      &.label-floating,
      &.label-placeholder {
        label.control-label {
          top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
          //font-size: $placeholder-font-size;
          //line-height: $line-height;
        }
      }

      // static, focused, or autofill floating labels
      &.label-static,
      &.label-floating.is-focused,
      &.label-floating:not(.is-empty) {
        @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-static($label-top, $static-font-size, $static-line-height);
      }
    }
  }
}

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

    // on focus just darken the specific labels, do not turn them to the brand-primary
    &:hover,
    &:focus {
      color: $mdb-label-color-inner-focus;
    }

    // correct the above focus color for disabled items
    fieldset[disabled] & {
      color: $mdb-label-color;
    }
  }
}

//// Placeholder text
@mixin mdb-input-placeholder() {
  &::placeholder {
    @content;
  }
}