material-ui/src/less/components/input.less

Material Design UI components built with React

.mui-input {
  position: relative;
  margin-top: 24px;
  margin-bottom: 48px;

  textarea {
    background-color: transparent;
    font-size: @input-font-size;
    border: 0;
    outline: none;
    border-bottom: 1px solid lightgray;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 14px;
    width: @input-width;

    &:focus, &:valid {
      outline: none;
      box-shadow: none;
      padding: 0;
      margin: 0;

      &+.mui-input-placeholder {
        font-size: 13px;
        color: blue;
        top: -27px;

        &+.mui-input-highlight {
          width: 0;
          background-color: blue;
          left: 0;
          top: 1px;

          &+.mui-input-bar {

            &::before, &::after {
              background-color: blue;
              width: 50%;
            }

            &+.mui-input-description {
              display: block;
            }
          }
        }
      }
    }

    &:not(:focus) {
      &+.mui-input-placeholder {
        font-size: 16px;
        color: gray;
      }
    }

    &:not(:focus):valid {
      &+.mui-input-placeholder {
        font-size: 13px;
        color: gray;

        &+.mui-input-highlight {
          &+.mui-input-bar {
            &::before, &::after {
              width: 0;
            }

            &+.mui-input-description {
              display: none;
            }
          }
        }
      }
    }

    &+.mui-input-placeholder {
      position: absolute;
      left: 0;
      top: 8px;

      &+.mui-input-highlight {
        &+.mui-input-bar {
          &+.mui-input-description {
            position: relative;
            top: 8px;
          }
        }
      }
    }
  }

  input {
    background-color: transparent;
    font-size: @input-font-size;
    border: 0;
    outline: none;
    border-bottom: 1px solid lightgray;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 14px;

    &[type='text'], &[type='password'] {
      display: block;
      width: @input-width;
    }

    &:focus, &:valid {
      outline: none;
      box-shadow: none;
      &~.mui-input-placeholder {
        color: blue;
        font-size: @input-placeholder-size !important;
        font-weight: 300;
        top: -32px;
        .ease-out;
      }
      &~.mui-input-highlight {
          width: 0;
          background-color: blue;
          .ease-out;
      }
      &~.mui-input-bar {
        &::before, &::after {
          background-color: blue;
          width: 50%;
        }
      }
      &~.mui-input-description {
        display: block;
      }
    }

    &:not(:focus):valid {
      &+.mui-input-placeholder {
        color: gray;

        &+.mui-input-highlight {
          &+.mui-input-bar {
            &::before, &::after {
              width: 0;
            }

            &+.mui-input-description {
              display: none;
            }
          }
        }
      }
    }

    &+.mui-input-placeholder {
      font-size: @input-font-size;
      color: gray;
      position: absolute;
      top: -4px;
      //z-index: -1;
      .ease-out;
    }
  }

  .mui-input-highlight {
    content: '';
    position: absolute;
    background-color: transparent;
    .lh-opacity(0.25);
    height: 19px;
    top: -3px;
    width: (@input-width/2);
    z-index: -1;
  }

  .mui-input-bar {
    position: relative;
    display: block;
    width: @input-width;

    &::before, &::after {
      content: '';
      height: @input-bar-height;
      top: (-1 * @input-bar-height);
      width: 0;
      position: absolute;
      .ease-out;
    }

    &::before {
      left: 50%;
    }

    &::after {
      right: 50%;
    }
  }

  .mui-input-description {
    display: none;
    color: blue;
    position: absolute;
    top: 36px;
  }

  .mui-input-error {
    display: none;
    color: @input-error-color;
    position: absolute;
    top: 36px;
  }

  &.mui-error {
    textarea {
      &:focus, &:valid {
        &+.mui-input-placeholder {
          color: @input-error-color;

          &+.mui-input-highlight {
            width: 0;
            background-color: red;

            &+.mui-input-bar {

              &::before, &::after {
                background-color: @input-error-color;
              }

              &+.mui-input-description {
                display: none;
              }
            }
          }
        }
      }

      &+.mui-input-placeholder {
        &+.mui-input-highlight {
          &+.mui-input-bar {
            &+.mui-input-description {
              &+.mui-input-error {
                position: relative;
                top: 8px;
              }
            }
          }
        }
      }
    }

    input {
      &:focus, &:valid {
        &+.mui-input-placeholder {
          color: @input-error-color;

          &+.mui-input-highlight {
            width: 0;
            background-color: red;

            &+.mui-input-bar {

              &::before, &::after {
                background-color: @input-error-color;
              }

              &+.mui-input-description {
                display: none;
              }
            }
          }
        }
      }

    }

    .mui-input-error {
      display: block;
    }
  }

  &.mui-floating {
    margin-top: @desktop-gutter;
    input {
      &:focus {
        &+.mui-input-placeholder {
          display: block;
          color: gray;
          font-size: 16px !important;
          font-weight: 400;
          top: -4px;
        }

        &:valid {
          &+.mui-input-placeholder {
            display: none;
          }
        }
      }

      &:valid {
        &+.mui-input-placeholder {
          display: none;
        }
      }
    }
  }
}

::-webkit-input-placeholder {
   //color: red !important;
   position: absolute !important;
   top: -20px !important;
}