@itcase/forms 1.1.95 → 1.1.98

package/dist/css/form/Field/Code/FormFieldCode.css

@@ -1,90 +0,0 @@
-.form-field {
-  &-code {
-    &^&_type_classic {
-      ^^&__label {
-        text-align: center;
-      }
-      ^^&__message {
-        text-align: center;
-      }
-    }
-    &^&_size {
-        &_xxl {
-          gap: var(--form-filed-code-size-xxl-gap);
-        }
-        &_xl {
-          gap: var(--form-filed-code-size-xl-gap);
-        }
-        &_l {
-          gap: var(--form-filed-code-size-l-gap);
-        }
-        &_m {
-          gap: var(--form-filed-code-size-m-gap);
-        }
-        &_s {
-          gap: var(--form-filed-code-size-s-gap);
-        }
-        &_xs {
-          gap: var(--form-filed-code-size-xs-gap);
-        }
-        &_xxs {
-          gap: var(--form-filed-code-size-xxs-gap);
-        }
-    }
-  }
-}
-.form-field_type_code {
-    &.form__item_state_error {
-      & .form-field__label {
-        & .text {
-          color: var(--form-code-error-label-color);
-        }
-      }
-      & .form-field__message-item_type-error {
-        color: var(--form-code-error-helptext-color);
-      }
-    }
-    &.form__item_state_success {
-      & .form-field__label {
-        & .text {
-          color: var(--form-code-success-label-color);
-        }
-      }
-      & .form-field__message-item_type-success {
-        color: var(--form-code-success-helptext-color);
-      }
-    }
-    &.form__item_state_require {
-      & .form-field__label {
-        & .text {
-          color: var(--form-code-require-label-color);
-        }
-      }
-      & .form-field__message-item_type-require {
-        color: var(--form-code-require-helptext-color);
-      }
-    }
-    &.form__item_state_disabled {
-      & .form-field__label {
-        & .text {
-          color: var(--form-code-disabled-label-color);
-        }
-      }
-      & .form-field__message-item_type-disabled {
-        color: var(--form-code-disabled-helptext-color);
-      }
-    }
-    &.form__item_state_focus {
-      & .form-field__label {
-        & .text {
-          color: var(--form-code-focus-label-color);
-        }
-      }
-      & .form-field__message-item_type-focus {
-        color: var(--form-code-focus-helptext-color);
-      }
-    }
-}
-:root {
-  --form-filed-code-size-l-gap: 8px;
-}

package/dist/css/form/Field/Custom/FormFieldCustom.css

