ct/modules/input-sk/input-sk.scss

@import '../colors';

input-sk {
  input {
    background-color: inherit;
    color: inherit;
    position: relative;
    outline: none;
    box-shadow: none;
    padding: 0;
    max-width: 100%;
    width: 100%;
    border: none;
    text-align: inherit;
    vertical-align: bottom;
    font-family: 'Roboto', 'Noto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  /* Label appears as placeholder, shrinks to upper left on focus
  or when input is nonempty. */
  label {
    position: absolute;
    pointer-events: none;
    opacity: 0.7;
    left: 2px;
    transition: 0.2s ease all;
  }

  .input-container {
    padding-top: 15px;
    position: relative;
  }

  input:focus ~ label,
  input:not(:focus):valid ~ label {
    transform: translate(-10%, -75%) scale(0.75);
    left: 0px;
    opacity: 1;
  }

  input:focus ~ label {
    color: var(--primary);
  }

  /* Underline denoting input grows color on focus. */
  .underline-container {
    height: 2px;
    position: relative;
  }

  .underline-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid var(--on-background);
  }

  .underline {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-bottom: 2px solid var(--primary);
    transform-origin: center center;
    transform: scale3d(0, 4, 1);
  }

  // When input is clicked we 'undo' the center based horizontal collapse.
  input:focus ~ .underline-container > .underline {
    transform: none;
    transition: transform 0.4s;
  }
}