@itcase/forms 1.1.95 → 1.1.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/css/styles/bundles.css +544 -0
  2. package/package.json +24 -20
  3. package/dist/css/form/Field/Checkbox/FormFieldCheckbox.css +0 -21
  4. package/dist/css/form/Field/Chips/FormFieldChips.css +0 -0
  5. package/dist/css/form/Field/Choice/FormFieldChoice.css +0 -10
  6. package/dist/css/form/Field/Code/FormFieldCode.css +0 -90
  7. package/dist/css/form/Field/Custom/FormFieldCustom.css +0 -13
  8. package/dist/css/form/Field/Dadata/FormFieldDadataInput.css +0 -7
  9. package/dist/css/form/Field/DatePicker/FormFieldDatePicker.css +0 -7
  10. package/dist/css/form/Field/FileInput/FormFieldFileInput.css +0 -7
  11. package/dist/css/form/Field/Group/FormGroup.css +0 -67
  12. package/dist/css/form/Field/Input/FormFieldInput.css +0 -21
  13. package/dist/css/form/Field/InputNumber/FormFieldInputNumber.css +0 -52
  14. package/dist/css/form/Field/MaskedInput/FormFieldMaskedInput.css +0 -37
  15. package/dist/css/form/Field/Password/FormFieldPassword.css +0 -7
  16. package/dist/css/form/Field/RadioGroup/FormFieldRadioGroup.css +0 -63
  17. package/dist/css/form/Field/Segmented/FormFieldSegmented.css +0 -7
  18. package/dist/css/form/Field/Select/FormFieldSelect.css +0 -25
  19. package/dist/css/form/Field/Switch/FormFieldSwitch.css +0 -35
  20. package/dist/css/form/Field/Textarea/FormFieldTextarea.css +0 -18
  21. package/dist/css/form/Form/Form.css +0 -174
  22. package/dist/css/form/Form/css/__button/form__button.css +0 -9
  23. package/dist/css/form/Form/css/__item/form__item.css +0 -11
  24. package/dist/css/form/Form/css/__item/form__item_type_float.css +0 -61
  25. package/dist/css/form/Form/css/__loader/form__loader.css +0 -10
  26. package/dist/css/form/Form/css/__text/form__text.css +0 -6
  27. package/dist/css/form/Form/css/form-notification/form-notification.css +0 -15
  28. package/dist/css/form/FormField/FormField.css +0 -178
  29. package/dist/css/styles/main.css +0 -134