@@ -1,13 +0,0 @@
-.form-field {
-  &_type_custom {
-    width: 100%;
-  }
-}
-
-:root {
-  --custom-success-border: var(--color-success-border-primary);
-  --custom-success-border-hover: var(--color-surface-border-quaternary);
-  --custom-error-border: var(--color-error-border-primary);
-  --custom-focus-background: var(--color-surface-primary);
-  --custom-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/Dadata/FormFieldDadataInput.css

@@ -1,7 +0,0 @@
-:root {
-  --dadata-success-border: var(--color-success-border-primary);
-  --dadata-success-border-hover: var(--color-surface-border-quaternary);
-  --dadata-error-border: var(--color-error-border-primary);
-  --dadata-focus-background: var(--color-surface-primary);
-  --dadata-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/DatePicker/FormFieldDatePicker.css

@@ -1,7 +0,0 @@
-:root {
-  --datepicker-success-border: var(--color-success-border-primary);
-  --datepicker-success-border-hover: var(--color-surface-border-quaternary);
-  --datepicker-error-border: var(--color-error-border-primary);
-  --datepicker-focus-background: var(--color-surface-primary);
-  --datepicker-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/FileInput/FormFieldFileInput.css

@@ -1,7 +0,0 @@
-.form-field-file-input {
-}
-:root {
-  --fileinput-size-normal-padding: 16px 16px;
-  --fileinput-size-normal-shape-rounded: 6px;
-  --fileinput-transition: all 0.2s ease 0s;
-}

package/dist/css/form/Field/Group/FormGroup.css

@@ -1,67 +0,0 @@
-.form {
-  &__group {
-    width: 100%;
-    gap: 8px;
-    display: flex;
-    flex-direction: column;
-    padding: var(--form-group-padding, 0);
-    &_hidden {
-      position: absolute;
-      display: none;
-      visibility: hidden;
-      z-index: -1;
-    }
-    &_type_row.&_hidden {
-      visibility: hidden;
-    }
-    &_column {
-        &_2 {
-          ^^&-items {
-            display: grid;
-            gap: 0 24px;
-            grid-template-columns: repeat(2, 1fr);
-            align-items: end;
-          }
-        }
-        &_3 {
-          ^^&-items {
-            display: grid;
-            gap: 0 24px;
-            grid-template-columns: repeat(3, 1fr);
-            align-items: end;
-          }
-        }
-        &_4 {
-          ^^&-items {
-            display: grid;
-            gap: 0 24px;
-            grid-template-columns: repeat(4, 1fr);
-            align-items: end;
-          }
-        }
-        &_5 {
-          ^^&-items {
-            display: grid;
-            gap: 0 24px;
-            grid-template-columns: repeat(5, 1fr);
-            align-items: end;
-          }
-        }
-    }
-    &-wrapper {
-      display: flex;
-      flex-flow: column nowrap;
-      ^&-message {
-        &_type_error {
-          color: var(--color-error-text-primary);
-        }
-        &_type_require {
-          color: var(--color-require-text-primary);
-        }
-        &_type_success {
-          color: var(--color-success-text-primary);
-        }
-      }
-    }
-  }
-}

package/dist/css/form/Field/Input/FormFieldInput.css

@@ -1,21 +0,0 @@
-.form-input {
-}
-:root {
-  --form-input-error-border: var(--color-error-border-primary);
-  --form-input-error-border-hover: var(--color-error-border-primary);
-  --form-input-error-label-color: var(--color-error-text-primary);
-  --form-input-error-helptext-color: var(--color-error-text-primary);
-
-  --form-input-success-border: var(--color-success-border-primary);
-  --form-input-success-border-hover: var(--color-surface-border-quaternary);
-
-  --form-input-require-border: var(--color-success-border-primary);
-  --form-input-require-border-hover: var(--color-surface-border-quaternary);
-
-  --form-input-disabled-fill: var(--color-disabled-primary);
-  --form-input-disabled-border: var(--color-disabled-border-primary);
-  --form-input-disabled-border-hover: var(--color-disabled-border-primary);
-
-  --form-input-focus-border: var(--color-surface-border-quaternary);
-  --form-input-focus-border-hover: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/InputNumber/FormFieldInputNumber.css

@@ -1,52 +0,0 @@
-.form-input-number {
-  &&_state {
-      &_error {
-        & .input {
-          background: var(--form-input-error-fill);
-          border: solid 1px var(--form-input-error-border);
-          &:hover {
-            border: solid 1px var(--form-input-error-border-hover);
-          }
-        }
-      }
-      &_success {
-        & .input {
-          background: var(--form-input-success-fill);
-          border: solid 1px var(--form-input-success-border);
-          &:hover {
-            border: solid 1px var(--form-input-success-border-hover);
-          }
-        }
-      }
-      &_required {
-        & .input {
-          background: var(--form-input-required-fill);
-          border: solid 1px var(--form-input-required-border);
-          &:hover {
-            border: solid 1px var(--form-input-required-border-hover);
-          }
-        }
-      }
-      &_disabled {
-        & .input {
-          background: var(--form-input-disabled-fill);
-          border: solid 1px var(--form-input-disabled-border);
-          &:hover {
-            border: solid 1px var(--form-input-disabled-border-hover);
-          }
-        }
-      }
-      &_focus {
-        & .input {
-          background: var(--form-input-focus-fill);
-          border: solid 1px var(--form-input-focus-border);
-          &:hover {
-            border: solid 1px var(--form-input-focus-border-hover);
-          }
-        }
-      }
-  }
-}
-.form-input-number {
-  position: relative;
-}

package/dist/css/form/Field/MaskedInput/FormFieldMaskedInput.css

@@ -1,37 +0,0 @@
-.form {
-  &-masked-input {
-    position: relative;
-    &&_state {
-      &_success {
-        & .input {
-          border: solid 1px var(--input-success-border, green);
-          &:hover {
-            border: solid 1px var(--input-success-border-hover);
-          }
-        }
-      }
-      &_disabled {
-        & .input {
-          background: var(--input-disabled-background, #ececec);
-          border: solid 1px var(--input-disabled-border, #747474);
-          &:hover {
-            background: var(--input-disabled-background, #ececec);
-            border: solid 1px var(--input-disabled-border, #747474);
-          }
-        }
-      }
-
-      &_error {
-        & .input {
-          border: solid 1px var(--input-error-border);
-        }
-      }
-      &_focus {
-        & .input {
-          background: var(--input-focus-background);
-          border: solid 1px var(--input-focus-border);
-        }
-      }
-    }
-  }
-}

package/dist/css/form/Field/Password/FormFieldPassword.css

@@ -1,7 +0,0 @@
-:root {
-  --password-success-border: var(--color-success-border-primary);
-  --password-success-border-hover: var(--color-surface-border-quaternary);
-  --password-error-border: var(--color-error-border-primary);
-  --password-focus-background: var(--color-surface-primary);
-  --password-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/RadioGroup/FormFieldRadioGroup.css

@@ -1,63 +0,0 @@
-.form-radio {
-  &_state_success {
-    & .radio__state {
-      border: solid 1px var(--form-radio-success-border);
-    }
-  }
-  &_state_error {
-    & .radio__state {
-      border: solid 1px var(--form-radio-error-border);
-    }
-  }
-}
-
-.form-field {
-  &_radio {
-    &.form-field_size {
-        &_xxl {
-          & .form-radio {
-            gap: var(--form-filed-radio-size-xxl-gap);
-          }
-        }
-        &_xl {
-          & .form-radio {
-            gap: var(--form-filed-radio-size-xl-gap);
-          }
-        }
-        &_l {
-          & .form-radio {
-            gap: var(--form-filed-radio-size-l-gap);
-          }
-        }
-        &_m {
-          & .form-radio {
-            gap: var(--form-filed-radio-size-m-gap);
-          }
-        }
-        &_s {
-          & .form-radio {
-            gap: var(--form-filed-radio-size-s-gap);
-          }
-        }
-        &_xs {
-          & .form-radio {
-            gap: var(--form-filed-radio-size-xs-gap);
-          }
-        }
-        &_xxs {
-          & .form-radio {
-            gap: var(--form-filed-radio-size-xxs-gap);
-          }
-        }
-    }
-  }
-}
-
-:root {
-  --form-filed-radio-size-m-gap: 12px;
-
-  --form-radio-success-border: var(--color-success-border-primary);
-  --form-radio-success-border-hover: var(--color-surface-border-quaternary);
-  --form-radio-error-border: var(--color-error-border-primary);
-  --form-radio-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/Segmented/FormFieldSegmented.css

@@ -1,7 +0,0 @@
-.form-segmented {
-}
-
-:root {
-  --segmented-error-text-color: var(--color-error-text-primary);
-  --segmented-required-text-color: var(--color-warning-text-primary);
-}

package/dist/css/form/Field/Select/FormFieldSelect.css

@@ -1,25 +0,0 @@
-.form-select {
-  position: relative;
-  &__wrapper {
-    background: var(--select-background);
-    &:hover {
-      background: var(--select-background-hover);
-    }
-  }
-  &_state_success {
-    & .select__control {
-      border: solid 1px var(--select-success-border);
-      &:hover {
-        border: solid 1px var(--select-success-border-hover);
-      }
-    }
-  }
-  &_state_error {
-    & .select__control {
-      border: solid 1px var(--select-error-border);
-      &:hover {
-        border: solid 1px var(--select-error-border-hover);
-      }
-    }
-  }
-}

package/dist/css/form/Field/Switch/FormFieldSwitch.css

@@ -1,35 +0,0 @@
-.form-field {
-  &-switch {
-    width: 100%;
-    padding: 8px 0;
-    display: grid !important;
-    grid-template-columns: 1fr auto;
-    ^&__label {
-      display: flex;
-      flex: 1;
-      align-items: center;
-    }
-    ^&__message {
-      grid-column: 1 / span 2;
-    }
-  }
-}
-
-:root {
-  --form-switch-error-border: var(--color-error-border-primary);
-  --form-switch-error-border-hover: var(--color-error-border-primary);
-  --form-switch-error-label-color: var(--color-error-text-primary);
-  --form-switch-error-helptext-color: var(--color-error-text-primary);
-
-  --form-switch-success-border: var(--color-success-border-primary);
-  --form-switch-success-border-hover: var(--color-surface-border-quaternary);
-
-  --form-switch-require-border: var(--color-success-border-primary);
-  --form-switch-require-border-hover: var(--color-surface-border-quaternary);
-
-  --form-switch-disabled-border: var(--color-success-border-primary);
-  --form-switch-disabled-border-hover: var(--color-surface-border-quaternary);
-
-  --form-switch-focus-border: var(--color-surface-border-quaternary);
-  --form-switch-focus-border-hover: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Field/Textarea/FormFieldTextarea.css

@@ -1,18 +0,0 @@
-:root {
-  --form-textarea-error-border: var(--color-error-border-primary);
-  --form-textarea-error-border-hover: var(--color-error-border-primary);
-  --form-textarea-error-label-color: var(--color-error-text-primary);
-  --form-textarea-error-helptext-color: var(--color-error-text-primary);
-
-  --form-textarea-success-border: var(--color-success-border-primary);
-  --form-textarea-success-border-hover: var(--color-surface-border-quaternary);
-
-  --form-textarea-require-border: var(--color-success-border-primary);
-  --form-textarea-require-border-hover: var(--color-surface-border-quaternary);
-
-  --form-textarea-disabled-border: var(--color-success-border-primary);
-  --form-textarea-disabled-border-hover: var(--color-surface-border-quaternary);
-
-  --form-textarea-focus-border: var(--color-surface-border-quaternary);
-  --form-textarea-focus-border-hover: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Form/Form.css

@@ -1,174 +0,0 @@
-.form {
-  &__button {
-    width: 100%;
-    z-index: 100;
-    &-item {
-      min-width: 240px;
-    }
-  }
-}
-.form {
-  &__loader {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 100;
-  }
-}
-.form {
-  &__item {
-    display: flex;
-    &_reset-fill {
-      & input,
-      & textarea {
-        background: none;
-      }
-    }
-  }
-}
-.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-notification {
-  &_sticky {
-    position: sticky;
-    left: 0;
-    top: 20px;
-    z-index: 100;
-  }
-  &_global {
-    margin: 0;
-  }
-  &__item {
-    text-align: center;
-    border-radius: 12px;
-  }
-}
-.form {
-  &_title-position {
-    &_sticky {
-      ^^&__title {
-        position: sticky;
-        top: 24px;
-        z-index: 5;
-      }
-    }
-  }
-}
-.form {
-  &_type_bottom-button {
-    flex: 1;
-    justify-content: space-between;
-  }
-}
-.form {
-  &_type_sticky-button {
-    position: relative;
-    ^&__button {
-      width: 100%;
-      position: fixed;
-      left: 0;
-      bottom: 0;
-      z-index: 100;
-    }
-  }
-}
-.form {
-  &_button-position {
-    &_bottom {
-      flex: 1;
-      justify-content: space-between;
-    }
-    &_sticky {
-      min-height: 100%;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      ^^&__wrapper {
-        overflow: auto;
-        flex: 1;
-      }
-      ^^&__button {
-        width: 100%;
-        position: sticky;
-        bottom: 0;
-        z-index: 1;
-      }
-    }
-  }
-}
-.form {
-  min-width: 100%;
-  display: flex;
-  flex-direction: column;
-  &__wrapper {
-    min-width: 100%;
-    position: relative;
-  }
-}

package/dist/css/form/Form/css/__button/form__button.css

@@ -1,9 +0,0 @@
-.form {
-  &__button {
-    width: 100%;
-    z-index: 100;
-    &-item {
-      min-width: 240px;
-    }
-  }
-}

package/dist/css/form/Form/css/__item/form__item.css

@@ -1,11 +0,0 @@
-.form {
-  &__item {
-    display: flex;
-    &_reset-fill {
-      & input,
-      & textarea {
-        background: none;
-      }
-    }
-  }
-}