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

@mixin mdb-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: $mdb-label-color;

    &,
    .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: $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
      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: $mdb-label-color;
        }
      }
    }
  }

  // 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] + .mdb-radio-outer-circle {
  //  opacity: 0.5;
  //}
}

@mixin mdb-radio-color($color) {

  ~ .mdb-radio-inner-circle {
    background-color: $color;
  }

  ~ .mdb-radio-outer-circle {
    border-color: $color;
  }
}

@mixin mdb-form-color($label-color, $label-color-focus, $border-color) {

  [class^='mdb-label'],
  [class*=' mdb-label'] {
    color: $label-color;
  }

  // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
  .form-control {
    border-color: $input-border-color;
  }

  .is-focused, // may or may not be a form-group or mdb-form-group
  &.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-control-validation($label-color);

    [class^='mdb-label'],
    [class*=' mdb-label'] {
      color: $label-color-focus;
    }

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

    // underline animation color on focus
    .mdb-form-control-decorator {
      &::before,
      &::after {
        //@include gradient-vertical($label-color-focus, $input-border-color);  // seems to look better solid.  other comments?
        background-color: $label-color-focus;
      }
    }

    .mdb-help {
      color: $mdb-label-color-inner-focus;
    }
  }
}

// must be broken out for reuse - webkit selector breaks firefox
@mixin mdb-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 mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
  $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size);
  $help-font-size: ($mdb-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 mdb-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
  }

  // 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; // keep the same line height for radios and checkboxes
  }

  // Note: this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-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)
  .mdb-label-floating,
  .mdb-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
  &.is-focused,
  .is-focused,
  &.is-filled,
  .is-filled {
    .mdb-label-floating {
      @include mdb-label-static($label-static-top, $static-font-size);
    }
  }

  // static
  .mdb-label-static {
    @include mdb-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 ~ .mdb-label-floating {  FIXME: confirm that the autofill js generation of change event makes this unnecessary
  //  @include mdb-label-static($label-top, $static-font-size, $static-line-height);
  //}

  .mdb-help {
    margin-top: 0; // allow the input margin to set-off the top of the help-block
    font-size: $help-font-size;
  }
}