react-core-ts 1.2.12 → 1.2.14

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