@@ -1,61 +0,0 @@
1
- .form {
2
- &__item {
3
- &&_type_float {
4
- position: relative;
5
- &^&_state_focus,
6
- &^&_state_filled {
7
- & .form {
8
- &__item {
9
- &-label {
10
- top: 0;
11
- transform: scale(0.7) translate(6px, 14px);
12
- }
13
- }
14
- }
15
- & .form-input,
16
- & .form-textarea {
17
- &__input {
18
- &::placeholder {
19
- color: var(--color-surface-text-secondary);
20
- }
21
- }
22
- }
23
- }
24
- & .form {
25
- &__item {
26
- &-wrapper {
27
- position: relative;
28
- }
29
- &-label {
30
- pointer-events: none;
31
- color: var(--color-surface-text-secondary);
32
- position: absolute;
33
- display: flex;
34
- top: 28px;
35
- z-index: 2;
36
- transform: scale(1) translate(0, -50%);
37
- transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
38
- transform-origin: top left;
39
- @media (--mobile) {
40
- top: 26px;
41
- }
42
- &-inner {
43
- margin: 0 0 0 16px;
44
- @mixin text-m;
45
- }
46
- }
47
- }
48
- }
49
- & .form-input,
50
- & .form-textarea {
51
- &__input {
52
- padding: 22px 16px 10px 16px;
53
- &::placeholder {
54
- color: transparent;
55
- transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
56
- }
57
- }
58
- }
59
- }
60
- }
61
- }
@@ -1,10 +0,0 @@
1
- .form {
2
- &__loader {
3
- width: 100%;
4
- height: 100%;
5
- position: absolute;
6
- left: 0;
7
- top: 0;
8
- z-index: 100;
9
- }
10
- }
@@ -1,6 +0,0 @@
1
- .form {
2
- &__text {
3
- width: 100%;
4
- position: relative;
5
- }
6
- }
@@ -1,15 +0,0 @@
1
- .form-notification {
2
- &_sticky {
3
- position: sticky;
4
- left: 0;
5
- top: 20px;
6
- z-index: 100;
7
- }
8
- &_global {
9
- margin: 0;
10
- }
11
- &__item {
12
- text-align: center;
13
- border-radius: 12px;
14
- }
15
- }
@@ -1,178 +0,0 @@
1
- .form-field {
2
- &_switch {
3
- cursor: pointer;
4
- }
5
- &__content {
6
- width: 100%;
7
- &-inner {
8
- position: relative;
9
- display: flex;
10
- & > input {
11
- width: 100%;
12
- }
13
- & .input-password {
14
- width: 100%;
15
- & > input {
16
- width: 100%;
17
- }
18
- }
19
- }
20
- }
21
- &__message {
22
- &-item {
23
- display: block;
24
- }
25
- }
26
- &__icon {
27
- height: 100%;
28
- position: absolute;
29
- display: flex;
30
- align-items: center;
31
- top: 0;
32
- right: 8px;
33
- }
34
- }
35
- .form {
36
- &^&-field_type_float {
37
- padding: var(--form-field_type_float-padding);
38
- position: relative;
39
- gap: var(--form-field_type_float-gap);
40
- &^&__item_state_focus,
41
- &^&__item_state_filled {
42
- & .form {
43
- &-field {
44
- &__label {
45
- background: var(--color-palette-white);
46
- transform: scale(1) translate(8px, -12px);
47
- }
48
- }
49
- }
50
- & .input {
51
- &::placeholder {
52
- opacity: 100%;
53
- }
54
- }
55
- & .textarea {
56
- &::placeholder {
57
- opacity: 100%;
58
- }
59
- }
60
- }
61
- & .form {
62
- &-field {
63
- &__label {
64
- padding: var(--form-field_type_float-label-padding);
65
- position: absolute;
66
- display: flex;
67
- z-index: 2;
68
- transform: scale(1.285) translate(8px, 4px);
69
- transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
70
- pointer-events: none;
71
- transform-origin: top left;
72
- }
73
- &__message {
74
- padding: var(--form-field_type_float-message-padding);
75
- }
76
- }
77
- }
78
- & .input {
79
- &::placeholder {
80
- transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
81
- opacity: 0%;
82
- }
83
- }
84
- & .textarea {
85
- &::placeholder {
86
- transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
87
- opacity: 0%;
88
- }
89
- }
90
- }
91
- }
92
- .form-field {
93
- &_type {
94
- &_classic {
95
- padding: var(--form-field_type_classic-padding);
96
- position: relative;
97
- gap: var(--form-field_type_classic-gap);
98
- ^^&__label {
99
- padding: var(--form-field_type_classic-label-padding);
100
- }
101
- ^^&__message {
102
- padding: var(--form-field_type_classic-message-padding);
103
- }
104
- }
105
- }
106
- }
107
- .form {
108
- &^&-field_type_ifta {
109
- margin: var(--form-field_type_ifta-margin);
110
- position: relative;
111
- gap: var(--form-field_type_ifta-gap);
112
- &^&__item_state_focus,
113
- &^&__item_state_filled {
114
- & .form {
115
- &-field {
116
- &__label {
117
- transform: scale(0.9) translate(0, 50%);
118
- }
119
- }
120
- }
121
- & .input {
122
- &::placeholder {
123
- opacity: 100%;
124
- }
125
- }
126
- }
127
- & .form {
128
- &-field {
129
- &__label {
130
- position: absolute;
131
- display: flex;
132
- top: 0;
133
- z-index: 2;
134
- left: 16px;
135
- transform: scale(1) translate(0, 100%);
136
- transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
137
- pointer-events: none;
138
- transform-origin: top left;
139
- }
140
- &__message {
141
- padding: var(--form-field-type-ifta-message-padding, 0 0 0 16px);
142
- }
143
- }
144
- }
145
- & .input {
146
- padding: var(--form-field_type_ifta-padding, 24px 0 12px 16px);
147
- &::placeholder {
148
- transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
149
- opacity: 0%;
150
- }
151
- }
152
- }
153
- }
154
- .form-field {
155
- &_state {
156
- &_hidden {
157
- visibility: hidden;
158
- position: absolute;
159
- z-index: -1;
160
- }
161
- }
162
- }
163
- .form-field {
164
- &_state {
165
- &_disabled {
166
- }
167
- }
168
- }
169
- :root {
170
- --form-field_type_classic-padding: 8px 0;
171
- --form-field_type_classic-gap: 4px;
172
- --form-field_type_classic-label-padding: 4px;
173
- --form-field_type_classic-message-padding: 4px 0 0 4px;
174
-
175
- --form-field_type_float-padding: 12px 0;
176
- --form-field_type_float-label-padding: 4px;
177
- --form-field_type_float-message-padding: 4px 0 0 12px;
178
- }