ros.grant.common 2.0.1035 → 2.0.1039

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.
@@ -1,399 +1,401 @@
1
- .inputbox {
2
- margin-bottom: 16px;
3
- width: 100%;
4
- position: relative;
5
-
6
- input {
7
- font-size: 14px;
8
- border-radius: 4px;
9
- padding: 12px 16px;
10
- border: 1px solid var(--Stroke);
1
+ .page-wrapper {
2
+ .inputbox {
3
+ margin-bottom: 16px;
11
4
  width: 100%;
12
- height: 48px;
13
- outline: none;
14
- transition: 0.2s;
15
-
16
- &.email-input__valid {
17
- border: 1px var(--Green) solid;
5
+ position: relative;
6
+
7
+ input {
8
+ font-size: 14px;
9
+ border-radius: 4px;
10
+ padding: 12px 16px;
11
+ border: 1px solid var(--Stroke);
12
+ width: 100%;
13
+ height: 48px;
14
+ outline: none;
15
+ transition: 0.2s;
16
+
17
+ &.email-input__valid {
18
+ border: 1px var(--Green) solid;
19
+ }
20
+
21
+ &.email-input__invalid {
22
+ border: 1px var(--Red) solid;
23
+ }
24
+
25
+ &:focus {
26
+ box-shadow: 0px 0px 0px 4px var(--Bg1);
27
+ }
18
28
  }
19
-
20
- &.email-input__invalid {
21
- border: 1px var(--Red) solid;
29
+
30
+ textarea {
31
+ font-size: 14px;
32
+ border-radius: 4px;
33
+ padding: 12px 16px;
34
+ border: 1px solid var(--Stroke);
35
+ width: 100%;
36
+ min-height: 48px;
37
+ outline: none;
38
+ transition: 0.2s;
39
+ resize: none;
40
+
41
+ &:focus {
42
+ box-shadow: 0px 0px 0px 4px var(--Bg1);
43
+ }
22
44
  }
23
-
24
- &:focus {
25
- box-shadow: 0px 0px 0px 4px var(--Bg1);
45
+
46
+ .label {
47
+ display: flex;
48
+ align-items: center;
49
+ width: 100%;
50
+ height: 14px;
51
+ line-height: 1;
52
+ margin-bottom: 6px;
26
53
  }
27
- }
28
-
29
- textarea {
30
- font-size: 14px;
31
- border-radius: 4px;
32
- padding: 12px 16px;
33
- border: 1px solid var(--Stroke);
34
- width: 100%;
35
- min-height: 48px;
36
- outline: none;
37
- transition: 0.2s;
38
- resize: none;
39
-
40
- &:focus {
41
- box-shadow: 0px 0px 0px 4px var(--Bg1);
54
+
55
+ .user_label {
56
+ display: flex !important;
57
+ align-items: center;
58
+ height: 14px;
42
59
  }
43
- }
44
-
45
- .label {
46
- display: flex;
47
- align-items: center;
48
- width: 100%;
49
- height: 14px;
50
- line-height: 1;
51
- margin-bottom: 6px;
52
- }
53
-
54
- .user_label {
55
- display: flex !important;
56
- align-items: center;
57
- height: 14px;
58
- }
59
-
60
- .email_label {
61
- @media (max-width: 735px) {
62
- position: relative;
63
- top: -10px;
60
+
61
+ .email_label {
62
+ @media (max-width: 735px) {
63
+ position: relative;
64
+ top: -10px;
65
+ }
66
+
67
+ @media (max-width: 640px) {
68
+ position: unset;
69
+ top: unset;
70
+ }
64
71
  }
65
-
66
- @media (max-width: 640px) {
67
- position: unset;
68
- top: unset;
72
+
73
+ .input-block {
74
+ border: 1px solid var(--Stroke);
75
+ border-radius: 4px;
76
+ padding: 5px 16px;
77
+ min-height: 48px;
78
+ display: flex;
79
+ align-items: center;
80
+
81
+ // Критерии валидации
82
+ >.custom-checkbox {
83
+ width: 100%;
84
+ }
69
85
  }
70
- }
71
-
72
- .input-block {
73
- border: 1px solid var(--Stroke);
74
- border-radius: 4px;
75
- padding: 5px 16px;
76
- min-height: 48px;
77
- display: flex;
78
- align-items: center;
79
-
80
- // Критерии валидации
81
- >.custom-checkbox {
86
+
87
+ .input-group {
88
+ position: relative;
89
+ }
90
+
91
+ .textarea-input {
92
+ font-size: 14px;
93
+ border-radius: 4px;
94
+ padding: 12px;
95
+ border: 1px solid var(--Stroke);
96
+ resize: none;
82
97
  width: 100%;
83
98
  }
84
- }
85
-
86
- .input-group {
87
- position: relative;
88
- }
89
-
90
- .textarea-input {
91
- font-size: 14px;
92
- border-radius: 4px;
93
- padding: 12px;
94
- border: 1px solid var(--Stroke);
95
- resize: none;
96
- width: 100%;
97
- }
98
-
99
- .maxlength-feedback {
100
- position: absolute;
101
- bottom: 1px;
102
- right: 7px;
103
- font-size: 11px;
104
- line-height: 160%;
105
- color: var(--Stroke);
106
- z-index: 1;
107
- }
108
-
109
- .error {
110
- font-size: 12px;
111
- margin-top: 4px;
112
- color: var(--Red);
113
-
114
- a {
115
- font-weight: bold;
99
+
100
+ .maxlength-feedback {
101
+ position: absolute;
102
+ bottom: 1px;
103
+ right: 7px;
104
+ font-size: 11px;
105
+ line-height: 160%;
106
+ color: var(--Stroke);
107
+ z-index: 1;
108
+ }
109
+
110
+ .error {
111
+ font-size: 12px;
112
+ margin-top: 4px;
116
113
  color: var(--Red);
114
+
115
+ a {
116
+ font-weight: bold;
117
+ color: var(--Red);
118
+ }
117
119
  }
118
- }
119
-
120
- .input-contact-phone {
121
- height: 50px;
122
- padding-left: 45px;
123
- width: 180px;
124
- }
125
-
126
- &.range-with-step {
127
- display: flex;
128
- align-items: center;
129
- padding: 0 10px;
130
- border: 1px solid var(--Stroke);
131
- height: 48px;
132
- border-radius: 4px;
133
-
134
- b {
135
- white-space: nowrap;
120
+
121
+ .input-contact-phone {
122
+ height: 50px;
123
+ padding-left: 45px;
124
+ width: 180px;
136
125
  }
137
-
138
- input {
139
- border: none;
140
- padding: 0;
141
- margin: 0 8px;
142
- min-height: auto;
143
- height: auto;
126
+
127
+ &.range-with-step {
128
+ display: flex;
129
+ align-items: center;
130
+ padding: 0 10px;
131
+ border: 1px solid var(--Stroke);
132
+ height: 48px;
133
+ border-radius: 4px;
134
+
135
+ b {
136
+ white-space: nowrap;
137
+ }
138
+
139
+ input {
140
+ border: none;
141
+ padding: 0;
142
+ margin: 0 8px;
143
+ min-height: auto;
144
+ height: auto;
145
+ }
144
146
  }
145
- }
146
-
147
- &.web-link-input {
148
- cursor: pointer !important;
149
-
150
- input[name="webLink"],
151
- input {
147
+
148
+ &.web-link-input {
152
149
  cursor: pointer !important;
153
- }
154
-
155
- input:disabled {
156
- pointer-events: none;
157
- }
158
- }
159
-
160
- .input-work-phone {
161
- height: 50px;
162
- padding-left: 45px;
163
- width: 180px;
164
- }
165
-
166
- &.locality-address {
167
- .custom-input-group {
168
- width: 100%;
169
- }
170
-
171
- .address-manual-checkbox__container {
172
- margin-top: 12px;
173
- display: flex;
174
-
175
- input[type='checkbox'] {
176
- margin-top: 0;
177
- min-height: 12px;
178
- min-width: 20px;
179
- height: 12px;
180
- width: 20px;
150
+
151
+ input[name="webLink"],
152
+ input {
153
+ cursor: pointer !important;
181
154
  }
182
-
183
- .checkbox__mark {
184
- margin-right: 12px;
155
+
156
+ input:disabled {
157
+ pointer-events: none;
185
158
  }
186
159
  }
187
- }
188
-
189
- .custom-input-group {
190
- .intl-tel-input {
191
- height: 48px;
192
- width: 100%;
193
-
194
- @media (max-width: 1060px) {
195
- display: unset;
160
+
161
+ .input-work-phone {
162
+ height: 50px;
163
+ padding-left: 45px;
164
+ width: 180px;
165
+ }
166
+
167
+ &.locality-address {
168
+ .custom-input-group {
169
+ width: 100%;
196
170
  }
197
-
198
- @media (max-width: 640px) {
199
- display: block;
171
+
172
+ .address-manual-checkbox__container {
173
+ margin-top: 12px;
174
+ display: flex;
175
+
176
+ input[type='checkbox'] {
177
+ margin-top: 0;
178
+ min-height: 12px;
179
+ min-width: 20px;
180
+ height: 12px;
181
+ width: 20px;
182
+ }
183
+
184
+ .checkbox__mark {
185
+ margin-right: 12px;
186
+ }
200
187
  }
201
-
202
- input,
203
- .country-name {
188
+ }
189
+
190
+ .custom-input-group {
191
+ .intl-tel-input {
192
+ height: 48px;
204
193
  width: 100%;
205
-
194
+
206
195
  @media (max-width: 1060px) {
207
- width: 100%;
196
+ display: unset;
208
197
  }
209
-
198
+
210
199
  @media (max-width: 640px) {
211
200
  display: block;
201
+ }
202
+
203
+ input,
204
+ .country-name {
212
205
  width: 100%;
206
+
207
+ @media (max-width: 1060px) {
208
+ width: 100%;
209
+ }
210
+
211
+ @media (max-width: 640px) {
212
+ display: block;
213
+ width: 100%;
214
+ }
215
+
216
+ @media (max-width: 320px) {
217
+ width: 280px;
218
+ }
213
219
  }
214
-
215
- @media (max-width: 320px) {
216
- width: 280px;
220
+ }
221
+
222
+ input.phone {
223
+ &-input {
224
+ &__valid {
225
+ border: var(--Green) solid 1px;
226
+ }
227
+
228
+ &__invalid {
229
+ border: var(--Red) solid 1px;
230
+ }
217
231
  }
218
232
  }
219
- }
220
-
221
- input.phone {
222
- &-input {
223
- &__valid {
224
- border: var(--Green) solid 1px;
233
+
234
+ input.email {
235
+ &-input {
236
+ &__valid {
237
+ border: 1px var(--Green) solid;
238
+ }
239
+
240
+ &__invalid {
241
+ border: 1px var(--Red) solid;
242
+ }
225
243
  }
226
-
227
- &__invalid {
228
- border: var(--Red) solid 1px;
244
+ }
245
+ }
246
+
247
+ // ОТВЯЗАТЬ ОТ "inputbox" И ПЕРЕНЕСТИ ВНУТРЬ "inputbox" НА ОДИН УРОВЕНЬ С "custom-checkbox"
248
+ &.checkbox-required {
249
+ .custom-input-group {
250
+ .checkbox__label {
251
+ .required-active {
252
+ line-height: 0.7;
253
+ }
229
254
  }
230
255
  }
231
256
  }
232
-
233
- input.email {
234
- &-input {
235
- &__valid {
236
- border: 1px var(--Green) solid;
257
+
258
+ .custom-input-wrapper {
259
+ width: 100%;
260
+ position: relative;
261
+ margin: 0;
262
+ }
263
+
264
+ &-bik {
265
+ padding-bottom: 0;
266
+ padding-left: 0 !important;
267
+
268
+ .bik-inline {
269
+ display: flex !important;
270
+
271
+ label {
272
+ width: 50%;
237
273
  }
238
-
239
- &__invalid {
240
- border: 1px var(--Red) solid;
274
+
275
+ .ks-label {
276
+ margin-left: 24px;
241
277
  }
242
278
  }
243
- }
244
- }
245
-
246
- // ОТВЯЗАТЬ ОТ "inputbox" И ПЕРЕНЕСТИ ВНУТРЬ "inputbox" НА ОДИН УРОВЕНЬ С "custom-checkbox"
247
- &.checkbox-required {
248
- .custom-input-group {
249
- .checkbox__label {
250
- .required-active {
251
- line-height: 0.7;
279
+
280
+ .input-bik {
281
+ font-family: 'PT Sans', sans-serif;
282
+ font-weight: 500;
283
+ font-size: 14px;
284
+ border-radius: 4px;
285
+ height: 48px;
286
+ border: 1px solid var(--Stroke);
287
+ width: 100%;
288
+ outline: none;
289
+ display: flex !important;
290
+ align-items: center;
291
+
292
+ input {
293
+ border: none;
294
+ padding: 0 0 0 10px;
295
+ width: 50%;
296
+ margin-bottom: 0;
297
+ height: 40px;
298
+ box-shadow: none;
299
+
300
+ &:focus {
301
+ box-shadow: none;
302
+ }
252
303
  }
253
304
  }
254
305
  }
255
- }
256
-
257
- .custom-input-wrapper {
258
- width: 100%;
259
- position: relative;
260
- margin: 0;
261
- }
262
-
263
- &-bik {
264
- padding-bottom: 0;
265
- padding-left: 0 !important;
266
-
267
- .bik-inline {
268
- display: flex !important;
269
-
270
- label {
271
- width: 50%;
306
+
307
+ .display-inline {
308
+ display: inline-block !important;
309
+ width: auto;
310
+ }
311
+
312
+ .rangebox {
313
+ display: flex;
314
+
315
+ .custom-input-wrapper {
316
+ width: 100%;
272
317
  }
273
-
274
- .ks-label {
275
- margin-left: 24px;
318
+
319
+ input {
320
+ width: 60px;
321
+ height: 48px;
322
+ justify-content: center;
323
+ text-align: center;
324
+ min-width: auto;
276
325
  }
277
326
  }
278
-
279
- .input-bik {
280
- font-family: 'PT Sans', sans-serif;
281
- font-weight: 500;
282
- font-size: 14px;
283
- border-radius: 4px;
284
- height: 48px;
285
- border: 1px solid var(--Stroke);
286
- width: 100%;
287
- outline: none;
288
- display: flex !important;
327
+
328
+ .checkbox-inputbox {
329
+ display: flex;
330
+ flex-direction: row;
289
331
  align-items: center;
290
-
291
- input {
292
- border: none;
293
- padding: 0 0 0 10px;
294
- width: 50%;
295
- margin-bottom: 0;
296
- height: 40px;
297
- box-shadow: none;
298
-
299
- &:focus {
300
- box-shadow: none;
332
+ margin-bottom: 8px;
333
+
334
+ .custom-input-group {
335
+ min-width: 0;
336
+ width: 18px;
337
+ background-color: unset;
338
+ min-height: auto;
339
+
340
+ .checkbox-container {
341
+ width: 18px;
301
342
  }
302
343
  }
344
+
345
+ .checkbox {
346
+ padding-top: 0;
347
+ left: auto;
348
+ }
349
+
350
+ label {
351
+ min-height: initial;
352
+ font-weight: normal;
353
+ }
303
354
  }
304
- }
305
-
306
- .display-inline {
307
- display: inline-block !important;
308
- width: auto;
309
- }
310
-
311
- .rangebox {
312
- display: flex;
313
-
314
- .custom-input-wrapper {
315
- width: 100%;
355
+
356
+ .custom-date-time {
357
+ input {
358
+ width: 100%;
359
+ }
316
360
  }
317
-
318
- input {
319
- width: 60px;
320
- height: 48px;
361
+
362
+ .input-icon {
363
+ height: calc(~'100% - 4px');
364
+ width: 40px;
365
+ position: absolute;
366
+ top: 2px;
367
+ right: 2px;
368
+ display: flex;
321
369
  justify-content: center;
322
- text-align: center;
323
- min-width: auto;
370
+ align-items: center;
371
+ background: #fff;
372
+ cursor: pointer;
324
373
  }
325
- }
326
-
327
- .checkbox-inputbox {
328
- display: flex;
329
- flex-direction: row;
330
- align-items: center;
331
- margin-bottom: 8px;
332
-
333
- .custom-input-group {
334
- min-width: 0;
335
- width: 18px;
336
- background-color: unset;
374
+
375
+ .ks-label {
376
+ color: var(--Secondary);
377
+ margin: 0 0 0 15px;
337
378
  min-height: auto;
338
-
339
- .checkbox-container {
340
- width: 18px;
341
- }
379
+ font-weight: normal;
380
+ height: auto;
381
+ margin-bottom: 0 !important;
342
382
  }
343
-
344
- .checkbox {
345
- padding-top: 0;
346
- left: auto;
383
+
384
+ .input__valid {
385
+ border: 1px solid var(--Green) !important;
347
386
  }
348
-
349
- label {
350
- min-height: initial;
351
- font-weight: normal;
387
+
388
+ .input__invalid {
389
+ border: 1px solid var(--Red) !important;
352
390
  }
353
- }
354
-
355
- .custom-date-time {
356
- input {
357
- width: 100%;
391
+
392
+ .file-input__invalid {
393
+ border: 1px dashed var(--Red);
394
+ }
395
+
396
+ .file-input__valid {
397
+ border: 1px dashed var(--Green);
358
398
  }
359
- }
360
-
361
- .input-icon {
362
- height: calc(~'100% - 4px');
363
- width: 40px;
364
- position: absolute;
365
- top: 2px;
366
- right: 2px;
367
- display: flex;
368
- justify-content: center;
369
- align-items: center;
370
- background: #fff;
371
- cursor: pointer;
372
- }
373
-
374
- .ks-label {
375
- color: var(--Secondary);
376
- margin: 0 0 0 15px;
377
- min-height: auto;
378
- font-weight: normal;
379
- height: auto;
380
- margin-bottom: 0 !important;
381
- }
382
-
383
- .input__valid {
384
- border: 1px solid var(--Green) !important;
385
- }
386
-
387
- .input__invalid {
388
- border: 1px solid var(--Red) !important;
389
- }
390
-
391
- .file-input__invalid {
392
- border: 1px dashed var(--Red);
393
- }
394
-
395
- .file-input__valid {
396
- border: 1px dashed var(--Green);
397
399
  }
398
400
  }
399
401
 
@@ -516,6 +518,14 @@ input.ng-invalid.ng-touched {
516
518
  min-height: auto;
517
519
  }
518
520
 
521
+ // label в качестве заголовка
522
+ &.label-title {
523
+ font-weight: bold;
524
+ font-size: 18px;
525
+ line-height: 130%;
526
+ color: var(--Main1);
527
+ }
528
+
519
529
  .required-active {
520
530
  font-size: 20px;
521
531
  color: var(--Red);
@@ -46,6 +46,7 @@
46
46
  position: relative;
47
47
  display: flex;
48
48
  align-items: center;
49
+ padding-right: 1px;
49
50
 
50
51
  &:after {
51
52
  content: '';
@@ -59,6 +60,8 @@
59
60
  }
60
61
 
61
62
  &:last-child {
63
+ padding-right: 0;
64
+
62
65
  &:after {
63
66
  display: none;
64
67
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.1035",
2
+ "version": "2.0.1039",
3
3
  "name": "ros.grant.common",
4
4
  "private": false,
5
5
  "description": "Collection of static files used by RosGrant awesome team",