react-core-ts 1.3.5 → 1.3.7

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