react-core-ts 1.2.0 → 1.2.2

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,612 +0,0 @@
1
- body * {
2
- box-sizing: border-box;
3
- }
4
- :root {
5
- --grey-dark: #4a4a4a;
6
- --grey-light: #d3d3d3;
7
- --blue-navy: #001f3f;
8
- --input-disabled: #a9a9a9;
9
- --error-light: #f08080;
10
- --error-extra-light: #fddede;
11
- --success: #28a745;
12
- --success-light: #d4edda;
13
- --blue-light: #add8e6;
14
- }
15
- :root {
16
- --blue-navy: #001f3f;
17
- --table-hover: #your-hover-color; /* Replace with your actual color code */
18
- }
19
-
20
- .custom-spinner {
21
- width: 24px !important; /* w-6 */
22
- height: 24px; /* h-6 */
23
- color: transparent; /* text-table-hover */
24
- fill: var(--blue-navy); /* fill-blue-navy */
25
- animation: spin 1s linear infinite; /* animate-spin */
26
- width: 15px;
27
- position: relative;
28
- top: 1px;
29
- }
30
-
31
- @keyframes spin {
32
- 0% {
33
- transform: rotate(0deg);
34
- }
35
- 100% {
36
- transform: rotate(360deg);
37
- }
38
- }
39
-
40
- .textfield,
41
- .textfield-big {
42
- outline: none;
43
- color: var(--grey-dark);
44
- border-color: var(--grey-light);
45
- background-color: white;
46
- }
47
-
48
- .textfield:focus,
49
- .textfield-big:focus {
50
- border-color: var(--blue-navy);
51
- }
52
-
53
- .textfield:disabled,
54
- .textfield-big:disabled {
55
- color: var(--input-disabled);
56
- }
57
-
58
- .textfield-error,
59
- .textfield-big-error {
60
- outline: none;
61
- color: var(--error-light) !important;
62
- border-color: var(--error-light) !important;
63
- background-color: var(--error-extra-light) !important ;
64
- }
65
-
66
- .textfield-error::placeholder,
67
- .textfield-big-error::placeholder {
68
- color: var(--error-light);
69
- }
70
-
71
- .textfield-success {
72
- outline: none;
73
- color: var(--success);
74
- border-color: var(--success);
75
- background-color: var(--success-light);
76
- }
77
-
78
- .textfield-success:focus {
79
- ring-width: 0;
80
- }
81
-
82
- .textfield-success::placeholder {
83
- color: var(--success);
84
- }
85
-
86
- .textfield-editable {
87
- outline: none;
88
- color: var(--grey-dark);
89
- border-color: var(--blue-navy);
90
- background-color: var(--blue-light);
91
- }
92
-
93
- .textfield-editable::placeholder {
94
- color: var(--grey-dark);
95
- }
96
-
97
- .qbs-autocomplete-suggestions {
98
- position: absolute;
99
- height: auto;
100
- width: 100%;
101
- padding: 8px; /* Corresponding to p-1.5 in Tailwind */
102
- z-index: 99;
103
- margin-top: 4px;
104
- margin-bottom: 0;
105
- border-radius: 8px;
106
- background: #fff;
107
- box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
108
- }
109
- .qbs-autocomplete-suggestions.bottom {
110
- top: 100%; /* Position below the input */
111
- /* Other styling */
112
- }
113
-
114
- .qbs-autocomplete-suggestions.top {
115
- bottom: 100%; /* Position above the input */
116
- /* Other styling */
117
- }
118
- .qbs-autocomplete-suggestions-item {
119
- cursor: pointer;
120
- padding: 6px 8px;
121
- border-radius: 6px;
122
- color: #222;
123
- font-size: 14px;
124
- font-weight: 500;
125
- line-height: 20px; /* 142.857% */
126
- width: 100%;
127
- display: flex;
128
- align-items: flex-start;
129
- gap: 8px;
130
- }
131
- .qbs-autocomplete-suggestions-item:hover {
132
- background: #f8f8f8;
133
- border-radius: 6px;
134
- }
135
-
136
- /* When value.id is equal to suggestion.id */
137
- .is-selected {
138
- border-radius: 6px;
139
- background: var(--neutrals-grey-20, #f4f4f4);
140
- }
141
-
142
- /* When value.id is NOT equal to suggestion.id */
143
- .qbs-autocomplete-suggestions-item .is-not-selected:hover {
144
- background-color: #f1f5f9; /* Replace with actual color code for 'hover:bg-table-hover' */
145
- }
146
-
147
- .qbs-autocomplete-notfound {
148
- cursor: pointer;
149
- padding: 6px 8px;
150
- border-radius: 6px;
151
- font-size: 12px;
152
- font-weight: 500;
153
- }
154
- .qbs-autocomplete-witherror-close-icon {
155
- position: absolute;
156
- top: calc(50% - 8px);
157
- right: 22px; /* right-1 */
158
- padding-left: 0.25rem; /* px-1 */
159
- padding-right: 0.25rem; /* px-1 */
160
- display: flex;
161
- justify-content: center;
162
- align-items: center;
163
- background-color: white; /* bg-white */
164
- }
165
- .qbs-autocomplete-close-icon {
166
- position: absolute;
167
- top: calc(50% - 8px);
168
- right: 2px; /* right-1 */
169
- padding-left: 0.25rem; /* px-1 */
170
- padding-right: 0.25rem; /* px-1 */
171
- display: flex;
172
- justify-content: center;
173
- align-items: center;
174
- background-color: white; /* bg-white */
175
- }
176
- .qbs-textfield-default {
177
- width: 100%;
178
- position: relative;
179
- padding-right: 8px;
180
- min-height: 36px;
181
- height: 36px;
182
- border-radius: 6px;
183
- padding-left: 8px;
184
- border: 1px solid #d6d8dc;
185
- background: #fff;
186
- box-sizing: border-box;
187
- font-size: 14px;
188
- font-style: normal;
189
- font-weight: 500;
190
- line-height: 20px;
191
- color: #313131;
192
- }
193
-
194
- .qbs-expandable-container {
195
- border: 1px solid #d6d8dc;
196
- background: #fff;
197
- box-sizing: border-box;
198
- padding: 5px;
199
- display: flex;
200
- flex-wrap: wrap;
201
- flex: 1 1 0%;
202
- gap: 5px;
203
- }
204
-
205
- .qbs-dropdown-selected-container {
206
- border: 0px;
207
- border-top: 1px solid #d6d8dc;
208
- min-height: 35px;
209
- margin-top: 2px;
210
- padding-top: 10px;
211
- }
212
-
213
- .qbs-dropdown-selected-container .qbs-clear-link {
214
- color: #e76458;
215
- }
216
-
217
- .qbs-textfield-default.expandable {
218
- height: auto;
219
- border: none;
220
- }
221
-
222
- .qbs-expandable-container .qbs-textfield-expandable {
223
- flex: 1 1 auto;
224
- display: inline-grid;
225
- grid-template-columns: 0px min-content;
226
- grid-area: 1 / 1 / 2 / 3;
227
- overflow: hidden;
228
- }
229
- .qbs-expandable-container .qbs-textfield-expandable::after {
230
- content: attr(data-value) " ";
231
- visibility: hidden;
232
- white-space: pre;
233
- grid-area: 1 / 2;
234
- font: inherit;
235
- min-width: 2px;
236
- border: 0px;
237
- margin: 0px;
238
- outline: 0px;
239
- padding: 0px;
240
- }
241
- .qbs-expandable-container .qbs-textfield-expandable input {
242
- opacity: 1;
243
- width: auto;
244
- grid-area: 1 / 2;
245
- min-width: 10px;
246
- border: 0px;
247
- margin: 0px;
248
- outline: 0px;
249
- padding: 0px;
250
- height: auto;
251
- min-height: auto;
252
- border-radius: 0;
253
- }
254
-
255
- .qbs-textfield-default::placeholder {
256
- font-size: 14px;
257
- font-style: normal;
258
- font-weight: 500;
259
- line-height: 20px;
260
- }
261
-
262
- .qbs-autocomplete-close-icon button:focus-within {
263
- outline: none;
264
- }
265
-
266
- .fullWidth {
267
- width: 100%;
268
- }
269
-
270
- .autoWidth {
271
- width: auto;
272
- }
273
- .icon-button {
274
- background: transparent;
275
- border: none;
276
- display: inline-flex;
277
- cursor: pointer;
278
- padding: 0px 1px;
279
- }
280
- .icon-button-rotate {
281
- rotate: 180deg;
282
- }
283
- .labels {
284
- font-size: 12px;
285
- }
286
- .dropdown-search-input {
287
- min-width: -webkit-fill-available;
288
- border-radius: 6px;
289
- border: 1px solid var(--border-card-color-default, #d6d8dc);
290
- background: var(--surface-input-bg-color-default, #fff);
291
- color: #313131;
292
- font-size: 14px;
293
- height: 36px;
294
- padding: 0px 8px;
295
- font-style: normal;
296
- font-weight: 500;
297
- line-height: 20px;
298
- padding-left: 32px;
299
- }
300
- .qbs-autocomplete-suggestions-sub {
301
- position: relative;
302
- overflow: auto;
303
- max-height: 184px;
304
- top: 0;
305
- display: flex;
306
- flex-direction: column;
307
- gap: 4px;
308
- }
309
- .qbs-autocomplete-listitem-container {
310
- display: flex;
311
- align-items: center;
312
- gap: 0px;
313
- }
314
- ul {
315
- list-style-type: none;
316
- }
317
-
318
- .react-core-ts-search-container {
319
- display: flex;
320
- align-items: center;
321
- gap: var(--spacing-4, 4px);
322
- align-self: stretch;
323
- margin-bottom: 4px;
324
- }
325
- .selected-item {
326
- display: flex;
327
- align-items: center;
328
- justify-content: space-between;
329
- padding: 3px 6px;
330
- margin: 0;
331
- background-color: #e0e0e0;
332
- color: #333;
333
- border-radius: 6px;
334
- border: 1px solid rgba(231, 100, 88, 0.1);
335
- background: rgba(231, 100, 88, 0.1);
336
- font-size: 12px;
337
- font-style: normal;
338
- font-weight: 500;
339
- line-height: 16px;
340
- color: #e76458;
341
- gap: 6px;
342
- height: 22px;
343
- }
344
-
345
- .remove-item-btn {
346
- background-color: transparent;
347
- border: none;
348
- color: #e76458;
349
- cursor: pointer;
350
- }
351
-
352
- .remove-item-btn:hover {
353
- color: #e76458;
354
- }
355
-
356
- .selected-items-container {
357
- display: flex;
358
- gap: 12px;
359
- align-items: center;
360
- position: absolute;
361
- left: 8px;
362
- z-index: 99;
363
- top: 6.5px;
364
- flex-wrap: wrap;
365
- }
366
-
367
- .qbs-expandable-container .selected-items-container {
368
- position: relative;
369
- top: 0;
370
- left: 0;
371
- }
372
-
373
- .selected-items-container .badge {
374
- background-color: #c63a3a;
375
- color: #fff;
376
- }
377
-
378
- .selected-item-more {
379
- display: flex;
380
- align-items: center;
381
- justify-content: center;
382
- padding: 3px 8px;
383
- margin: 0;
384
- border-radius: 6px;
385
- background: #c63a3a;
386
- font-size: 12px;
387
- font-style: normal;
388
- font-weight: 500;
389
- line-height: 16px;
390
- color: #fff;
391
- height: 22px;
392
- }
393
-
394
- .loadMoreSection {
395
- margin: 0;
396
- cursor: pointer;
397
- display: flex;
398
- justify-content: flex-start;
399
- padding: 8px;
400
- }
401
- .loadMoreSection p {
402
- color: #336cfc;
403
- font-size: 14px;
404
- font-style: normal;
405
- font-weight: 500;
406
- line-height: 20px;
407
- margin: 0;
408
- }
409
- ::-webkit-scrollbar-track {
410
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
411
- border-radius: 0px;
412
- background-color: transparent;
413
- }
414
-
415
- ::-webkit-scrollbar {
416
- width: 6px;
417
- height: 4px;
418
- background-color: transparent;
419
- }
420
-
421
- ::-webkit-scrollbar-thumb {
422
- border-radius: 100px;
423
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
424
- background-color: #ddd;
425
- }
426
-
427
- .qbs-autocomplete-suggestions-item.is-selected {
428
- color: #e76458;
429
- background: #f8f8f8;
430
- }
431
-
432
- span.dropdown-search-icon {
433
- position: absolute;
434
- left: 8px;
435
- top: 10px;
436
- }
437
-
438
- .dropdown-search-input:focus {
439
- outline: none;
440
- border: 1px solid #222;
441
- }
442
-
443
- .qbs-autocomplete-checkbox-container {
444
- gap: 8px;
445
- padding: 6px 8px;
446
- display: flex;
447
- align-items: flex-start;
448
- }
449
-
450
- .qbs-autocomplete-checkbox-container .qbs-autocomplete-suggestions-item {
451
- padding: 0;
452
- /* pointer-events: none; */
453
- }
454
-
455
- .qbs-autocomplete-checkbox-container:hover {
456
- background: #f8f8f8;
457
- border-radius: 6px;
458
- }
459
-
460
- .qbs-autocomplete-checkbox-container.is-selected {
461
- background: #f8f8f8;
462
- border-radius: 6px;
463
- }
464
-
465
- .qbs-autocomplete-checkbox {
466
- position: relative;
467
- display: flex;
468
- align-items: center;
469
- justify-content: center;
470
- }
471
-
472
- .qbs-autocomplete-checkbox input {
473
- opacity: 0;
474
- }
475
-
476
- .qbs-autocomplete-checkbox input ~ label {
477
- position: absolute;
478
- border-radius: 3px;
479
- border: 1px solid #999696;
480
- width: 16px;
481
- height: 16px;
482
- top: 3px;
483
- transition: all 0.2s ease;
484
- cursor: pointer;
485
- }
486
-
487
- .qbs-autocomplete-checkbox input ~ label svg {
488
- opacity: 0;
489
- transition: all 0.2s ease;
490
- position: absolute;
491
- left: 3px;
492
- top: 3px;
493
- width: 9px;
494
- height: 9px;
495
- }
496
-
497
- .qbs-autocomplete-checkbox input:checked ~ label {
498
- transition: all 0.2s ease;
499
- border-radius: 3px;
500
- background: #e76458;
501
- border-color: #e76458;
502
- }
503
- .qbs-autocomplete-checkbox input:checked ~ label svg {
504
- opacity: 1;
505
- transition: all 0.2s ease;
506
- }
507
-
508
- .action_label {
509
- font-size: 14px;
510
- color: #4c7ad6;
511
- }
512
- /* Tooltip.css */
513
- /* .tooltip-wrapper {
514
- position: relative;
515
- display: inline-block;
516
- }
517
-
518
- .tooltip-content {
519
- visibility: hidden;
520
- width: max-content;
521
- background-color: black;
522
- color: white;
523
- text-align: center;
524
- max-width: 150px;
525
- padding: 5px 10px;
526
- border-radius: 6px;
527
- position: absolute;
528
- z-index: 1;
529
- bottom: 125%;
530
- left: 50%;
531
- transform: translateX(-50%);
532
- transition: visibility 0.2s ease-in-out;
533
- }
534
-
535
- .tooltip-content::after {
536
- content: '';
537
- position: absolute;
538
- top: 100%;
539
- left: 50%;
540
- margin-left: -5px;
541
- border-width: 5px;
542
- border-style: solid;
543
- border-color: black transparent transparent transparent;
544
- }
545
-
546
- .tooltip-wrapper:hover .tooltip-content {
547
- visibility: visible;
548
- } */
549
- .qbs-table-tooltip {
550
- position: relative;
551
- display: contents;
552
- cursor: pointer;
553
- }
554
-
555
- .qbs-table-tooltip .tooltiptext,
556
- .tooltiptext {
557
- visibility: hidden;
558
- background-color: #000;
559
- color: #fff;
560
- text-align: center;
561
- padding: 6px;
562
- border-radius: 4px;
563
- position: absolute;
564
- z-index: 9999;
565
- opacity: 0;
566
- transition: opacity 0.3s;
567
- font-size: 14px;
568
- font-style: normal;
569
- font-weight: 400;
570
- line-height: 16px;
571
- max-width: 300px;
572
- }
573
-
574
- .qbs-table-tooltip.up .tooltiptext {
575
- bottom: 125%;
576
- left: 0%;
577
- }
578
-
579
- .qbs-table-tooltip.down .tooltiptext {
580
- top: 125%;
581
- right: 0px;
582
- left: auto;
583
- }
584
-
585
- .qbs-table-tooltip:hover .tooltiptext {
586
- visibility: visible;
587
- opacity: 1;
588
- }
589
-
590
- .qbs-table-tooltip .tooltiptext::after,
591
- .tooltiptext::after {
592
- content: "";
593
- position: absolute;
594
- border-width: 5px;
595
- border-style: solid;
596
- }
597
-
598
- .qbs-table-tooltip.up .tooltiptext::after,
599
- .up.tooltiptext::after {
600
- top: 100%;
601
- left: 50%;
602
- margin-left: -5px;
603
- border-color: #000 transparent transparent transparent;
604
- }
605
-
606
- .qbs-table-tooltip.down .tooltiptext::after,
607
- .down.tooltiptext::after {
608
- bottom: 100%;
609
- left: 50%;
610
- margin-left: -5px;
611
- border-color: transparent transparent #000 transparent;
612
- }
@@ -1,128 +0,0 @@
1
- .qbs-flex {
2
- display: flex;
3
- }
4
- .qbs-flex-wrap {
5
- flex-wrap: wrap;
6
- }
7
- .qbs-w-full {
8
- width: 100%;
9
- }
10
- .qbs-mb-2 {
11
- margin-bottom: 0.5rem;
12
- }
13
- .-qbs-mt-2 {
14
- margin-top: -0.5rem;
15
- }
16
- .qbs-flex-1 {
17
- flex: 1 1 0%;
18
- }
19
- .qbs-inline-block {
20
- display: inline-block;
21
- }
22
- .qbs-text-sm {
23
- font-size: 0.875rem;
24
- }
25
- .qbs-cursor-pointer {
26
- cursor: pointer;
27
- }
28
- .qbs-text-center {
29
- text-align: center;
30
- }
31
- .qbs-p-1 {
32
- padding: 0.25rem;
33
- }
34
- .qbs-border-b-2 {
35
- border-bottom-width: 2px;
36
- }
37
- .qbs-tab-item {
38
- color: #4b5563;
39
- border-color: #d1d5db;
40
- }
41
- .qbs-tab-item:hover {
42
- color: #2563eb;
43
- }
44
- .qbs-tab-active-item {
45
- color: #2563eb;
46
- border-color: #2563eb;
47
- }
48
- .qbs-relative {
49
- position: relative;
50
- }
51
- .qbs-gap-1 {
52
- gap: 0.25rem;
53
- }
54
- .qbs-rounded-full {
55
- border-radius: 9999px;
56
- }
57
- .qbs-text-xs {
58
- font-size: 0.75rem;
59
- }
60
- .qbs-inline-flex {
61
- display: inline-flex;
62
- }
63
- .qbs-items-center {
64
- align-items: center;
65
- }
66
- .qbs-justify-center {
67
- justify-content: center;
68
- }
69
- .qbs-px-2 {
70
- padding-left: 0.5rem;
71
- padding-right: 0.5rem;
72
- }
73
- .qbs-py-1 {
74
- padding-top: 0.25rem;
75
- padding-bottom: 0.25rem;
76
- }
77
- .qbs-leading-none {
78
- line-height: 1;
79
- }
80
- .qbs-min-w-6 {
81
- min-width: 1.5rem;
82
- }
83
- .qbs-min-h-6 {
84
- min-height: 1.5rem;
85
- }
86
- .qbs-align-middle {
87
- vertical-align: middle;
88
- }
89
- .qbs-min-emp-h {
90
- min-height: 183px;
91
- padding-top: 80px;
92
- padding-bottom: 80px;
93
- }
94
- .qbs-flex-grow {
95
- flex-grow: 1;
96
- }
97
- .qbs-text-right {
98
- text-align: right;
99
- }
100
- .qbs-readmore-collapse {
101
- cursor: pointer;
102
- width: 100%;
103
- text-align: center;
104
- display: flex;
105
- justify-content: center;
106
- margin-top: 5px;
107
- }
108
- .qbs-readmore-collapse div {
109
- border-radius: 9999px;
110
- min-width: 1.5rem;
111
- min-height: 1.5rem;
112
- padding: 5px;
113
- }
114
- .qbs-more-collapse:hover {
115
- background-color: #d1d5db;
116
- }
117
- .qbs-hidden {
118
- display: none;
119
- }
120
- .qbs-autocomplete-selected-suggestions .qbs-autocomplete-suggestions-sub {
121
- min-height: 184px;
122
- }
123
- .selected-items-outer-container {
124
- display: flex;
125
- gap: 5px;
126
- flex-wrap: wrap;
127
- overflow-x: auto;
128
- }