MDC-based form-field standard appearance

_mdc-form-field-standard-appearance.scss

@import '@material/rtl/mixins';
@import '@material/floating-label/mixins';
@import '@material/textfield/variables';
@import 'form-field-sizing';

// Styles for the standard appearance in the MDC-based form-field. MDC has styles for
// full-width text-fields which kind of look like the standard appearance. Though these
// styles cannot be used because they do not work for inputs with floating labels, or
// textareas which are intended to be displayed in the standard appearance. We create our
// own styles for the standard appearance that work for all types of inputs and textareas
// and are backwards-compatible with the non-MDC based form-field.
// TODO(devversion): consider proposing these styles to the MDC text-field implementation.
@mixin _mat-form-field-standard-appearance() {
  .mat-mdc-form-field-standard {
    // *Note*: Needs increased specificity because the default padding set by MDC is applied
    // with high specificity for text-fields without floating label.
    .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mdc-text-field__input:not(textarea) {
      // Resets the default padding set by MDC for inputs. This is necessary because
      // in the standard appearance the inputs should expand to the full width of the
      // inner text-field and not have any horizontal and bottom padding.
      padding: $mdc-text-field-input-padding-top 0 0;
    }

    // Reset the horizontal spacing in the standard appearance.
    // TODO(devversion): remove extra specificity if we removed the ":not(outline-appearance)"
    // selector from the structure overwrites. Blocked on material-components-web#5326.
    .mat-mdc-text-field-wrapper > .mat-mdc-form-field-flex {
      padding: 0;
    }

    // Ensures that the floating label in the docked state is on the baseline
    // of the input in the standard appearance (by default in MDC the floating label
    // is moved up and there is spacing between the bottom line).
    .mdc-floating-label {
      transform: translateY(0%);
      @include mdc-rtl-reflexive-position(left, 0);
    }

    // Re-create the label float styles because we overwrite the the docked label
    // position and the default MDC floating label styles have a lower specificity.
    @include mdc-floating-label-float-position($mdc-text-field-label-position-y);

    // Unset the default text-field background and hide the background hover effect.
    .mat-mdc-text-field-wrapper {
      background-color: unset;

      &::before, &::after {
        display: none;
      }
    }
  }
}