angular__angular/src/lib/input/input-container.scss

@import '../core/style/variables';
@import '../core/style/vendor-prefixes';
@import '../core/style/form-common';


// Min amount of space between start and end hint.
$mat-input-hint-min-space: 1em !default;
// The height of the underline.
$mat-input-underline-height: 1px !default;


.mat-input-container {
  display: inline-block;
  position: relative;

  // To avoid problems with text-align.
  text-align: left;

  [dir='rtl'] & {
    text-align: right;
  }
}

// Global wrapper. We need to apply margin to the element for spacing, but
// cannot apply it to the host element directly.
.mat-input-wrapper {
  position: relative;
}

// We use a flex layout to baseline align the prefix and suffix elements.
// The underline is outside of it so it can cover all of the elements under this flex container.
.mat-input-flex {
  display: inline-flex;
  align-items: baseline;
  width: 100%;
}

.mat-input-prefix,
.mat-input-suffix {
  white-space: nowrap;
  flex: none;

  // Allow icons in a prefix or suffix to adapt to the correct size.
  .mat-icon,
  .mat-datepicker-toggle {
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
  }

  // Allow icon buttons in a prefix or suffix to adapt to the correct size.
  .mat-icon-button {
    font: inherit;
    vertical-align: baseline;

    .mat-icon {
      font-size: inherit;
      width: 1em;
      height: 1em;
      vertical-align: baseline;
    }
  }
}

.mat-input-infix {
  display: block;
  position: relative;
  flex: auto;
}

// The Input element proper.
.mat-input-element {
  // Font needs to be inherited, because by default <input> has a system font.
  font: inherit;

  // The Material input should match whatever background it is above.
  background: transparent;

  // If background matches current background then so should the color for proper contrast
  color: currentColor;

  // By default, <input> has a padding, border, outline and a default width.
  border: none;
  outline: none;
  padding: 0;
  width: 100%;

  // Needed to make last line of the textarea line up with the baseline.
  vertical-align: bottom;

  // Undo the red box-shadow glow added by Firefox on invalid inputs.
  // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
  &:-moz-ui-invalid {
    box-shadow: none;
  }

  // Pseudo-class for Chrome and Safari auto-fill to move the placeholder to
  // the floating position. This is necessary because these browsers do not actually
  // fire any events when a form auto-fill is occurring.
  // Once the autofill is committed, a change event happen and the regular md-input-container
  // classes take over to fulfill this behaviour.
  // Assumes the autofill is non-empty.
  &:-webkit-autofill + .mat-input-placeholder-wrapper {
    // The input is still technically empty at this point, so we need to hide non-floating
    // placeholders to prevent overlapping with the autofilled value.
    .mat-input-placeholder {
      display: none;
    }

    .mat-float {
      display: block;
      transition: none;
    }
  }

  // Note that we can't use something like visibility: hidden or
  // display: none, because IE ends up preventing the user from
  // focusing the input altogether.
  @include input-placeholder {
    // Needs to be !important, because the placeholder will end up inheriting the
    // input color in IE, if the consumer overrides it with a higher specificity.
    color: transparent !important;
  }
}

// Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when
// determining overflow.
.mat-input-placeholder-wrapper {
  position: absolute;
  left: 0;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;  // We shouldn't catch mouse events (let them through).
}

// Prevents IE from always adding a scrollbar by default.
textarea.mat-input-element {
  overflow: auto;
}

// The placeholder label. This is invisible unless it is. The logic to show it is
// basically `empty || (float && (!empty || focused))`. Float is dependent on the
// `floatingPlaceholder` input.
.mat-input-placeholder {
  // The placeholder is after the <input>, but needs to be aligned top-left of the
  // infix <div>.
  position: absolute;
  left: 0;

  font: inherit;
  pointer-events: none;  // We shouldn't catch mouse events (let them through).

  // Put ellipsis text overflow.
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  // The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE.
  transform: perspective(100px);
  -ms-transform: none;

  transform-origin: 0 0;
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
              color $swift-ease-out-duration $swift-ease-out-timing-function,
              width $swift-ease-out-duration $swift-ease-out-timing-function;

  // Hide the placeholder initially, and only show it when it's floating or the input is empty.
  display: none;

  &.mat-empty,
  &.mat-float:not(.mat-empty),
  .mat-focused &.mat-float {
    display: block;
  }

  [dir='rtl'] & {
    transform-origin: 100% 0;
    left: auto;
    right: 0;
  }
}

// Disable the placeholder animation when the input is not empty (this prevents placeholder
// animating up when the value is set programmatically).
.mat-input-placeholder:not(.mat-empty) {
  transition: none;
}

// The underline is what's shown under the input, its prefix and its suffix.
// The ripple is the blue animation coming on top of it.
.mat-input-underline {
  position: absolute;
  height: $mat-input-underline-height;
  width: 100%;

  &.mat-disabled {
    @include mat-control-disabled-underline();
    background-position: 0;
    background-color: transparent;
  }

  .mat-input-ripple {
    position: absolute;
    height: $mat-input-underline-height * 2;
    top: 0;
    width: 100%;
    transform-origin: 50%;
    transform: scaleX(0.5);
    visibility: hidden;
    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;

    .mat-focused &,
    .mat-input-invalid & {
      visibility: visible;
      transform: scaleX(1);
      transition: transform 150ms linear,
      background-color $swift-ease-in-duration $swift-ease-in-timing-function;
    }
  }
}

// Wrapper for the hints and error messages. Provides positioning and text size.
// Note that we're using `top` in order to allow for stacked children to flow downwards.
.mat-input-subscript-wrapper {
  position: absolute;
  width: 100%;
  overflow: hidden; // prevents multi-line errors from overlapping the input
}

// Scale down icons in the placeholder and hint to be the same size as the text.
.mat-input-subscript-wrapper,
.mat-input-placeholder-wrapper {
  .mat-icon,
  .mat-datepicker-toggle {
    width: 1em;
    height: 1em;
    font-size: inherit;
    vertical-align: baseline;
  }
}

// Clears the floats on the hints. This is necessary for the hint animation to work.
.mat-input-hint-wrapper {
  display: flex;
}

// Spacer used to make sure start and end hints have enough space between them.
.mat-input-hint-spacer {
  flex: 1 0 $mat-input-hint-min-space;
}

// Single error message displayed beneath the input.
.mat-input-error {
  display: block;
}