paper-input/src/index.css

Paper Input React component

:root {
  --color_accent: #42A5F5;
  --color_error: #D34336;
  --color_transparent: rgba(0, 0, 0, 0);
  --color_border_bottom: rgba(0, 0, 0, 0.12);
  --color_label_text: rgba(0, 0, 0, 0.26);
}

.paper-input {
  position: relative;
  width: 100%;
  margin: 36px 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: .05em;
}

.paper-input.big, .paper-input.big input {
  font-size: 16px;
}

.paper-input button {
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
  position: absolute;
  right: 0;
  bottom: 4px;
}

.paper-input input {
  display: inline-block;
  width: 100%;
  margin: 0;
  border: none !important;
  border-bottom: 1px solid var(--color_border_bottom) !important;
  border-radius: 0px !important;
  padding: 4px 0;
  background-color: var(--color_transparent);
  letter-spacing: .05em;
}

.paper-input input:-webkit-autofill {
  box-shadow: inset 0 0 0 25px #ffffff;
  border-bottom: 1px solid var(--color_border_bottom);
}

.paper-input input[disabled] {
  border-bottom: 1px dashed var(--color_border_bottom) !important;
  background-color: var(--color_transparent);
}

.paper-input input[readonly] {
  border-bottom: none !important;
  background-color: var(--color_transparent);
  pointer-events: none;
}

.paper-input input ~ label {
  width: 100%;
  letter-spacing: normal;
  position: absolute;
  pointer-events: none;
  left: 0;
  bottom: 4px;
  color: var(--color_label_text);
  transform: scale(1) translate3d(0, 0, 0);
  transform-origin: top left;
  transition: color 200ms ease-in, transform 200ms ease-in;
}

.paper-input input:focus {
  outline: none;
  top: 0;
}

.paper-input input.dirty ~ label {
  /* hide the label when dirty */
  visibility: hidden;
  color: var(--color_transparent);
}

/* Duplicate previous rule so it is not skipped by non-webkit browsers */
.paper-input input:-webkit-autofill ~ label {
  /* hide the label when dirty */
  visibility: hidden;
  color: var(--color_transparent);
}

.paper-input.float-label input:focus ~ label,
.paper-input.float-label input.dirty ~ label {
  visibility: visible;
  transform: scale(0.7) translate3d(0, -22px, 0);
  transform-origin: top left;
  transition: color 200ms ease-out, transform 200ms ease-out;
}

/* Duplicate previous rule so it is not skipped by non-webkit browsers */
.paper-input.float-label input:-webkit-autofill ~ label {
  visibility: visible;
  transform: scale(0.7) translate3d(0, -22px, 0);
  transform-origin: top left;
  transition: color 200ms ease-out, transform 200ms ease-out;
}

.paper-input.float-label.big input:focus ~ label,
.paper-input.float-label.big input.dirty ~ label {
  transform: scale(0.7) translate3d(0, -27px, 0);
}

/* Duplicate previous rule so it is not skipped by non-webkit browsers */
.paper-input.float-label.big input:-webkit-autofill ~ label {
  transform: scale(0.7) translate3d(0, -27px, 0);
}

.paper-input.float-label input[readonly] ~ label,
.paper-input.float-label input.dirty ~ label {
  color: var(--color_label_text);
}

/* Duplicate previous rule so it is not skipped by non-webkit browsers */
.paper-input.float-label input:-webkit-autofill ~ label {
  color: var(--color_label_text);
}

.paper-input.float-label input[readonly]:focus ~ label {
  color: var(--color_label_text);
  transform: none;
}

.paper-input.float-label input:focus ~ label {
  color: var(--color_accent);
}

.paper-input.float-label input.touched:focus:invalid ~ label {
  color: var(--color_error);
}

.paper-input input ~ .border-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: inherit;
  height: 2px;
  background-color: var(--color_accent);
  transform: scaleX(0);
  transition: color 200ms ease-in, transform 200ms ease-in;
}

.paper-input input:invalid ~ .border-line {
  background-color: var(--color_error);
}

.paper-input input:focus ~ .border-line {
  transform: scaleX(1);
  transition: color 200ms ease-out, transform 200ms ease-out;
}

.paper-input input[readonly] ~ .border-line {
  background-color: var(--color_transparent);
  transform: none;
}

.paper-input .error {
  float: left;
  margin-top: 3px;
  color: var(--color_error);
  font-size: 12px;
  letter-spacing: normal;
}

.paper-input input.touched:focus:invalid {
  box-shadow: none;
  border-color: var(--color_error);
}