@ruliad-engr/forms/dist/css/form/Form/Form.css

Forms fields, inputs, etc.

.form {
  &__button {
    width: 100%;
    &-item {
      min-width: 240px;
    }
  }
}
.form {
  &__group {
    margin: 0;
    &-wrapper {
      display: flex;
      ^^&__item {
        margin: 0 20px 0 0;
      }
    }
  }
}
.form {
  &__header {
    width: 100%;
    position: relative;
    &-wrapper {
      position: relative;
    }
    &-title {
      width: 100%;
      position: relative;
      &-text {
        width: 100%;
        max-width: var(--max);
        color: var(--color-surface-text-primary);
        margin: 0 auto;
        position: relative;
        align-self: center;
        @mixin h4 500;
      }
      &-desc {
        width: 100%;
        color: var(--color-surface-text-primary);
        padding: 12px 0 0 0;
        position: relative;
        @mixin text-xl;
        @media (--mobile) {
          padding: 24px 0 0 0;
          grid-row-start: 3;
          grid-column: 1 / 3;
        }
      }
    }
  }
}
.form {
  &__item {
    &_reset-fill {
      & input,
      & textarea {
        background: none;
      }
    }
  }
}
.form {
  &__item {
    &&_state_error {
      /* & ^&-label {
        &-inner {
          color: var(--color-error-text-secondary);
        }
      }
      & ^&-inner {
        &-item {
        }
      } */
    }
  }
}
.form {
  &__item {
    &&_state_required {
      & ^&-inner {
        &-item {
        }
      }
    }
  }
}
.form {
  &__item {
    &&_state_success {
      /* & ^&-label {
        &-inner {
          color: var(--color-success-text-primary);
        }
      }
      & ^&-inner {
        &-item {
        }
      } */
    }
  }
}
.form {
  &__item {
    &&_type_float {
      position: relative;
      &^&_state_focus,
      &^&_state_filled {
        & .form {
          &__item {
            &-label {
              top: 0;
              transform: scale(0.7) translate(6px, 14px);
            }
          }
        }
        & .form-input,
        & .form-textarea {
          &__input {
            &::placeholder {
              color: var(--color-surface-text-secondary);
            }
          }
        }
      }
      & .form {
        &__item {
          &-wrapper {
            position: relative;
          }
          &-label {
            pointer-events: none;
            color: var(--color-surface-text-secondary);
            position: absolute;
            display: flex;
            top: 28px;
            z-index: 2;
            transform: scale(1) translate(0, -50%);
            transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: top left;
            @media (--mobile) {
              top: 26px;
            }
            &-inner {
              margin: 0 0 0 16px;
              @mixin text-m;
            }
          }
        }
      }
      & .form-input,
      & .form-textarea {
        &__input {
          padding: 22px 16px 10px 16px;
          &::placeholder {
            color: transparent;
            transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
          }
        }
      }
    }
  }
}
.form {
  &__text {
    width: 100%;
    position: relative;
  }
}
.form-response {
  background: var(--color-surface-primary);
  padding: 30px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  @mixin elevation-2;
  &__icon {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    & svg {
      fill: var(--color-surface-item-accent);
      transform: scale(4.18);
    }
  }
  &__title {
    max-width: 240px;
    color: var(--color-surface-text-primary);
    text-align: center;
    padding: 0;
    margin: 0 0 8px 0;
    @mixin h5;
  }
  &__text {
    max-width: 240px;
    color: var(--color-surface-text-primary);
    text-align: center;
    padding: 0;
    margin: 0;
    @mixin text-l;
  }
  &__button {
    width: 100%;
    margin: 30px 0 0 0;
  }
}
.form {
  width: 100%;
  &__wrapper {
    width: 100%;
    position: relative;
  }
}