ar-design/dist/assets/css/components/form/input/input.css

AR Design is a (react | nextjs) ui library.

.ar-input-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.ar-input-wrapper > .ar-input {
  position: relative;
  width: 100%;
}
.ar-input-wrapper > .ar-input > label {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0.5rem;
  left: 0.55rem;
  color: var(--gray-600);
  letter-spacing: 1px;
  transition: top 250ms ease-in-out;
}
.ar-input-wrapper > .ar-input > label.visible {
  visibility: visible;
  opacity: 1;
  top: -0.5rem;
  left: 0.55rem;
  background-color: var(--white);
  padding: 0 0.5rem;
  font-size: 0.75rem;
}
.ar-input-wrapper > .ar-input > input {
  background-color: transparent;
  width: 100%;
  height: var(--input-height);
  padding: 0 0.5rem;
  font-family: var(--system);
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  transition: background 250ms, border 250ms, box-shadow 250ms ease-in-out;
}
.ar-input-wrapper > .ar-input > .validation {
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Core Css */
@import url("./core/icon.css");
@import url("./core/border.css");
@import url("./core/button.css");
@import url("./core/addon.css");