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

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


$mat-input-floating-placeholder-scale-factor: 0.75 !default;

// Gradient for showing the dashed line when the input is disabled.
$mat-input-underline-disabled-background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);

// Applies a floating placeholder above the input itself.
@mixin mat-input-placeholder-floating {
  display: block;
  transform: translateY(-1.35em) scale($mat-input-floating-placeholder-scale-factor);
  width: 100% / $mat-input-floating-placeholder-scale-factor;
}

.mat-input-container {
  display: inline-block;
  position: relative;
  font-family: $mat-font-family;
  line-height: normal;

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

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

  // Allow icons in a prefix/suffix/hint/etc to adapt to the correct size.
  & .mat-icon {
    width: auto;
    height: auto;
    font-size: 100%;
    vertical-align: top;
  }
}

// Global wrapper. We need to apply margin to the element for spacing, but
// cannot apply it to the host element directly.
.mat-input-wrapper {
  margin: 1em 0;
  // Account for the underline which has 4px of margin + 2px of border.
  padding-bottom: 6px;
}

// We use a table layout to baseline align the prefix and suffix classes.
// The underline is outside of it so it can cover all of the elements under
// this table.
// Flex does not respect the baseline. What we really want is akin to a table
// as want an inline-block where elements don't wrap.
.mat-input-table {
  display: inline-table;
  flex-flow: column;
  vertical-align: bottom;
  width: 100%;

  & > * {
    display: table-cell;
  }
}

.mat-input-infix {
  position: relative;
}

// 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%;

  .mat-end & {
    text-align: right;

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

  // 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 .mat-float {
    @include mat-input-placeholder-floating;
  }

  // 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 {
    color: transparent;
  }
}

// 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;
  top: 0;

  font-size: 100%;
  pointer-events: none;  // We shouldn't catch mouse events (let them through).
  z-index: 1;
  padding-top: 1em;

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

  transform: translateY(0);
  transform-origin: bottom left;
  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;

  &.mat-empty {
    display: block;
    cursor: text;
  }

  // Show the placeholder above the input when it's not empty, or focused.
  &.mat-float:not(.mat-empty), .mat-focused &.mat-float {
    @include mat-input-placeholder-floating;
  }

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

// 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;
  top: -1em;
  width: 100%;
  padding-top: 1em;
  overflow: hidden;
  pointer-events: none;  // We shouldn't catch mouse events (let them through).
  transform: translate3d(0, 0, 0); // Prevents the label from shifting after the animation is done.

  // Keeps the element height since the placeholder text is `position: absolute`.
  &::after {
    content: '';
    display: inline-table;
  }
}


// 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: 1px;
  width: 100%;
  margin-top: 4px;
  border-top-width: 1px;
  border-top-style: solid;

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

  .mat-input-ripple {
    position: absolute;
    height: 2px;
    z-index: 1;
    top: -1px;
    width: 100%;
    transform-origin: top;
    opacity: 0;
    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;

    .mat-focused & {
      opacity: 1;
    }
  }
}

// The hint is shown below the underline. There can be more than one; one at the start
// and one at the end.
.mat-hint {
  display: block;
  position: absolute;
  font-size: 75%;
  bottom: 0;

  &.mat-right {
    right: 0;
  }

  [dir='rtl'] & {
    right: 0;
    left: auto;

    &.mat-right {
      right: auto;
      left: 0;
    }
  }
}

.mat-input-prefix, .mat-input-suffix {
  // Prevents the prefix and suffix from stretching together with the container.
  width: 0.1px;
  white-space: nowrap;
}