formik-stepper/dist/style.css

Get ready to take your form-building game to the next level with this revolutionary React component. With its seamless integration with the powerful Formik library, you'll be building forms faster and more efficiently than ever before. But that's not all

.formik-s-btn {
  color: #fff;
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Formik-Fields */

.input_group .no_floating input,
.input_group .floating .floating__input {
  padding: 1rem 0.75rem;
  width: calc(100% - 3.3rem);
  padding-inline-end: 2.5rem;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  outline: none;
}
.input_group .no_floating,
.input_group .floating {
  transition: background-color 0.2s ease;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.input_group .no_floating .password_eye {
  position: absolute !important;
}
.input_group .no_floating .password_eye,
.input_group .floating .password_eye {
  position: relative;
  top: 28px;
  right: 11px;
  height: 20px;
}
.input_group {
  margin-bottom: 2rem;
}
.input_group .input {
  width: 100%;
  display: flex;
}
.input_group .input-error {
  display: block;
  color: #b50000;
  margin-top: 0.5rem;
}
.input_group .no_inline {
  flex-direction: column !important;
  align-items: flex-start !important;
}
.input_group .no_floating {
  position: relative;
  display: flex;
}
.input_group .no_floating.inline {
  flex-direction: row !important;
}
.input_group .no_floating.inline label {
  min-width: fit-content;
  margin-top: 10px !important;
  margin-inline-end: 15px !important;
}
.input_group .no_floating input {
  margin-top: 0.5rem;
}
.input_group .floating {
  position: relative;
  width: 100%;
}
.input_group .floating .password_eye {
  position: absolute;
  top: 18px;
  right: 11px;
}
.input_group .floating .floating__input {
  margin-top: 0.5rem;
  margin-bottom: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input_group .floating .floating__input:focus + .floating__label::before,
.input_group
  .floating
  .floating__input:not(:placeholder-shown)
  + .floating__label::before {
  transform: translate3d(0, -3.45rem, 0) scale3d(0.82, 0.82, 1);
}

.input_group .floating .floating__input::placeholder {
  color: rgba(0, 0, 0, 0);
}

.input_group .floating .floating__label {
  display: block;
  position: relative;
  max-height: 0;
  font-weight: 400;
  pointer-events: none;
}
.input_group .floating .floating__label::before {
  content: attr(data-content);
  display: inline-block;
  filter: blur(0);
  backface-visibility: hidden;
  transform-origin: left top;
  transition: transform 0.2s ease;
  transform: translate3d(0, -2.39rem, 0);
  left: 1rem;
  position: relative;
  color: #808080;
}
.input_group .floating .floating__label::after {
  bottom: 1rem;
  content: "";
  height: 0.1rem;
  position: absolute;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  opacity: 0;
  left: 0;
  top: 100%;
  margin-top: -0.1rem;
  transform: scale3d(0, 1, 1);
  width: 100%;
}
.input_group .floating .hidden--visually {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.has_error {
  border-color: #b50000 !important;
}