@itcase/forms-web 0.0.0-stage → 1.1.117

package/dist/css/styles/bundles.css

@@ -0,0 +1,786 @@
+input:autofill,
+input:autofill:hover,
+input:autofill:focus,
+textarea:autofill,
+textarea:autofill:hover,
+textarea:autofill:focus,
+select:autofill,
+select:autofill:hover,
+select:autofill:focus {
+  box-shadow: 0 0 0 1000px transparent inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.form-field__before {
+  width: 100%;
+}
+
+.form-field__before-content {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.form-field__before-after {
+  flex-shrink: 0;
+}
+
+.form-field-checkbox.form-field_type_classic {
+  padding: 0 0 8px 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.form-field-checkbox.form-field_type_classic .form-field__before {
+  grid-area: 1 / 2;
+}
+
+.form-field-checkbox.form-field_type_classic .form-field__content {
+  grid-area: 1 / 1;
+  justify-self: start;
+}
+
+.form-field-checkbox.form-field_type_classic .form-field__message {
+  grid-column: span 2;
+  grid-row: 2;
+  padding: 4px 0 0 24px;
+}
+
+.form-field-checkbox.form-field_type_classic .checkbox {
+  align-items: start;
+}
+
+.form-choice {
+  position: relative;
+}
+
+:root {
+  --choice-success-border: var(--color-success-border-primary);
+  --choice-success-border-hover: var(--color-surface-border-quaternary);
+  --choice-error-border: var(--color-error-border-primary);
+  --choice-focus-border: var(--color-surface-border-quaternary);
+  --form-filed-code-size-m-gap: 8px;
+  --form-filed-code-size-l-gap: 8px;
+  --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);
+  --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);
+  --fileinput-size-normal-padding: 16px 16px;
+  --fileinput-size-normal-shape-rounded: 6px;
+  --fileinput-transition: all 0.2s ease 0s;
+  --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);
+  --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);
+  --segmented-error-text-color: var(--color-error-text-primary);
+  --segmented-required-text-color: var(--color-warning-text-primary);
+  --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);
+  --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);
+  --form-field_type_classic-padding: 8px 0;
+  --form-field_type_classic-gap: 4px;
+  --form-field_type_classic-label-padding: 4px;
+  --form-field_type_classic-message-padding: 4px 0 0 4px;
+
+  --form-field_type_float-padding: 12px 0;
+  --form-field_type_float-label-padding: 4px;
+  --form-field_type_float-message-padding: 4px 0 0 12px;
+}
+
+.form-field-code {
+  align-items: center;
+}
+
+.form-field-code.form-field_type_classic .form-field__label {
+  text-align: center;
+}
+
+.form-field-code.form-field_type_classic .form-field__message {
+  text-align: center;
+}
+
+.form-field-code.form-field_size_xxl {
+  gap: var(--form-filed-code-size-xxl-gap);
+}
+
+.form-field-code.form-field_size_xl {
+  gap: var(--form-filed-code-size-xl-gap);
+}
+
+.form-field-code.form-field_size_l {
+  gap: var(--form-filed-code-size-l-gap);
+}
+
+.form-field-code.form-field_size_m {
+  gap: var(--form-filed-code-size-m-gap);
+}
+
+.form-field-code.form-field_size_s {
+  gap: var(--form-filed-code-size-s-gap);
+}
+
+.form-field-code.form-field_size_xs {
+  gap: var(--form-filed-code-size-xs-gap);
+}
+
+.form-field-code.form-field_size_xxs {
+  gap: var(--form-filed-code-size-xxs-gap);
+}
+
+.form-field-code.form__item_state_error .form-field__label .text {
+  color: var(--form-code-error-label-color);
+}
+
+.form-field-code.form__item_state_error .form-field__message-item_type-error {
+  color: var(--form-code-error-helptext-color);
+}
+
+.form-field-code.form__item_state_success .form-field__label .text {
+  color: var(--form-code-success-label-color);
+}
+
+.form-field-code.form__item_state_success
+  .form-field__message-item_type-success {
+  color: var(--form-code-success-helptext-color);
+}
+
+.form-field-code.form__item_state_require .form-field__label .text {
+  color: var(--form-code-require-label-color);
+}
+
+.form-field-code.form__item_state_require
+  .form-field__message-item_type-require {
+  color: var(--form-code-require-helptext-color);
+}
+
+.form-field-code.form__item_state_disabled .form-field__label .text {
+  color: var(--form-code-disabled-label-color);
+}
+
+.form-field-code.form__item_state_disabled
+  .form-field__message-item_type-disabled {
+  color: var(--form-code-disabled-helptext-color);
+}
+
+.form-field-code.form__item_state_focus .form-field__label .text {
+  color: var(--form-code-focus-label-color);
+}
+
+.form-field-code.form__item_state_focus .form-field__message-item_type-focus {
+  color: var(--form-code-focus-helptext-color);
+}
+
+.form-field_type_custom {
+  width: 100%;
+}
+
+.form-field-file-input {
+}
+
+.form__group {
+  width: 100%;
+  padding: var(--form-group-padding, 0);
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.form__group_hidden {
+  position: absolute;
+  display: none;
+  visibility: hidden;
+  z-index: -1;
+}
+
+.form__group_type_row.form__group_hidden {
+  visibility: hidden;
+}
+
+.form__group_column_2 .form__group-items {
+  display: grid;
+  gap: 0 24px;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: end;
+}
+
+.form__group_column_3 .form__group-items {
+  display: grid;
+  gap: 0 24px;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: end;
+}
+
+.form__group_column_4 .form__group-items {
+  display: grid;
+  gap: 0 24px;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: end;
+}
+
+.form__group_column_5 .form__group-items {
+  display: grid;
+  gap: 0 24px;
+  grid-template-columns: repeat(5, 1fr);
+  align-items: end;
+}
+
+.form__group-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.form__group-wrapper .form__group-message_type_error {
+  color: var(--color-error-text-primary);
+}
+
+.form__group-wrapper .form__group-message_type_require {
+  color: var(--color-require-text-primary);
+}
+
+.form__group-wrapper .form__group-message_type_success {
+  color: var(--color-success-text-primary);
+}
+
+.form-input {
+}
+
+.form-input-number.form-input-number_state_error .input {
+  background: var(--form-input-error-fill);
+  border: solid 1px var(--form-input-error-border);
+}
+
+.form-input-number.form-input-number_state_error .input:hover {
+  border: solid 1px var(--form-input-error-border-hover);
+}
+
+.form-input-number.form-input-number_state_success .input {
+  background: var(--form-input-success-fill);
+  border: solid 1px var(--form-input-success-border);
+}
+
+.form-input-number.form-input-number_state_success .input:hover {
+  border: solid 1px var(--form-input-success-border-hover);
+}
+
+.form-input-number.form-input-number_state_required .input {
+  background: var(--form-input-required-fill);
+  border: solid 1px var(--form-input-required-border);
+}
+
+.form-input-number.form-input-number_state_required .input:hover {
+  border: solid 1px var(--form-input-required-border-hover);
+}
+
+.form-input-number.form-input-number_state_disabled .input {
+  background: var(--form-input-disabled-fill);
+  border: solid 1px var(--form-input-disabled-border);
+}
+
+.form-input-number.form-input-number_state_disabled .input:hover {
+  border: solid 1px var(--form-input-disabled-border-hover);
+}
+
+.form-input-number.form-input-number_state_focus .input {
+  background: var(--form-input-focus-fill);
+  border: solid 1px var(--form-input-focus-border);
+}
+
+.form-input-number.form-input-number_state_focus .input:hover {
+  border: solid 1px var(--form-input-focus-border-hover);
+}
+
+.form-input-number {
+  position: relative;
+}
+
+.form-masked-input {
+  position: relative;
+}
+
+.form-masked-input.form-masked-input_state_success .input {
+  border: solid 1px var(--input-success-border, green);
+}
+
+.form-masked-input.form-masked-input_state_success .input:hover {
+  border: solid 1px var(--input-success-border-hover);
+}
+
+.form-masked-input.form-masked-input_state_disabled .input {
+  background: var(--input-disabled-background, var(--color-disabled-primary));
+  border: solid 1px
+    var(--input-disabled-border, var(--color-disabled-border-primary));
+}
+
+.form-masked-input.form-masked-input_state_disabled .input:hover {
+  background: var(--input-disabled-background, var(--color-disabled-primary));
+  border: solid 1px
+    var(--input-disabled-border, var(--color-disabled-border-primary));
+}
+
+.form-masked-input.form-masked-input_state_error .input {
+  border: solid 1px var(--input-error-border);
+}
+
+.form-masked-input.form-masked-input_state_focus .input {
+  background: var(--input-focus-background);
+  border: solid 1px var(--input-focus-border);
+}
+
+.form-radio_state_success .radio__state {
+  border: solid 1px var(--form-radio-success-border);
+}
+
+.form-radio_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);
+}
+
+.form-field_radio.form-field_size_xl .form-radio {
+  gap: var(--form-filed-radio-size-xl-gap);
+}
+
+.form-field_radio.form-field_size_l .form-radio {
+  gap: var(--form-filed-radio-size-l-gap);
+}
+
+.form-field_radio.form-field_size_m .form-radio {
+  gap: var(--form-filed-radio-size-m-gap);
+}
+
+.form-field_radio.form-field_size_s .form-radio {
+  gap: var(--form-filed-radio-size-s-gap);
+}
+
+.form-field_radio.form-field_size_xs .form-radio {
+  gap: var(--form-filed-radio-size-xs-gap);
+}
+
+.form-field_radio.form-field_size_xxs .form-radio {
+  gap: var(--form-filed-radio-size-xxs-gap);
+}
+
+.form-segmented {
+}
+
+.form-select {
+  position: relative;
+}
+
+.form-select__wrapper {
+  background: var(--select-background);
+}
+
+.form-select__wrapper:hover {
+  background: var(--select-background-hover);
+}
+
+.form-select_state_success .select__control {
+  border: solid 1px var(--select-success-border);
+}
+
+.form-select_state_success .select__control:hover {
+  border: solid 1px var(--select-success-border-hover);
+}
+
+.form-select_state_error .select__control {
+  border: solid 1px var(--select-error-border);
+}
+
+.form-select_state_error .select__control:hover {
+  border: solid 1px var(--select-error-border-hover);
+}
+
+.form-field-switch {
+  width: 100%;
+  padding: 8px 0;
+  display: grid !important;
+  grid-template-columns: 1fr auto;
+}
+
+.form-field-switch .form-field__before {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.form-field-switch .form-field__message {
+  grid-column: 1 / span 2;
+}
+
+.form-field_switch {
+  cursor: pointer;
+}
+
+.form-field__content {
+  width: 100%;
+}
+
+.form-field__content-inner {
+  position: relative;
+  display: flex;
+}
+
+.form-field__content-inner > input {
+  width: 100%;
+}
+
+.form-field__content-inner .input-password {
+  width: 100%;
+}
+
+.form-field__content-inner .input-password > input {
+  width: 100%;
+}
+
+.form-field__message-item {
+  display: block;
+}
+
+.form-field__icon {
+  height: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  right: 8px;
+}
+
+.form-field_type_float {
+  padding: var(--form-field_type_float-padding);
+  position: relative;
+  gap: var(--form-field_type_float-gap);
+}
+
+.form-field_type_float.form__item_state_focus .form-field__label,
+.form-field_type_float.form__item_state_filled .form-field__label {
+  background: var(--color-palette-white);
+  transform: scale(1) translate(8px, -12px);
+}
+
+.form-field_type_float.form__item_state_focus input::placeholder,
+.form-field_type_float.form__item_state_focus textarea::placeholder {
+  opacity: 100%;
+}
+
+.form-field_type_float .form-field__label {
+  padding: var(--form-field_type_float-label-padding);
+  position: absolute;
+  display: flex;
+  z-index: 2;
+  transform: scale(1.285) translate(8px, 4px);
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+  transform-origin: top left;
+}
+
+.form-field_type_float .form-field__message {
+  padding: var(--form-field_type_float-message-padding);
+}
+
+.form-field_type_float input::placeholder,
+.form-field_type_float textarea::placeholder {
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0%;
+}
+
+.form-field_type_classic {
+  padding: var(--form-field_type_classic-padding);
+  position: relative;
+  gap: var(--form-field_type_classic-gap);
+}
+
+.form-field_type_classic .form-field__label {
+  padding: var(--form-field_type_classic-label-padding);
+}
+
+.form-field_type_classic .form-field__message {
+  padding: var(--form-field_type_classic-message-padding);
+}
+
+.form-field_type_ifta {
+  margin: var(--form-field_type_ifta-margin);
+  position: relative;
+  gap: var(--form-field_type_ifta-gap);
+}
+
+.form-field_type_ifta.form__item_state_focus .form-field__label,
+.form-field_type_ifta.form__item_state_filled .form-field__label {
+  transform: scale(0.9) translate(0, 50%);
+}
+
+.form-field_type_ifta.form__item_state_focus .input::placeholder,
+.form-field_type_ifta.form__item_state_filled .input::placeholder {
+  opacity: 100%;
+}
+
+.form-field_type_ifta .form-field__label {
+  position: absolute;
+  display: flex;
+  left: 16px;
+  top: 0;
+  z-index: 2;
+  transform: scale(1) translate(0, 100%);
+  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+  transform-origin: top left;
+}
+
+.form-field_type_ifta .form-field__message {
+  padding: var(--form-field-type-ifta-message-padding, 0 0 0 16px);
+}
+
+.form-field_type_ifta .input {
+  padding: var(--form-field_type_ifta-padding, 24px 0 12px 16px);
+}
+
+.form-field_type_ifta .input::placeholder {
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0%;
+}
+
+.form-field_state_hidden {
+  position: absolute;
+  visibility: hidden;
+  z-index: -1;
+}
+
+.form-field_state_disabled {
+}
+
+.form__button {
+  width: 100%;
+  z-index: 100;
+}
+
+.form__button-item {
+  min-width: 240px;
+}
+
+.form__loader {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 100;
+}
+
+.form__item {
+  display: flex;
+}
+
+.form__item_reset-fill input,
+.form__item_reset-fill textarea {
+  background: none;
+}
+
+.form__item.form__item_type_float {
+  position: relative;
+}
+
+.form__item.form__item_type_float.form__item_state_focus .form__item-label,
+.form__item.form__item_type_float.form__item_state_filled .form__item-label {
+  top: 0;
+  transform: scale(0.7) translate(6px, 14px);
+}
+
+.form__item.form__item_type_float.form__item_state_focus
+  .form-input__input::placeholder,
+.form__item.form__item_type_float.form__item_state_focus
+  .form-textarea__input::placeholder,
+.form__item.form__item_type_float.form__item_state_filled
+  .form-input__input::placeholder,
+.form__item.form__item_type_float.form__item_state_filled
+  .form-textarea__input::placeholder {
+  color: var(--color-surface-text-secondary);
+}
+
+.form__item.form__item_type_float .form__item-wrapper {
+  position: relative;
+}
+
+.form__item.form__item_type_float .form__item-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) {
+  .form__item.form__item_type_float .form__item-label {
+    top: 26px;
+  }
+}
+
+.form__item.form__item_type_float .form__item-label-inner {
+  margin: 0 0 0 16px;
+  @mixin text-m;
+}
+
+.form__item.form__item_type_float .form-input__input,
+.form__item.form__item_type_float .form-textarea__input {
+  padding: 22px 16px 10px 16px;
+}
+
+.form__item.form__item_type_float .form-input__input::placeholder,
+.form__item.form__item_type_float .form-textarea__input::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;
+}
+
+.form-notification_global {
+  margin: 0;
+}
+
+.form-notification__item {
+  text-align: center;
+  border-radius: 12px;
+}
+
+.form_title-position_sticky .form__title {
+  position: sticky;
+  top: 24px;
+  z-index: 5;
+}
+
+.form_type_bottom-button {
+  flex: 1;
+  justify-content: space-between;
+}
+
+.form_type_sticky-button {
+  position: relative;
+}
+
+.form_type_sticky-button .form__button {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+}
+
+.form_button-position_bottom {
+  flex: 1;
+  justify-content: space-between;
+}
+
+.form_button-position_sticky {
+  min-height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.form_button-position_sticky .form__wrapper {
+  overflow: auto;
+  flex: 1;
+}
+
+.form_button-position_sticky .form__button {
+  width: 100%;
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+}
+
+.form {
+  min-width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.form__wrapper {
+  min-width: 100%;
+  position: relative;
+}