@knovator/pagecreator-admin 0.0.9 → 0.2.0

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 (92) hide show
  1. package/README.md +2 -2
  2. package/index.d.ts +1 -5
  3. package/package.json +3 -7
  4. package/index.css +0 -1602
  5. package/index.js +0 -7361
  6. package/lib/api/index.d.ts +0 -10
  7. package/lib/api/list.d.ts +0 -48
  8. package/lib/components/Page/AddButton/AddButton.d.ts +0 -3
  9. package/lib/components/Page/AddButton/index.d.ts +0 -2
  10. package/lib/components/Page/Form/PageForm.d.ts +0 -4
  11. package/lib/components/Page/Form/index.d.ts +0 -2
  12. package/lib/components/Page/Page/Page.d.ts +0 -13
  13. package/lib/components/Page/Page/index.d.ts +0 -2
  14. package/lib/components/Page/PageFormActions/PageFormActions.d.ts +0 -4
  15. package/lib/components/Page/PageFormActions/index.d.ts +0 -2
  16. package/lib/components/Page/PageFormWrapper/PageFormWrapper.d.ts +0 -4
  17. package/lib/components/Page/PageFormWrapper/index.d.ts +0 -2
  18. package/lib/components/Page/Pagination/PagePagination.d.ts +0 -3
  19. package/lib/components/Page/Pagination/index.d.ts +0 -2
  20. package/lib/components/Page/Search/PageSearch.d.ts +0 -3
  21. package/lib/components/Page/Search/index.d.ts +0 -2
  22. package/lib/components/Page/Table/PageTable.d.ts +0 -3
  23. package/lib/components/Page/Table/index.d.ts +0 -2
  24. package/lib/components/Page/index.d.ts +0 -2
  25. package/lib/components/Widget/AddButton/AddButton.d.ts +0 -3
  26. package/lib/components/Widget/AddButton/index.d.ts +0 -2
  27. package/lib/components/Widget/Form/TileItemsAccordian.d.ts +0 -4
  28. package/lib/components/Widget/Form/WidgetForm.d.ts +0 -4
  29. package/lib/components/Widget/Form/index.d.ts +0 -2
  30. package/lib/components/Widget/Pagination/WidgetPagination.d.ts +0 -3
  31. package/lib/components/Widget/Pagination/index.d.ts +0 -2
  32. package/lib/components/Widget/Search/WidgetSearch.d.ts +0 -3
  33. package/lib/components/Widget/Search/index.d.ts +0 -2
  34. package/lib/components/Widget/Table/WidgetTable.d.ts +0 -3
  35. package/lib/components/Widget/Table/index.d.ts +0 -2
  36. package/lib/components/Widget/Widget/Widget.d.ts +0 -13
  37. package/lib/components/Widget/Widget/index.d.ts +0 -2
  38. package/lib/components/Widget/WidgetFormActions/WidgetFormActions.d.ts +0 -4
  39. package/lib/components/Widget/WidgetFormActions/index.d.ts +0 -2
  40. package/lib/components/Widget/WidgetFormWrapper/WidgetFormWrapper.d.ts +0 -4
  41. package/lib/components/Widget/WidgetFormWrapper/index.d.ts +0 -2
  42. package/lib/components/Widget/index.d.ts +0 -2
  43. package/lib/components/common/Accordian/Accordian.d.ts +0 -13
  44. package/lib/components/common/Accordian/index.d.ts +0 -2
  45. package/lib/components/common/Button/Button.d.ts +0 -4
  46. package/lib/components/common/Button/index.d.ts +0 -2
  47. package/lib/components/common/DNDItemsList/DNDItemsList.d.ts +0 -4
  48. package/lib/components/common/DNDItemsList/index.d.ts +0 -2
  49. package/lib/components/common/DeleteModal/DeleteModal.d.ts +0 -4
  50. package/lib/components/common/DeleteModal/index.d.ts +0 -2
  51. package/lib/components/common/Drawer/Drawer.d.ts +0 -9
  52. package/lib/components/common/Drawer/index.d.ts +0 -2
  53. package/lib/components/common/Form/Form.d.ts +0 -15
  54. package/lib/components/common/Form/SimpleForm.d.ts +0 -17
  55. package/lib/components/common/Form/index.d.ts +0 -4
  56. package/lib/components/common/FormActions/FormActions.d.ts +0 -10
  57. package/lib/components/common/FormActions/index.d.ts +0 -2
  58. package/lib/components/common/ImageUpload/ImageUpload.d.ts +0 -4
  59. package/lib/components/common/ImageUpload/index.d.ts +0 -2
  60. package/lib/components/common/Input/Checkbox.d.ts +0 -4
  61. package/lib/components/common/Input/Input.d.ts +0 -4
  62. package/lib/components/common/Input/ReactSelect.d.ts +0 -4
  63. package/lib/components/common/Input/Select.d.ts +0 -4
  64. package/lib/components/common/Input/index.d.ts +0 -10
  65. package/lib/components/common/Modal/Modal.d.ts +0 -8
  66. package/lib/components/common/Modal/index.d.ts +0 -2
  67. package/lib/components/common/Pagination/Pagination.d.ts +0 -4
  68. package/lib/components/common/Pagination/index.d.ts +0 -2
  69. package/lib/components/common/Table/Table.d.ts +0 -4
  70. package/lib/components/common/Table/index.d.ts +0 -2
  71. package/lib/components/common/Toggle/Toggle.d.ts +0 -4
  72. package/lib/components/common/Toggle/index.d.ts +0 -2
  73. package/lib/constants/common.d.ts +0 -100
  74. package/lib/context/PageContext.d.ts +0 -7
  75. package/lib/context/ProviderContext.d.ts +0 -5
  76. package/lib/context/WidgetContext.d.ts +0 -7
  77. package/lib/helper/utils.d.ts +0 -11
  78. package/lib/hooks/usePage.d.ts +0 -39
  79. package/lib/hooks/usePagination.d.ts +0 -27
  80. package/lib/hooks/useWidget.d.ts +0 -45
  81. package/lib/icons/chevronDown.d.ts +0 -4
  82. package/lib/icons/chevronLeft.d.ts +0 -4
  83. package/lib/icons/chevronRight.d.ts +0 -4
  84. package/lib/icons/chevronUp.d.ts +0 -4
  85. package/lib/icons/close.d.ts +0 -4
  86. package/lib/icons/pencil.d.ts +0 -4
  87. package/lib/icons/trash.d.ts +0 -4
  88. package/lib/types/api.d.ts +0 -34
  89. package/lib/types/common.d.ts +0 -20
  90. package/lib/types/components.d.ts +0 -276
  91. package/lib/types/context.d.ts +0 -95
  92. package/lib/types/index.d.ts +0 -4
package/index.css DELETED
@@ -1,1602 +0,0 @@
1
- /*
2
- ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
3
- *//*
4
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
5
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
6
- */
7
-
8
- *,
9
- ::before,
10
- ::after {
11
- box-sizing: border-box; /* 1 */
12
- border-width: 0; /* 2 */
13
- border-style: solid; /* 2 */
14
- border-color: #e5e7eb; /* 2 */
15
- }
16
-
17
- ::before,
18
- ::after {
19
- --tw-content: '';
20
- }
21
-
22
- /*
23
- 1. Use a consistent sensible line-height in all browsers.
24
- 2. Prevent adjustments of font size after orientation changes in iOS.
25
- 3. Use a more readable tab size.
26
- 4. Use the user's configured `sans` font-family by default.
27
- */
28
-
29
- html {
30
- line-height: 1.5; /* 1 */
31
- -webkit-text-size-adjust: 100%; /* 2 */
32
- -moz-tab-size: 4; /* 3 */
33
- -o-tab-size: 4;
34
- tab-size: 4; /* 3 */
35
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
36
- }
37
-
38
- /*
39
- 1. Remove the margin in all browsers.
40
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
41
- */
42
-
43
- body {
44
- margin: 0; /* 1 */
45
- line-height: inherit; /* 2 */
46
- }
47
-
48
- /*
49
- 1. Add the correct height in Firefox.
50
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
51
- 3. Ensure horizontal rules are visible by default.
52
- */
53
-
54
- hr {
55
- height: 0; /* 1 */
56
- color: inherit; /* 2 */
57
- border-top-width: 1px; /* 3 */
58
- }
59
-
60
- /*
61
- Add the correct text decoration in Chrome, Edge, and Safari.
62
- */
63
-
64
- abbr:where([title]) {
65
- -webkit-text-decoration: underline dotted;
66
- text-decoration: underline dotted;
67
- }
68
-
69
- /*
70
- Remove the default font size and weight for headings.
71
- */
72
-
73
- h1,
74
- h2,
75
- h3,
76
- h4,
77
- h5,
78
- h6 {
79
- font-size: inherit;
80
- font-weight: inherit;
81
- }
82
-
83
- /*
84
- Reset links to optimize for opt-in styling instead of opt-out.
85
- */
86
-
87
- a {
88
- color: inherit;
89
- text-decoration: inherit;
90
- }
91
-
92
- /*
93
- Add the correct font weight in Edge and Safari.
94
- */
95
-
96
- b,
97
- strong {
98
- font-weight: bolder;
99
- }
100
-
101
- /*
102
- 1. Use the user's configured `mono` font family by default.
103
- 2. Correct the odd `em` font sizing in all browsers.
104
- */
105
-
106
- code,
107
- kbd,
108
- samp,
109
- pre {
110
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
111
- font-size: 1em; /* 2 */
112
- }
113
-
114
- /*
115
- Add the correct font size in all browsers.
116
- */
117
-
118
- small {
119
- font-size: 80%;
120
- }
121
-
122
- /*
123
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
124
- */
125
-
126
- sub,
127
- sup {
128
- font-size: 75%;
129
- line-height: 0;
130
- position: relative;
131
- vertical-align: baseline;
132
- }
133
-
134
- sub {
135
- bottom: -0.25em;
136
- }
137
-
138
- sup {
139
- top: -0.5em;
140
- }
141
-
142
- /*
143
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
144
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
145
- 3. Remove gaps between table borders by default.
146
- */
147
-
148
- table {
149
- text-indent: 0; /* 1 */
150
- border-color: inherit; /* 2 */
151
- border-collapse: collapse; /* 3 */
152
- }
153
-
154
- /*
155
- 1. Change the font styles in all browsers.
156
- 2. Remove the margin in Firefox and Safari.
157
- 3. Remove default padding in all browsers.
158
- */
159
-
160
- button,
161
- input,
162
- optgroup,
163
- select,
164
- textarea {
165
- font-family: inherit; /* 1 */
166
- font-size: 100%; /* 1 */
167
- font-weight: inherit; /* 1 */
168
- line-height: inherit; /* 1 */
169
- color: inherit; /* 1 */
170
- margin: 0; /* 2 */
171
- padding: 0; /* 3 */
172
- }
173
-
174
- /*
175
- Remove the inheritance of text transform in Edge and Firefox.
176
- */
177
-
178
- button,
179
- select {
180
- text-transform: none;
181
- }
182
-
183
- /*
184
- 1. Correct the inability to style clickable types in iOS and Safari.
185
- 2. Remove default button styles.
186
- */
187
-
188
- button,
189
- [type='button'],
190
- [type='reset'],
191
- [type='submit'] {
192
- -webkit-appearance: button; /* 1 */
193
- background-color: transparent; /* 2 */
194
- background-image: none; /* 2 */
195
- }
196
-
197
- /*
198
- Use the modern Firefox focus style for all focusable elements.
199
- */
200
-
201
- :-moz-focusring {
202
- outline: auto;
203
- }
204
-
205
- /*
206
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
207
- */
208
-
209
- :-moz-ui-invalid {
210
- box-shadow: none;
211
- }
212
-
213
- /*
214
- Add the correct vertical alignment in Chrome and Firefox.
215
- */
216
-
217
- progress {
218
- vertical-align: baseline;
219
- }
220
-
221
- /*
222
- Correct the cursor style of increment and decrement buttons in Safari.
223
- */
224
-
225
- ::-webkit-inner-spin-button,
226
- ::-webkit-outer-spin-button {
227
- height: auto;
228
- }
229
-
230
- /*
231
- 1. Correct the odd appearance in Chrome and Safari.
232
- 2. Correct the outline style in Safari.
233
- */
234
-
235
- [type='search'] {
236
- -webkit-appearance: textfield; /* 1 */
237
- outline-offset: -2px; /* 2 */
238
- }
239
-
240
- /*
241
- Remove the inner padding in Chrome and Safari on macOS.
242
- */
243
-
244
- ::-webkit-search-decoration {
245
- -webkit-appearance: none;
246
- }
247
-
248
- /*
249
- 1. Correct the inability to style clickable types in iOS and Safari.
250
- 2. Change font properties to `inherit` in Safari.
251
- */
252
-
253
- ::-webkit-file-upload-button {
254
- -webkit-appearance: button; /* 1 */
255
- font: inherit; /* 2 */
256
- }
257
-
258
- /*
259
- Add the correct display in Chrome and Safari.
260
- */
261
-
262
- summary {
263
- display: list-item;
264
- }
265
-
266
- /*
267
- Removes the default spacing and border for appropriate elements.
268
- */
269
-
270
- blockquote,
271
- dl,
272
- dd,
273
- h1,
274
- h2,
275
- h3,
276
- h4,
277
- h5,
278
- h6,
279
- hr,
280
- figure,
281
- p,
282
- pre {
283
- margin: 0;
284
- }
285
-
286
- fieldset {
287
- margin: 0;
288
- padding: 0;
289
- }
290
-
291
- legend {
292
- padding: 0;
293
- }
294
-
295
- ol,
296
- ul,
297
- menu {
298
- list-style: none;
299
- margin: 0;
300
- padding: 0;
301
- }
302
-
303
- /*
304
- Prevent resizing textareas horizontally by default.
305
- */
306
-
307
- textarea {
308
- resize: vertical;
309
- }
310
-
311
- /*
312
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
313
- 2. Set the default placeholder color to the user's configured gray 400 color.
314
- */
315
-
316
- input::-moz-placeholder, textarea::-moz-placeholder {
317
- opacity: 1; /* 1 */
318
- color: #9ca3af; /* 2 */
319
- }
320
-
321
- input::placeholder,
322
- textarea::placeholder {
323
- opacity: 1; /* 1 */
324
- color: #9ca3af; /* 2 */
325
- }
326
-
327
- /*
328
- Set the default cursor for buttons.
329
- */
330
-
331
- button,
332
- [role="button"] {
333
- cursor: pointer;
334
- }
335
-
336
- /*
337
- Make sure disabled buttons don't get the pointer cursor.
338
- */
339
- :disabled {
340
- cursor: default;
341
- }
342
-
343
- /*
344
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
345
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
346
- This can trigger a poorly considered lint error in some tools but is included by design.
347
- */
348
-
349
- img,
350
- svg,
351
- video,
352
- canvas,
353
- audio,
354
- iframe,
355
- embed,
356
- object {
357
- display: block; /* 1 */
358
- vertical-align: middle; /* 2 */
359
- }
360
-
361
- /*
362
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
363
- */
364
-
365
- img,
366
- video {
367
- max-width: 100%;
368
- height: auto;
369
- }
370
-
371
- *, ::before, ::after {
372
- --tw-border-spacing-x: 0;
373
- --tw-border-spacing-y: 0;
374
- --tw-translate-x: 0;
375
- --tw-translate-y: 0;
376
- --tw-rotate: 0;
377
- --tw-skew-x: 0;
378
- --tw-skew-y: 0;
379
- --tw-scale-x: 1;
380
- --tw-scale-y: 1;
381
- --tw-pan-x: ;
382
- --tw-pan-y: ;
383
- --tw-pinch-zoom: ;
384
- --tw-scroll-snap-strictness: proximity;
385
- --tw-ordinal: ;
386
- --tw-slashed-zero: ;
387
- --tw-numeric-figure: ;
388
- --tw-numeric-spacing: ;
389
- --tw-numeric-fraction: ;
390
- --tw-ring-inset: ;
391
- --tw-ring-offset-width: 0px;
392
- --tw-ring-offset-color: #fff;
393
- --tw-ring-color: rgb(59 130 246 / 0.5);
394
- --tw-ring-offset-shadow: 0 0 #0000;
395
- --tw-ring-shadow: 0 0 #0000;
396
- --tw-shadow: 0 0 #0000;
397
- --tw-shadow-colored: 0 0 #0000;
398
- --tw-blur: ;
399
- --tw-brightness: ;
400
- --tw-contrast: ;
401
- --tw-grayscale: ;
402
- --tw-hue-rotate: ;
403
- --tw-invert: ;
404
- --tw-saturate: ;
405
- --tw-sepia: ;
406
- --tw-drop-shadow: ;
407
- --tw-backdrop-blur: ;
408
- --tw-backdrop-brightness: ;
409
- --tw-backdrop-contrast: ;
410
- --tw-backdrop-grayscale: ;
411
- --tw-backdrop-hue-rotate: ;
412
- --tw-backdrop-invert: ;
413
- --tw-backdrop-opacity: ;
414
- --tw-backdrop-saturate: ;
415
- --tw-backdrop-sepia: ;
416
- }
417
-
418
- ::-webkit-backdrop {
419
- --tw-border-spacing-x: 0;
420
- --tw-border-spacing-y: 0;
421
- --tw-translate-x: 0;
422
- --tw-translate-y: 0;
423
- --tw-rotate: 0;
424
- --tw-skew-x: 0;
425
- --tw-skew-y: 0;
426
- --tw-scale-x: 1;
427
- --tw-scale-y: 1;
428
- --tw-pan-x: ;
429
- --tw-pan-y: ;
430
- --tw-pinch-zoom: ;
431
- --tw-scroll-snap-strictness: proximity;
432
- --tw-ordinal: ;
433
- --tw-slashed-zero: ;
434
- --tw-numeric-figure: ;
435
- --tw-numeric-spacing: ;
436
- --tw-numeric-fraction: ;
437
- --tw-ring-inset: ;
438
- --tw-ring-offset-width: 0px;
439
- --tw-ring-offset-color: #fff;
440
- --tw-ring-color: rgb(59 130 246 / 0.5);
441
- --tw-ring-offset-shadow: 0 0 #0000;
442
- --tw-ring-shadow: 0 0 #0000;
443
- --tw-shadow: 0 0 #0000;
444
- --tw-shadow-colored: 0 0 #0000;
445
- --tw-blur: ;
446
- --tw-brightness: ;
447
- --tw-contrast: ;
448
- --tw-grayscale: ;
449
- --tw-hue-rotate: ;
450
- --tw-invert: ;
451
- --tw-saturate: ;
452
- --tw-sepia: ;
453
- --tw-drop-shadow: ;
454
- --tw-backdrop-blur: ;
455
- --tw-backdrop-brightness: ;
456
- --tw-backdrop-contrast: ;
457
- --tw-backdrop-grayscale: ;
458
- --tw-backdrop-hue-rotate: ;
459
- --tw-backdrop-invert: ;
460
- --tw-backdrop-opacity: ;
461
- --tw-backdrop-saturate: ;
462
- --tw-backdrop-sepia: ;
463
- }
464
-
465
- ::backdrop {
466
- --tw-border-spacing-x: 0;
467
- --tw-border-spacing-y: 0;
468
- --tw-translate-x: 0;
469
- --tw-translate-y: 0;
470
- --tw-rotate: 0;
471
- --tw-skew-x: 0;
472
- --tw-skew-y: 0;
473
- --tw-scale-x: 1;
474
- --tw-scale-y: 1;
475
- --tw-pan-x: ;
476
- --tw-pan-y: ;
477
- --tw-pinch-zoom: ;
478
- --tw-scroll-snap-strictness: proximity;
479
- --tw-ordinal: ;
480
- --tw-slashed-zero: ;
481
- --tw-numeric-figure: ;
482
- --tw-numeric-spacing: ;
483
- --tw-numeric-fraction: ;
484
- --tw-ring-inset: ;
485
- --tw-ring-offset-width: 0px;
486
- --tw-ring-offset-color: #fff;
487
- --tw-ring-color: rgb(59 130 246 / 0.5);
488
- --tw-ring-offset-shadow: 0 0 #0000;
489
- --tw-ring-shadow: 0 0 #0000;
490
- --tw-shadow: 0 0 #0000;
491
- --tw-shadow-colored: 0 0 #0000;
492
- --tw-blur: ;
493
- --tw-brightness: ;
494
- --tw-contrast: ;
495
- --tw-grayscale: ;
496
- --tw-hue-rotate: ;
497
- --tw-invert: ;
498
- --tw-saturate: ;
499
- --tw-sepia: ;
500
- --tw-drop-shadow: ;
501
- --tw-backdrop-blur: ;
502
- --tw-backdrop-brightness: ;
503
- --tw-backdrop-contrast: ;
504
- --tw-backdrop-grayscale: ;
505
- --tw-backdrop-hue-rotate: ;
506
- --tw-backdrop-invert: ;
507
- --tw-backdrop-opacity: ;
508
- --tw-backdrop-saturate: ;
509
- --tw-backdrop-sepia: ;
510
- }
511
- .relative {
512
- position: relative;
513
- }
514
- .mx-2 {
515
- margin-left: 0.5rem;
516
- margin-right: 0.5rem;
517
- }
518
- .block {
519
- display: block;
520
- }
521
- .table {
522
- display: table;
523
- }
524
- .hidden {
525
- display: none;
526
- }
527
- .w-full {
528
- width: 100%;
529
- }
530
- .flex-1 {
531
- flex: 1 1 0%;
532
- }
533
- .overflow-auto {
534
- overflow: auto;
535
- }
536
- .p-2 {
537
- padding: 0.5rem;
538
- }
539
- .p-4 {
540
- padding: 1rem;
541
- }
542
- .px-6 {
543
- padding-left: 1.5rem;
544
- padding-right: 1.5rem;
545
- }
546
- .py-6 {
547
- padding-top: 1.5rem;
548
- padding-bottom: 1.5rem;
549
- }
550
- .font-bold {
551
- font-weight: 700;
552
- }
553
- .text-black {
554
- --tw-text-opacity: 1;
555
- color: rgb(0 0 0 / var(--tw-text-opacity));
556
- }
557
- .filter {
558
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
559
- }
560
-
561
- /* Buttons */
562
- .khb_btn {
563
- margin: 0.25rem;
564
- border-radius: 0.5rem;
565
- text-align: center;
566
- font-weight: 500;
567
- }
568
- .khb_btn:focus {
569
- outline: 2px solid transparent;
570
- outline-offset: 2px;
571
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
572
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
573
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
574
- }
575
- .khb_btn:disabled {
576
- cursor: not-allowed;
577
- }
578
- .khb_btn-primary {
579
- --tw-bg-opacity: 1;
580
- background-color: rgb(29 78 216 / var(--tw-bg-opacity));
581
- --tw-text-opacity: 1;
582
- color: rgb(255 255 255 / var(--tw-text-opacity));
583
- }
584
- .khb_btn-primary:hover {
585
- --tw-bg-opacity: 1;
586
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
587
- }
588
- .khb_btn-primary:focus {
589
- --tw-ring-opacity: 1;
590
- --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
591
- }
592
- @media (prefers-color-scheme: dark) {
593
-
594
- .khb_btn-primary {
595
- --tw-bg-opacity: 1;
596
- background-color: rgb(37 99 235 / var(--tw-bg-opacity));
597
- }
598
-
599
- .khb_btn-primary:hover {
600
- --tw-bg-opacity: 1;
601
- background-color: rgb(29 78 216 / var(--tw-bg-opacity));
602
- }
603
-
604
- .khb_btn-primary:focus {
605
- --tw-ring-opacity: 1;
606
- --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
607
- }
608
- }
609
- .khb_btn-primary:disabled {
610
- --tw-bg-opacity: 1;
611
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
612
- }
613
- .khb_btn-secondary:disabled {
614
- --tw-bg-opacity: 1;
615
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
616
- }
617
- .khb_btn-secondary {
618
- border-width: 1px;
619
- --tw-border-opacity: 1;
620
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
621
- --tw-bg-opacity: 1;
622
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
623
- --tw-text-opacity: 1;
624
- color: rgb(17 24 39 / var(--tw-text-opacity));
625
- }
626
- .khb_btn-secondary:hover {
627
- --tw-bg-opacity: 1;
628
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
629
- }
630
- .khb_btn-secondary:focus {
631
- --tw-ring-opacity: 1;
632
- --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
633
- }
634
- .khb_btn-success {
635
- --tw-bg-opacity: 1;
636
- background-color: rgb(21 128 61 / var(--tw-bg-opacity));
637
- --tw-text-opacity: 1;
638
- color: rgb(255 255 255 / var(--tw-text-opacity));
639
- }
640
- .khb_btn-success:hover {
641
- --tw-bg-opacity: 1;
642
- background-color: rgb(22 101 52 / var(--tw-bg-opacity));
643
- }
644
- .khb_btn-success:focus {
645
- --tw-ring-opacity: 1;
646
- --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
647
- }
648
- @media (prefers-color-scheme: dark) {
649
-
650
- .khb_btn-success {
651
- --tw-bg-opacity: 1;
652
- background-color: rgb(22 163 74 / var(--tw-bg-opacity));
653
- }
654
-
655
- .khb_btn-success:hover {
656
- --tw-bg-opacity: 1;
657
- background-color: rgb(21 128 61 / var(--tw-bg-opacity));
658
- }
659
-
660
- .khb_btn-success:focus {
661
- --tw-ring-opacity: 1;
662
- --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
663
- }
664
- }
665
- .khb_btn-danger {
666
- --tw-bg-opacity: 1;
667
- background-color: rgb(185 28 28 / var(--tw-bg-opacity));
668
- --tw-text-opacity: 1;
669
- color: rgb(255 255 255 / var(--tw-text-opacity));
670
- }
671
- .khb_btn-danger:hover {
672
- --tw-bg-opacity: 1;
673
- background-color: rgb(153 27 27 / var(--tw-bg-opacity));
674
- }
675
- .khb_btn-danger:focus {
676
- --tw-ring-opacity: 1;
677
- --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
678
- }
679
- @media (prefers-color-scheme: dark) {
680
-
681
- .khb_btn-danger {
682
- --tw-bg-opacity: 1;
683
- background-color: rgb(220 38 38 / var(--tw-bg-opacity));
684
- }
685
-
686
- .khb_btn-danger:hover {
687
- --tw-bg-opacity: 1;
688
- background-color: rgb(185 28 28 / var(--tw-bg-opacity));
689
- }
690
-
691
- .khb_btn-danger:focus {
692
- --tw-ring-opacity: 1;
693
- --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
694
- }
695
- }
696
-
697
- .khb_btn-xs {
698
- padding-left: 0.375rem;
699
- padding-right: 0.375rem;
700
- padding-top: 0.25rem;
701
- padding-bottom: 0.25rem;
702
- font-size: 0.75rem;
703
- line-height: 1rem;
704
- }
705
- .khb_btn-sm {
706
- padding-left: 0.75rem;
707
- padding-right: 0.75rem;
708
- padding-top: 0.5rem;
709
- padding-bottom: 0.5rem;
710
- font-size: 0.875rem;
711
- line-height: 1.25rem;
712
- }
713
- .khb_btn-base {
714
- padding-left: 1rem;
715
- padding-right: 1rem;
716
- padding-top: 0.625rem;
717
- padding-bottom: 0.625rem;
718
- font-size: 0.875rem;
719
- line-height: 1.25rem;
720
- }
721
- .khb_btn-lg {
722
- padding-left: 1.25rem;
723
- padding-right: 1.25rem;
724
- padding-top: 0.75rem;
725
- padding-bottom: 0.75rem;
726
- font-size: 1.125rem;
727
- line-height: 1.75rem;
728
- }
729
- /* \ End of Buttons */
730
-
731
- /* Table */
732
- .khb_table-container {
733
- overflow: hidden;
734
- border-radius: 0.5rem;
735
- border-width: 1px;
736
- --tw-border-opacity: 1;
737
- border-color: rgb(229 231 235 / var(--tw-border-opacity));
738
- --tw-bg-opacity: 1;
739
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
740
- }
741
- .khb_table-height {
742
- justify-content: center;
743
- overflow: auto;
744
- height: calc(100vh - 252px);
745
- }
746
- .khb_table-wrapper {
747
- position: relative;
748
- overflow-x: auto;
749
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
750
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
751
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
752
- }
753
- @media (min-width: 640px) {
754
-
755
- .khb_table-wrapper {
756
- border-radius: 0.5rem;
757
- }
758
- }
759
- .khb_table {
760
- width: 100%;
761
- text-align: left;
762
- font-size: 0.875rem;
763
- line-height: 1.25rem;
764
- --tw-text-opacity: 1;
765
- color: rgb(107 114 128 / var(--tw-text-opacity));
766
- }
767
- @media (prefers-color-scheme: dark) {
768
-
769
- .khb_table {
770
- --tw-text-opacity: 1;
771
- color: rgb(156 163 175 / var(--tw-text-opacity));
772
- }
773
- }
774
- .khb_table-thead {
775
- --tw-bg-opacity: 1;
776
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
777
- font-size: 0.75rem;
778
- line-height: 1rem;
779
- text-transform: uppercase;
780
- --tw-text-opacity: 1;
781
- color: rgb(55 65 81 / var(--tw-text-opacity));
782
- }
783
- @media (prefers-color-scheme: dark) {
784
-
785
- .khb_table-thead {
786
- --tw-bg-opacity: 1;
787
- background-color: rgb(55 65 81 / var(--tw-bg-opacity));
788
- --tw-text-opacity: 1;
789
- color: rgb(156 163 175 / var(--tw-text-opacity));
790
- }
791
- }
792
- .khb_table-heading {
793
- padding-top: 0.75rem;
794
- padding-bottom: 0.75rem;
795
- padding-left: 1.5rem;
796
- padding-right: 1.5rem;
797
- }
798
- .khb_table-row {
799
- border-bottom-width: 1px;
800
- --tw-bg-opacity: 1;
801
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
802
- }
803
- .khb_table-row:hover {
804
- --tw-bg-opacity: 1;
805
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
806
- }
807
- @media (prefers-color-scheme: dark) {
808
-
809
- .khb_table-row {
810
- --tw-border-opacity: 1;
811
- border-color: rgb(55 65 81 / var(--tw-border-opacity));
812
- --tw-bg-opacity: 1;
813
- background-color: rgb(31 41 55 / var(--tw-bg-opacity));
814
- }
815
-
816
- .khb_table-row:hover {
817
- --tw-bg-opacity: 1;
818
- background-color: rgb(75 85 99 / var(--tw-bg-opacity));
819
- }
820
- }
821
- .khb_table-row-heading {
822
- white-space: nowrap;
823
- padding-top: 1rem;
824
- padding-bottom: 1rem;
825
- padding-left: 1.5rem;
826
- padding-right: 1.5rem;
827
- font-weight: 500;
828
- --tw-text-opacity: 1;
829
- color: rgb(17 24 39 / var(--tw-text-opacity));
830
- }
831
- @media (prefers-color-scheme: dark) {
832
-
833
- .khb_table-row-heading {
834
- --tw-text-opacity: 1;
835
- color: rgb(255 255 255 / var(--tw-text-opacity));
836
- }
837
- }
838
- .khb_table-row-data {
839
- padding-top: 0.75rem;
840
- padding-bottom: 0.75rem;
841
- padding-left: 1.25rem;
842
- padding-right: 1.25rem;
843
- }
844
- .khb_table-row-actions {
845
- padding: 0.125rem;
846
- }
847
- /* \ End of Table */
848
-
849
- /* Pagination */
850
- .khb_pagination {
851
- display: flex;
852
- align-items: center;
853
- justify-content: space-between;
854
- padding-top: 0.5rem;
855
- padding-bottom: 0.5rem;
856
- padding-left: 1.25rem;
857
- padding-right: 1.25rem;
858
- }
859
- .khb_pagination-total {
860
- font-size: 0.875rem;
861
- line-height: 1.25rem;
862
- font-weight: 400;
863
- --tw-text-opacity: 1;
864
- color: rgb(107 114 128 / var(--tw-text-opacity));
865
- }
866
- @media (prefers-color-scheme: dark) {
867
-
868
- .khb_pagination-total {
869
- --tw-text-opacity: 1;
870
- color: rgb(156 163 175 / var(--tw-text-opacity));
871
- }
872
- }
873
- .khb_pagination-total-showing {
874
- font-weight: 600;
875
- --tw-text-opacity: 1;
876
- color: rgb(17 24 39 / var(--tw-text-opacity));
877
- }
878
- @media (prefers-color-scheme: dark) {
879
-
880
- .khb_pagination-total-showing {
881
- --tw-text-opacity: 1;
882
- color: rgb(255 255 255 / var(--tw-text-opacity));
883
- }
884
- }
885
- .khb_pagination-total-items {
886
- font-weight: 600;
887
- --tw-text-opacity: 1;
888
- color: rgb(17 24 39 / var(--tw-text-opacity));
889
- }
890
- @media (prefers-color-scheme: dark) {
891
-
892
- .khb_pagination-total-items {
893
- --tw-text-opacity: 1;
894
- color: rgb(255 255 255 / var(--tw-text-opacity));
895
- }
896
- }
897
- .khb_pagination-actions {
898
- display: inline-flex;
899
- align-items: center;
900
- }
901
- .khb_pagination-actions > :not([hidden]) ~ :not([hidden]) {
902
- --tw-space-x-reverse: 0;
903
- margin-right: calc(-1px * var(--tw-space-x-reverse));
904
- margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
905
- }
906
- .khb_pagination-pager {
907
- display: flex;
908
- flex-direction: row;
909
- align-items: center;
910
- padding-left: 0.25rem;
911
- padding-right: 0.25rem;
912
- }
913
- .khb_pagination-pager input {
914
- margin-top: 0.5rem;
915
- margin-bottom: 0.5rem;
916
- width: 4rem;
917
- }
918
- /* \ End of Pagination */
919
-
920
- /* Input */
921
- .khb_input {
922
- width: 100%;
923
- border-radius: 0.5rem;
924
- border-width: 1px;
925
- --tw-border-opacity: 1;
926
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
927
- --tw-bg-opacity: 1;
928
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
929
- --tw-text-opacity: 1;
930
- color: rgb(17 24 39 / var(--tw-text-opacity));
931
- outline: 2px solid transparent;
932
- outline-offset: 2px;
933
- }
934
- .khb_input:focus {
935
- --tw-border-opacity: 1;
936
- border-color: rgb(59 130 246 / var(--tw-border-opacity));
937
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
938
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
939
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
940
- --tw-ring-opacity: 1;
941
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
942
- }
943
- .khb_input:disabled {
944
- cursor: not-allowed;
945
- --tw-border-opacity: 1;
946
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
947
- --tw-bg-opacity: 1;
948
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
949
- --tw-text-opacity: 1;
950
- color: rgb(107 114 128 / var(--tw-text-opacity));
951
- }
952
- .khb_input-error {
953
- font-size: 0.875rem;
954
- line-height: 1.25rem;
955
- --tw-text-opacity: 1;
956
- color: rgb(220 38 38 / var(--tw-text-opacity));
957
- }
958
- @media (prefers-color-scheme: dark) {
959
-
960
- .khb_input-error {
961
- --tw-text-opacity: 1;
962
- color: rgb(239 68 68 / var(--tw-text-opacity));
963
- }
964
- }
965
- .khb_input-xs {
966
- padding: 0.375rem;
967
- font-size: 0.875rem;
968
- line-height: 1.25rem;
969
- }
970
- .khb_input-sm {
971
- padding: 0.5rem;
972
- font-size: 0.875rem;
973
- line-height: 1.25rem;
974
- }
975
- .khb_input-base {
976
- padding: 0.625rem;
977
- font-size: 1rem;
978
- line-height: 1.5rem;
979
- }
980
- .khb_input-label {
981
- margin-bottom: 0.25rem;
982
- display: block;
983
- font-size: 0.875rem;
984
- line-height: 1.25rem;
985
- font-weight: 500;
986
- --tw-text-opacity: 1;
987
- color: rgb(17 24 39 / var(--tw-text-opacity));
988
- }
989
- @media (prefers-color-scheme: dark) {
990
-
991
- .khb_input-label {
992
- --tw-text-opacity: 1;
993
- color: rgb(209 213 219 / var(--tw-text-opacity));
994
- }
995
- }
996
- .khb_input-label-required {
997
- --tw-text-opacity: 1;
998
- color: rgb(220 38 38 / var(--tw-text-opacity));
999
- }
1000
- /* \ End of Input */
1001
-
1002
- /* Drawer */
1003
- .khb_drawer-wrapper-1 {
1004
- position: fixed;
1005
- top: 0px;
1006
- right: 0px;
1007
- bottom: 0px;
1008
- left: 0px;
1009
- overflow: hidden;
1010
- }
1011
- .khb_drawer-wrapper-2 {
1012
- position: absolute;
1013
- top: 0px;
1014
- right: 0px;
1015
- bottom: 0px;
1016
- left: 0px;
1017
- overflow: hidden;
1018
- }
1019
- .khb_drawer-backdrop {
1020
- position: absolute;
1021
- top: 0px;
1022
- right: 0px;
1023
- bottom: 0px;
1024
- left: 0px;
1025
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1026
- --tw-bg-opacity: 0.75;
1027
- --tw-backdrop-blur: blur(4px);
1028
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1029
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1030
- transition-property: opacity;
1031
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1032
- transition-duration: 150ms;
1033
- }
1034
- .khb_drawer-container-1 {
1035
- position: fixed;
1036
- top: 0px;
1037
- bottom: 0px;
1038
- right: 0px;
1039
- display: flex;
1040
- max-width: 100%;
1041
- padding-left: 2.5rem;
1042
- }
1043
- .khb_drawer-container-2 {
1044
- position: relative;
1045
- width: 100vw;
1046
- max-width: 48rem;
1047
- }
1048
- .khb_drawer-close-section {
1049
- position: absolute;
1050
- top: 0px;
1051
- left: 0px;
1052
- margin-left: -2rem;
1053
- display: flex;
1054
- padding-top: 1rem;
1055
- padding-right: 0.5rem;
1056
- }
1057
- @media (min-width: 640px) {
1058
-
1059
- .khb_drawer-close-section {
1060
- margin-left: -2.5rem;
1061
- padding-right: 1rem;
1062
- }
1063
- }
1064
- .khb_drawer-close-btn {
1065
- display: flex;
1066
- height: 2rem;
1067
- width: 2rem;
1068
- align-items: center;
1069
- justify-content: center;
1070
- border-radius: 9999px;
1071
- --tw-bg-opacity: 1;
1072
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1073
- transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1074
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1075
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1076
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1077
- transition-duration: 150ms;
1078
- }
1079
- .khb_drawer-close-btn:hover {
1080
- --tw-rotate: 90deg;
1081
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1082
- }
1083
- .khb_drawer-close-btn:focus {
1084
- outline: 2px solid transparent;
1085
- outline-offset: 2px;
1086
- }
1087
- .khb_sr-only {
1088
- position: absolute;
1089
- width: 1px;
1090
- height: 1px;
1091
- padding: 0;
1092
- margin: -1px;
1093
- overflow: hidden;
1094
- clip: rect(0, 0, 0, 0);
1095
- white-space: nowrap;
1096
- border-width: 0;
1097
- }
1098
- .khb_drawer-main {
1099
- display: flex;
1100
- height: 100%;
1101
- flex-direction: column;
1102
- overflow-y: scroll;
1103
- --tw-bg-opacity: 1;
1104
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1105
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1106
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1107
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1108
- }
1109
- .khb_drawer-header {
1110
- border-bottom-width: 1px;
1111
- --tw-border-opacity: 1;
1112
- border-color: rgb(148 163 184 / var(--tw-border-opacity));
1113
- --tw-bg-opacity: 1;
1114
- background-color: rgb(203 213 225 / var(--tw-bg-opacity));
1115
- padding-left: 1rem;
1116
- padding-right: 1rem;
1117
- padding-top: 1.5rem;
1118
- padding-bottom: 1.5rem;
1119
- }
1120
- @media (min-width: 640px) {
1121
-
1122
- .khb_drawer-header {
1123
- padding-left: 1.5rem;
1124
- padding-right: 1.5rem;
1125
- }
1126
- }
1127
- .khb_drawer-header-title {
1128
- font-size: 1.25rem;
1129
- line-height: 1.75rem;
1130
- font-weight: 500;
1131
- }
1132
- .khb_darwer-content {
1133
- position: relative;
1134
- flex: 1 1 0%;
1135
- overflow: auto;
1136
- padding-left: 1.5rem;
1137
- padding-right: 1.5rem;
1138
- padding-top: 1.5rem;
1139
- padding-bottom: 1.5rem;
1140
- }
1141
- .khb_drawer-footer {
1142
- display: flex;
1143
- align-items: center;
1144
- justify-content: flex-end;
1145
- border-top-width: 1px;
1146
- --tw-border-opacity: 1;
1147
- border-color: rgb(148 163 184 / var(--tw-border-opacity));
1148
- --tw-bg-opacity: 1;
1149
- background-color: rgb(248 250 252 / var(--tw-bg-opacity));
1150
- padding-left: 1rem;
1151
- padding-right: 1rem;
1152
- padding-top: 1rem;
1153
- padding-bottom: 1rem;
1154
- }
1155
- /* \ End of Drawer */
1156
-
1157
- /* Utility */
1158
- .khb_sr-only {
1159
- position: absolute;
1160
- width: 1px;
1161
- height: 1px;
1162
- padding: 0;
1163
- margin: -1px;
1164
- overflow: hidden;
1165
- clip: rect(0, 0, 0, 0);
1166
- white-space: nowrap;
1167
- border-width: 0;
1168
- }
1169
- .khb_grid-item-1of3 {
1170
- display: inline-block;
1171
- width: 33.333333%;
1172
- }
1173
- .khb_grid-item-1of2 {
1174
- display: inline-block;
1175
- width: 50%;
1176
- }
1177
- .khb_padding-right-1 {
1178
- padding-right: 0.25rem;
1179
- }
1180
- .khb_padding-left-1 {
1181
- padding-left: 0.25rem;
1182
- }
1183
- .khb_align-top {
1184
- vertical-align: top;
1185
- }
1186
- .khb_margin-top-0 {
1187
- margin-top: 0px !important;
1188
- }
1189
- /* \ End of Utility */
1190
-
1191
- /* Animations */
1192
- .khb_drawer-enter {
1193
- opacity: 0.1;
1194
- }
1195
- .khb_drawer-enter.khb_drawer-enter-active {
1196
- opacity: 1;
1197
- transition: opacity 200ms ease-in;
1198
- }
1199
- .khb_drawer-exit {
1200
- opacity: 1;
1201
- }
1202
- .khb_drawer-exit.khb_drawer-exit-active {
1203
- opacity: 0.01;
1204
- transition: opacity 200ms ease-in;
1205
- }
1206
- /* \ End of Animations */
1207
-
1208
- /* Form */
1209
- .khb_form {
1210
- display: grid;
1211
- grid-template-columns: repeat(1, minmax(0, 1fr));
1212
- grid-template-rows: repeat(1, minmax(0, 1fr));
1213
- row-gap: 0.75rem;
1214
- }
1215
- /* \ End of Form */
1216
-
1217
- /* Accordian */
1218
- .khb_accordian-header {
1219
- display: flex;
1220
- width: 100%;
1221
- align-items: center;
1222
- justify-content: space-between;
1223
- border-width: 2px;
1224
- --tw-border-opacity: 1;
1225
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1226
- --tw-bg-opacity: 1;
1227
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1228
- padding: 1rem;
1229
- font-weight: 500;
1230
- }
1231
- .khb_accordian-header:hover {
1232
- --tw-bg-opacity: 1;
1233
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1234
- }
1235
- .khb_accordian-body {
1236
- border-width: 2px;
1237
- border-top-width: 0px;
1238
- --tw-border-opacity: 1;
1239
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1240
- }
1241
- .khb_accordian-content {
1242
- padding: 0.625rem;
1243
- }
1244
- .khb_accordian-footer {
1245
- display: flex;
1246
- flex-direction: row;
1247
- justify-content: flex-end;
1248
- }
1249
- .khb_accordian-footer > :not([hidden]) ~ :not([hidden]) {
1250
- --tw-space-x-reverse: 0;
1251
- margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1252
- margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
1253
- }
1254
- .khb_accordian-footer {
1255
- border-top-width: 2px;
1256
- --tw-border-opacity: 1;
1257
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1258
- --tw-bg-opacity: 1;
1259
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1260
- padding: 0.25rem;
1261
- }
1262
- .khb_tile-items > :not([hidden]) ~ :not([hidden]) {
1263
- --tw-space-y-reverse: 0;
1264
- margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1265
- margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1266
- }
1267
- .khb-form-items > :not([hidden]) ~ :not([hidden]) {
1268
- --tw-space-y-reverse: 0;
1269
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1270
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1271
- }
1272
- /* \ End of Accordian */
1273
-
1274
- /* Modal */
1275
- .khb_modal-wrapper-1 {
1276
- position: fixed;
1277
- top: 0px;
1278
- right: 0px;
1279
- bottom: 0px;
1280
- left: 0px;
1281
- z-index: 20;
1282
- overflow-y: auto;
1283
- }
1284
- .khb_modal-wrapper-2 {
1285
- position: relative;
1286
- display: flex;
1287
- min-height: 100vh;
1288
- align-items: flex-end;
1289
- justify-content: center;
1290
- padding-left: 1rem;
1291
- padding-right: 1rem;
1292
- padding-top: 1rem;
1293
- padding-bottom: 5rem;
1294
- text-align: center;
1295
- }
1296
- @media (min-width: 640px) {
1297
-
1298
- .khb_modal-wrapper-2 {
1299
- display: block;
1300
- padding: 0px;
1301
- }
1302
- }
1303
- .khb_modal-backdrop {
1304
- position: absolute;
1305
- top: 0px;
1306
- right: 0px;
1307
- bottom: 0px;
1308
- left: 0px;
1309
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1310
- --tw-bg-opacity: 0.75;
1311
- --tw-backdrop-blur: blur(4px);
1312
- -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1313
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1314
- transition-property: opacity;
1315
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1316
- transition-duration: 150ms;
1317
- }
1318
- .khb_modal-container-1 {
1319
- display: flex;
1320
- min-height: 100vh;
1321
- align-items: center;
1322
- justify-content: center;
1323
- opacity: 1;
1324
- }
1325
- .khb_modal-container-2 {
1326
- display: inline-block;
1327
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1328
- overflow: hidden;
1329
- border-radius: 0.5rem;
1330
- text-align: left;
1331
- vertical-align: bottom;
1332
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1333
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1334
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1335
- transition-property: all;
1336
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1337
- transition-duration: 150ms;
1338
- }
1339
- @media (min-width: 640px) {
1340
-
1341
- .khb_modal-container-2 {
1342
- margin-top: 2rem;
1343
- margin-bottom: 2rem;
1344
- width: 100%;
1345
- max-width: 36rem;
1346
- vertical-align: middle;
1347
- }
1348
- }
1349
- .khb_modal-main {
1350
- --tw-bg-opacity: 1;
1351
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1352
- }
1353
- .khb_modal-header {
1354
- position: relative;
1355
- border-bottom-width: 1px;
1356
- --tw-border-opacity: 1;
1357
- border-color: rgb(229 231 235 / var(--tw-border-opacity));
1358
- padding: 1rem;
1359
- padding-bottom: 1rem;
1360
- }
1361
- .khb_modal-title {
1362
- font-size: 0.875rem;
1363
- line-height: 1.25rem;
1364
- font-weight: 600;
1365
- }
1366
- .khb_modal-close {
1367
- position: absolute;
1368
- right: 1.25rem;
1369
- top: 1.25rem;
1370
- }
1371
- .khb_modal-close:focus {
1372
- outline: 2px solid transparent;
1373
- outline-offset: 2px;
1374
- }
1375
- .khb_modal-content {
1376
- padding: 1rem;
1377
- }
1378
- /* \ End of Modal */
1379
-
1380
- /* Delete Modal */
1381
- .khb_delete-header {
1382
- display: flex;
1383
- align-items: center;
1384
- gap: 0.75rem;
1385
- border-radius: 0.5rem;
1386
- --tw-bg-opacity: 1;
1387
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
1388
- padding-top: 0.5rem;
1389
- padding-bottom: 0.5rem;
1390
- padding-left: 1rem;
1391
- padding-right: 1rem;
1392
- font-size: 0.875rem;
1393
- line-height: 1.25rem;
1394
- --tw-text-opacity: 1;
1395
- color: rgb(0 0 0 / var(--tw-text-opacity));
1396
- }
1397
- .khb_delete-content {
1398
- margin-top: 0.75rem;
1399
- font-size: 0.875rem;
1400
- line-height: 1.25rem;
1401
- --tw-text-opacity: 1;
1402
- color: rgb(0 0 0 / var(--tw-text-opacity));
1403
- }
1404
- .khb_delete-note {
1405
- margin-top: 0.75rem;
1406
- }
1407
- .khb_delete-actions {
1408
- margin-top: 0.75rem;
1409
- display: flex;
1410
- flex-direction: row;
1411
- gap: 0.75rem;
1412
- }
1413
- .khb_delete-input {
1414
- width: 100%;
1415
- flex-grow: 1;
1416
- }
1417
- .khb_delete-buttons {
1418
- grid-column: span 3 / span 3;
1419
- }
1420
- /* \ End of Delete Modal */
1421
-
1422
- /* Image Upload */
1423
- .khb_img-upload-wrapper-1 {
1424
- margin-top: 0.25rem;
1425
- display: flex;
1426
- justify-content: center;
1427
- border-radius: 0.375rem;
1428
- border-width: 2px;
1429
- border-style: dashed;
1430
- --tw-border-opacity: 1;
1431
- border-color: rgb(148 163 184 / var(--tw-border-opacity));
1432
- padding-left: 1.5rem;
1433
- padding-right: 1.5rem;
1434
- padding-top: 1.25rem;
1435
- padding-bottom: 1.5rem;
1436
- }
1437
- .khb_img-upload-wrapper-2 > :not([hidden]) ~ :not([hidden]) {
1438
- --tw-space-y-reverse: 0;
1439
- margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1440
- margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1441
- }
1442
- .khb_img-upload-wrapper-2 {
1443
- text-align: center;
1444
- }
1445
- .khb_img-wrapper {
1446
- position: relative;
1447
- display: inline-flex;
1448
- }
1449
- .khb_img-wrapper-img {
1450
- height: 6rem;
1451
- width: 6rem;
1452
- -o-object-fit: cover;
1453
- object-fit: cover;
1454
- }
1455
- .khb_img-wrapper-del {
1456
- position: absolute;
1457
- top: -0.5rem;
1458
- right: -0.5rem;
1459
- display: flex;
1460
- height: 1.25rem;
1461
- width: 1.25rem;
1462
- cursor: pointer;
1463
- align-items: center;
1464
- justify-content: center;
1465
- border-radius: 9999px;
1466
- --tw-bg-opacity: 1;
1467
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
1468
- }
1469
- .khb_img-text-wrapper {
1470
- display: flex;
1471
- font-size: 0.875rem;
1472
- line-height: 1.25rem;
1473
- --tw-text-opacity: 1;
1474
- color: rgb(75 85 99 / var(--tw-text-opacity));
1475
- }
1476
- .khb_img-text-label {
1477
- position: relative;
1478
- cursor: pointer;
1479
- border-radius: 0.375rem;
1480
- font-weight: 500;
1481
- }
1482
- .khb_img-text-label:focus-within {
1483
- outline: 2px solid transparent;
1484
- outline-offset: 2px;
1485
- }
1486
- .khb_img-text-1 {
1487
- padding-left: 0.25rem;
1488
- --tw-text-opacity: 1;
1489
- color: rgb(107 114 128 / var(--tw-text-opacity));
1490
- }
1491
- .khb_img-text-2 {
1492
- font-size: 0.75rem;
1493
- line-height: 1rem;
1494
- --tw-text-opacity: 1;
1495
- color: rgb(107 114 128 / var(--tw-text-opacity));
1496
- }
1497
- .khb_img-upload-wrapper-3 {
1498
- margin-top: 1.5rem;
1499
- cursor: pointer;
1500
- border-radius: 0.5rem;
1501
- border-width: 1px;
1502
- --tw-border-opacity: 1;
1503
- border-color: rgb(255 255 255 / var(--tw-border-opacity));
1504
- padding: 0.75rem;
1505
- }
1506
- /* \End of Image Upload */
1507
-
1508
- /* Switch */
1509
- .khb_switch {
1510
- position: relative;
1511
- display: inline-block;
1512
- width: 60px;
1513
- height: 30px;
1514
- }
1515
- .khb_switch input {
1516
- opacity: 0;
1517
- width: 0;
1518
- height: 0;
1519
- }
1520
- .khb_switch .slider {
1521
- position: absolute;
1522
- cursor: pointer;
1523
- top: 0;
1524
- left: 0;
1525
- right: 0;
1526
- bottom: 0;
1527
- background-color: #888;
1528
- transition: all 0.4s ease-in;
1529
- }
1530
- .khb_switch .slider:before {
1531
- position: absolute;
1532
- content: "";
1533
- height: 22px;
1534
- width: 22px;
1535
- left: 5px;
1536
- bottom: 4px;
1537
- background-color: #fff;
1538
- transition: all 0.2s ease-in;
1539
- box-shadow: 0px 0px 6px #00000029;
1540
- /* background-image: url(../public/images/close.png); */
1541
- /* background-repeat: no-repeat; */
1542
- /* background-position: center; */
1543
- }
1544
- /* Switch Rounded sliders */
1545
- .khb_switch .slider.round {
1546
- border-radius: 34px;
1547
- }
1548
- .khb_switch .slider.round:before {
1549
- border-radius: 50%;
1550
- }
1551
- input:checked + .slider {
1552
- background-color: #16a34a;
1553
- }
1554
- input:focus + .slider {
1555
- box-shadow: 0 0 1px #16a34a;
1556
- }
1557
- input:checked + .slider:before {
1558
- transform: translateX(28px);
1559
- /* background-image: url(../public/images/tick.png);
1560
- background-repeat: no-repeat;
1561
- background-position: center; */
1562
- }
1563
- /* \ End of Switch */
1564
-
1565
- .khb_DND-items > :not([hidden]) ~ :not([hidden]) {
1566
- --tw-space-y-reverse: 0;
1567
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1568
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1569
- }
1570
- .khb_DND-item-text {
1571
- overflow: hidden;
1572
- text-overflow: ellipsis;
1573
- white-space: nowrap;
1574
- font-size: 1rem;
1575
- font-weight: 500;
1576
- line-height: 1.5rem;
1577
- --tw-text-opacity: 1;
1578
- color: rgb(0 0 0 / var(--tw-text-opacity));
1579
- }
1580
- .khb_DND-item {
1581
- cursor: pointer;
1582
- overflow: hidden;
1583
- border-radius: 0.375rem;
1584
- border-width: 1px;
1585
- --tw-border-opacity: 1;
1586
- border-color: rgb(100 116 139 / var(--tw-border-opacity));
1587
- --tw-bg-opacity: 1;
1588
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1589
- padding: 0.75rem;
1590
- transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
1591
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1592
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
1593
- transition-duration: 200ms;
1594
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1595
- }
1596
- .khb_DND-item:hover {
1597
- --tw-border-opacity: 1;
1598
- border-color: rgb(96 165 250 / var(--tw-border-opacity));
1599
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1600
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1601
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1602
- }