@knovator/pagecreator-admin 1.2.2 → 1.2.4

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 (166) hide show
  1. package/README.md +205 -205
  2. package/index.d.ts +1 -0
  3. package/package.json +38 -42
  4. package/src/{index.d.ts → index.ts} +1 -0
  5. package/src/lib/api/index.ts +70 -0
  6. package/src/lib/api/list.ts +59 -0
  7. package/src/lib/components/Page/AddButton/AddButton.tsx +16 -0
  8. package/src/lib/components/Page/AddButton/{index.d.ts → index.ts} +1 -0
  9. package/src/lib/components/Page/Form/PageForm.tsx +194 -0
  10. package/src/lib/components/Page/Form/{index.d.ts → index.ts} +1 -0
  11. package/src/lib/components/Page/Page/Page.tsx +151 -0
  12. package/src/lib/components/Page/Page/{index.d.ts → index.ts} +1 -0
  13. package/src/lib/components/Page/PageFormActions/PageFormActions.tsx +50 -0
  14. package/src/lib/components/Page/PageFormActions/{index.d.ts → index.ts} +1 -0
  15. package/src/lib/components/Page/PageFormWrapper/PageFormWrapper.tsx +16 -0
  16. package/src/lib/components/Page/PageFormWrapper/{index.d.ts → index.ts} +1 -0
  17. package/src/lib/components/Page/Pagination/PagePagination.tsx +26 -0
  18. package/src/lib/components/Page/Pagination/{index.d.ts → index.ts} +1 -0
  19. package/src/lib/components/Page/Search/PageSearch.tsx +32 -0
  20. package/src/lib/components/Page/Search/{index.d.ts → index.tsx} +1 -0
  21. package/src/lib/components/Page/Table/PageTable.tsx +36 -0
  22. package/src/lib/components/Page/Table/{index.d.ts → index.ts} +1 -0
  23. package/src/lib/components/Page/{index.d.ts → index.ts} +1 -0
  24. package/src/lib/components/Widget/AddButton/AddButton.tsx +16 -0
  25. package/src/lib/components/Widget/AddButton/{index.d.ts → index.ts} +1 -0
  26. package/src/lib/components/Widget/Form/ItemsAccordian.tsx +354 -0
  27. package/src/lib/components/Widget/Form/Tabs/TabItem.tsx +43 -0
  28. package/src/lib/components/Widget/Form/Tabs/Tabs.tsx +190 -0
  29. package/src/lib/components/Widget/Form/Tabs/{index.d.ts → index.ts} +1 -0
  30. package/src/lib/components/Widget/Form/WidgetForm.tsx +771 -0
  31. package/src/lib/components/Widget/Form/{index.d.ts → index.ts} +1 -0
  32. package/src/lib/components/Widget/Pagination/WidgetPagination.tsx +26 -0
  33. package/src/lib/components/Widget/Pagination/{index.d.ts → index.ts} +1 -0
  34. package/src/lib/components/Widget/Search/WidgetSearch.tsx +32 -0
  35. package/src/lib/components/Widget/Search/{index.d.ts → index.tsx} +1 -0
  36. package/src/lib/components/Widget/Table/WidgetTable.tsx +70 -0
  37. package/src/lib/components/Widget/Table/{index.d.ts → index.ts} +1 -0
  38. package/src/lib/components/Widget/Widget/Widget.tsx +173 -0
  39. package/src/lib/components/Widget/Widget/{index.d.ts → index.ts} +1 -0
  40. package/src/lib/components/Widget/WidgetFormActions/WidgetFormActions.tsx +50 -0
  41. package/src/lib/components/Widget/WidgetFormActions/{index.d.ts → index.ts} +1 -0
  42. package/src/lib/components/Widget/WidgetFormWrapper/WidgetFormWrapper.tsx +16 -0
  43. package/src/lib/components/Widget/WidgetFormWrapper/{index.d.ts → index.ts} +1 -0
  44. package/src/lib/components/Widget/{index.d.ts → index.tsx} +1 -0
  45. package/src/lib/components/common/Accordian/Accordian.tsx +56 -0
  46. package/src/lib/components/common/Accordian/{index.d.ts → index.ts} +1 -0
  47. package/src/lib/components/common/Button/Button.tsx +45 -0
  48. package/src/lib/components/common/Button/{index.d.ts → index.ts} +1 -0
  49. package/src/lib/components/common/ConfirmPopover/ConfirmPopover.tsx +47 -0
  50. package/src/lib/components/common/ConfirmPopover/{index.d.ts → index.ts} +1 -0
  51. package/src/lib/components/common/DNDItemsList/DNDItemsList.tsx +53 -0
  52. package/src/lib/components/common/DNDItemsList/{index.d.ts → index.ts} +1 -0
  53. package/src/lib/components/common/DeleteModal/DeleteModal.tsx +72 -0
  54. package/src/lib/components/common/DeleteModal/index.tsx +3 -0
  55. package/src/lib/components/common/Drawer/Drawer.tsx +79 -0
  56. package/src/lib/components/common/Drawer/{index.d.ts → index.ts} +1 -0
  57. package/src/lib/components/common/Form/Form.tsx +256 -0
  58. package/src/lib/components/common/Form/SimpleForm.tsx +314 -0
  59. package/src/lib/components/common/Form/{index.d.ts → index.ts} +1 -0
  60. package/src/lib/components/common/FormActions/FormActions.tsx +37 -0
  61. package/src/lib/components/common/FormActions/{index.d.ts → index.ts} +1 -0
  62. package/src/lib/components/common/ImageUpload/ImageUpload.tsx +113 -0
  63. package/src/lib/components/common/ImageUpload/index.tsx +3 -0
  64. package/src/lib/components/common/Input/Checkbox.tsx +25 -0
  65. package/src/lib/components/common/Input/Input.tsx +51 -0
  66. package/src/lib/components/common/Input/ReactSelect.tsx +60 -0
  67. package/src/lib/components/common/Input/Select.tsx +47 -0
  68. package/src/lib/components/common/Input/SrcSet.tsx +143 -0
  69. package/src/lib/components/common/Input/index.ts +20 -0
  70. package/src/lib/components/common/Modal/Modal.tsx +57 -0
  71. package/src/lib/components/common/Modal/index.tsx +3 -0
  72. package/src/lib/components/common/Pagination/Pagination.tsx +88 -0
  73. package/src/lib/components/common/Pagination/{index.d.ts → index.ts} +1 -0
  74. package/src/lib/components/common/Table/Table.tsx +133 -0
  75. package/src/lib/components/common/Table/{index.d.ts → index.ts} +1 -0
  76. package/src/lib/components/common/Toggle/Toggle.tsx +23 -0
  77. package/src/lib/components/common/Toggle/{index.d.ts → index.ts} +1 -0
  78. package/src/lib/constants/common.ts +145 -0
  79. package/src/lib/context/PageContext.tsx +100 -0
  80. package/src/lib/context/ProviderContext.tsx +52 -0
  81. package/src/lib/context/WidgetContext.tsx +127 -0
  82. package/src/lib/helper/utils.ts +46 -0
  83. package/src/lib/hooks/usePage.tsx +307 -0
  84. package/src/lib/hooks/usePagination.tsx +41 -0
  85. package/src/lib/hooks/useWidget.tsx +503 -0
  86. package/src/lib/icons/chevronDown.tsx +21 -0
  87. package/src/lib/icons/chevronLeft.tsx +20 -0
  88. package/src/lib/icons/chevronRight.tsx +20 -0
  89. package/src/lib/icons/chevronUp.tsx +21 -0
  90. package/src/lib/icons/close.tsx +21 -0
  91. package/src/lib/icons/pencil.tsx +21 -0
  92. package/src/lib/icons/plus.tsx +23 -0
  93. package/src/lib/icons/trash.tsx +21 -0
  94. package/src/lib/types/api.ts +44 -0
  95. package/src/lib/types/common.ts +31 -0
  96. package/src/lib/types/components.ts +427 -0
  97. package/src/lib/types/context.ts +184 -0
  98. package/src/styles/index.css +469 -0
  99. package/index.cjs +0 -7714
  100. package/index.css +0 -2258
  101. package/index.js +0 -7700
  102. package/src/lib/api/index.d.ts +0 -10
  103. package/src/lib/api/list.d.ts +0 -56
  104. package/src/lib/components/Page/AddButton/AddButton.d.ts +0 -3
  105. package/src/lib/components/Page/Form/PageForm.d.ts +0 -4
  106. package/src/lib/components/Page/Page/Page.d.ts +0 -13
  107. package/src/lib/components/Page/PageFormActions/PageFormActions.d.ts +0 -4
  108. package/src/lib/components/Page/PageFormWrapper/PageFormWrapper.d.ts +0 -4
  109. package/src/lib/components/Page/Pagination/PagePagination.d.ts +0 -3
  110. package/src/lib/components/Page/Search/PageSearch.d.ts +0 -3
  111. package/src/lib/components/Page/Table/PageTable.d.ts +0 -4
  112. package/src/lib/components/Widget/AddButton/AddButton.d.ts +0 -3
  113. package/src/lib/components/Widget/Form/ItemsAccordian.d.ts +0 -4
  114. package/src/lib/components/Widget/Form/Tabs/TabItem.d.ts +0 -4
  115. package/src/lib/components/Widget/Form/Tabs/Tabs.d.ts +0 -4
  116. package/src/lib/components/Widget/Form/WidgetForm.d.ts +0 -4
  117. package/src/lib/components/Widget/Pagination/WidgetPagination.d.ts +0 -3
  118. package/src/lib/components/Widget/Search/WidgetSearch.d.ts +0 -3
  119. package/src/lib/components/Widget/Table/WidgetTable.d.ts +0 -4
  120. package/src/lib/components/Widget/Widget/Widget.d.ts +0 -13
  121. package/src/lib/components/Widget/WidgetFormActions/WidgetFormActions.d.ts +0 -4
  122. package/src/lib/components/Widget/WidgetFormWrapper/WidgetFormWrapper.d.ts +0 -4
  123. package/src/lib/components/common/Accordian/Accordian.d.ts +0 -13
  124. package/src/lib/components/common/Button/Button.d.ts +0 -4
  125. package/src/lib/components/common/ConfirmPopover/ConfirmPopover.d.ts +0 -4
  126. package/src/lib/components/common/DNDItemsList/DNDItemsList.d.ts +0 -4
  127. package/src/lib/components/common/DeleteModal/DeleteModal.d.ts +0 -4
  128. package/src/lib/components/common/DeleteModal/index.d.ts +0 -2
  129. package/src/lib/components/common/Drawer/Drawer.d.ts +0 -9
  130. package/src/lib/components/common/Form/Form.d.ts +0 -15
  131. package/src/lib/components/common/Form/SimpleForm.d.ts +0 -18
  132. package/src/lib/components/common/FormActions/FormActions.d.ts +0 -10
  133. package/src/lib/components/common/ImageUpload/ImageUpload.d.ts +0 -4
  134. package/src/lib/components/common/ImageUpload/index.d.ts +0 -2
  135. package/src/lib/components/common/Input/Checkbox.d.ts +0 -4
  136. package/src/lib/components/common/Input/Input.d.ts +0 -4
  137. package/src/lib/components/common/Input/ReactSelect.d.ts +0 -4
  138. package/src/lib/components/common/Input/Select.d.ts +0 -4
  139. package/src/lib/components/common/Input/SrcSet.d.ts +0 -4
  140. package/src/lib/components/common/Input/index.d.ts +0 -12
  141. package/src/lib/components/common/Modal/Modal.d.ts +0 -8
  142. package/src/lib/components/common/Modal/index.d.ts +0 -2
  143. package/src/lib/components/common/Pagination/Pagination.d.ts +0 -4
  144. package/src/lib/components/common/Table/Table.d.ts +0 -4
  145. package/src/lib/components/common/Toggle/Toggle.d.ts +0 -4
  146. package/src/lib/constants/common.d.ts +0 -122
  147. package/src/lib/context/PageContext.d.ts +0 -7
  148. package/src/lib/context/ProviderContext.d.ts +0 -5
  149. package/src/lib/context/WidgetContext.d.ts +0 -7
  150. package/src/lib/helper/utils.d.ts +0 -10
  151. package/src/lib/hooks/usePage.d.ts +0 -43
  152. package/src/lib/hooks/usePagination.d.ts +0 -15
  153. package/src/lib/hooks/useWidget.d.ts +0 -46
  154. package/src/lib/icons/chevronDown.d.ts +0 -4
  155. package/src/lib/icons/chevronLeft.d.ts +0 -4
  156. package/src/lib/icons/chevronRight.d.ts +0 -4
  157. package/src/lib/icons/chevronUp.d.ts +0 -4
  158. package/src/lib/icons/close.d.ts +0 -4
  159. package/src/lib/icons/pencil.d.ts +0 -4
  160. package/src/lib/icons/plus.d.ts +0 -4
  161. package/src/lib/icons/trash.d.ts +0 -4
  162. package/src/lib/types/api.d.ts +0 -34
  163. package/src/lib/types/common.d.ts +0 -29
  164. package/src/lib/types/components.d.ts +0 -420
  165. package/src/lib/types/context.d.ts +0 -135
  166. /package/src/lib/types/{index.d.ts → index.ts} +0 -0
package/index.css DELETED
@@ -1,2258 +0,0 @@
1
- /*
2
- ! tailwindcss v3.2.4 | 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
- 5. Use the user's configured `sans` font-feature-settings by default.
28
- */
29
-
30
- html {
31
- line-height: 1.5; /* 1 */
32
- -webkit-text-size-adjust: 100%; /* 2 */
33
- -moz-tab-size: 4; /* 3 */
34
- -o-tab-size: 4;
35
- tab-size: 4; /* 3 */
36
- 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 */
37
- font-feature-settings: normal; /* 5 */
38
- }
39
-
40
- /*
41
- 1. Remove the margin in all browsers.
42
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
43
- */
44
-
45
- body {
46
- margin: 0; /* 1 */
47
- line-height: inherit; /* 2 */
48
- }
49
-
50
- /*
51
- 1. Add the correct height in Firefox.
52
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
53
- 3. Ensure horizontal rules are visible by default.
54
- */
55
-
56
- hr {
57
- height: 0; /* 1 */
58
- color: inherit; /* 2 */
59
- border-top-width: 1px; /* 3 */
60
- }
61
-
62
- /*
63
- Add the correct text decoration in Chrome, Edge, and Safari.
64
- */
65
-
66
- abbr:where([title]) {
67
- -webkit-text-decoration: underline dotted;
68
- text-decoration: underline dotted;
69
- }
70
-
71
- /*
72
- Remove the default font size and weight for headings.
73
- */
74
-
75
- h1,
76
- h2,
77
- h3,
78
- h4,
79
- h5,
80
- h6 {
81
- font-size: inherit;
82
- font-weight: inherit;
83
- }
84
-
85
- /*
86
- Reset links to optimize for opt-in styling instead of opt-out.
87
- */
88
-
89
- a {
90
- color: inherit;
91
- text-decoration: inherit;
92
- }
93
-
94
- /*
95
- Add the correct font weight in Edge and Safari.
96
- */
97
-
98
- b,
99
- strong {
100
- font-weight: bolder;
101
- }
102
-
103
- /*
104
- 1. Use the user's configured `mono` font family by default.
105
- 2. Correct the odd `em` font sizing in all browsers.
106
- */
107
-
108
- code,
109
- kbd,
110
- samp,
111
- pre {
112
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
113
- font-size: 1em; /* 2 */
114
- }
115
-
116
- /*
117
- Add the correct font size in all browsers.
118
- */
119
-
120
- small {
121
- font-size: 80%;
122
- }
123
-
124
- /*
125
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
126
- */
127
-
128
- sub,
129
- sup {
130
- font-size: 75%;
131
- line-height: 0;
132
- position: relative;
133
- vertical-align: baseline;
134
- }
135
-
136
- sub {
137
- bottom: -0.25em;
138
- }
139
-
140
- sup {
141
- top: -0.5em;
142
- }
143
-
144
- /*
145
- 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)
146
- 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)
147
- 3. Remove gaps between table borders by default.
148
- */
149
-
150
- table {
151
- text-indent: 0; /* 1 */
152
- border-color: inherit; /* 2 */
153
- border-collapse: collapse; /* 3 */
154
- }
155
-
156
- /*
157
- 1. Change the font styles in all browsers.
158
- 2. Remove the margin in Firefox and Safari.
159
- 3. Remove default padding in all browsers.
160
- */
161
-
162
- button,
163
- input,
164
- optgroup,
165
- select,
166
- textarea {
167
- font-family: inherit; /* 1 */
168
- font-size: 100%; /* 1 */
169
- font-weight: inherit; /* 1 */
170
- line-height: inherit; /* 1 */
171
- color: inherit; /* 1 */
172
- margin: 0; /* 2 */
173
- padding: 0; /* 3 */
174
- }
175
-
176
- /*
177
- Remove the inheritance of text transform in Edge and Firefox.
178
- */
179
-
180
- button,
181
- select {
182
- text-transform: none;
183
- }
184
-
185
- /*
186
- 1. Correct the inability to style clickable types in iOS and Safari.
187
- 2. Remove default button styles.
188
- */
189
-
190
- button,
191
- [type='button'],
192
- [type='reset'],
193
- [type='submit'] {
194
- -webkit-appearance: button; /* 1 */
195
- background-color: transparent; /* 2 */
196
- background-image: none; /* 2 */
197
- }
198
-
199
- /*
200
- Use the modern Firefox focus style for all focusable elements.
201
- */
202
-
203
- :-moz-focusring {
204
- outline: auto;
205
- }
206
-
207
- /*
208
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
209
- */
210
-
211
- :-moz-ui-invalid {
212
- box-shadow: none;
213
- }
214
-
215
- /*
216
- Add the correct vertical alignment in Chrome and Firefox.
217
- */
218
-
219
- progress {
220
- vertical-align: baseline;
221
- }
222
-
223
- /*
224
- Correct the cursor style of increment and decrement buttons in Safari.
225
- */
226
-
227
- ::-webkit-inner-spin-button,
228
- ::-webkit-outer-spin-button {
229
- height: auto;
230
- }
231
-
232
- /*
233
- 1. Correct the odd appearance in Chrome and Safari.
234
- 2. Correct the outline style in Safari.
235
- */
236
-
237
- [type='search'] {
238
- -webkit-appearance: textfield; /* 1 */
239
- outline-offset: -2px; /* 2 */
240
- }
241
-
242
- /*
243
- Remove the inner padding in Chrome and Safari on macOS.
244
- */
245
-
246
- ::-webkit-search-decoration {
247
- -webkit-appearance: none;
248
- }
249
-
250
- /*
251
- 1. Correct the inability to style clickable types in iOS and Safari.
252
- 2. Change font properties to `inherit` in Safari.
253
- */
254
-
255
- ::-webkit-file-upload-button {
256
- -webkit-appearance: button; /* 1 */
257
- font: inherit; /* 2 */
258
- }
259
-
260
- /*
261
- Add the correct display in Chrome and Safari.
262
- */
263
-
264
- summary {
265
- display: list-item;
266
- }
267
-
268
- /*
269
- Removes the default spacing and border for appropriate elements.
270
- */
271
-
272
- blockquote,
273
- dl,
274
- dd,
275
- h1,
276
- h2,
277
- h3,
278
- h4,
279
- h5,
280
- h6,
281
- hr,
282
- figure,
283
- p,
284
- pre {
285
- margin: 0;
286
- }
287
-
288
- fieldset {
289
- margin: 0;
290
- padding: 0;
291
- }
292
-
293
- legend {
294
- padding: 0;
295
- }
296
-
297
- ol,
298
- ul,
299
- menu {
300
- list-style: none;
301
- margin: 0;
302
- padding: 0;
303
- }
304
-
305
- /*
306
- Prevent resizing textareas horizontally by default.
307
- */
308
-
309
- textarea {
310
- resize: vertical;
311
- }
312
-
313
- /*
314
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
315
- 2. Set the default placeholder color to the user's configured gray 400 color.
316
- */
317
-
318
- input::-moz-placeholder, textarea::-moz-placeholder {
319
- opacity: 1; /* 1 */
320
- color: #9ca3af; /* 2 */
321
- }
322
-
323
- input::placeholder,
324
- textarea::placeholder {
325
- opacity: 1; /* 1 */
326
- color: #9ca3af; /* 2 */
327
- }
328
-
329
- /*
330
- Set the default cursor for buttons.
331
- */
332
-
333
- button,
334
- [role="button"] {
335
- cursor: pointer;
336
- }
337
-
338
- /*
339
- Make sure disabled buttons don't get the pointer cursor.
340
- */
341
- :disabled {
342
- cursor: default;
343
- }
344
-
345
- /*
346
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
347
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
348
- This can trigger a poorly considered lint error in some tools but is included by design.
349
- */
350
-
351
- img,
352
- svg,
353
- video,
354
- canvas,
355
- audio,
356
- iframe,
357
- embed,
358
- object {
359
- display: block; /* 1 */
360
- vertical-align: middle; /* 2 */
361
- }
362
-
363
- /*
364
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
365
- */
366
-
367
- img,
368
- video {
369
- max-width: 100%;
370
- height: auto;
371
- }
372
-
373
- /* Make elements with the HTML hidden attribute stay hidden by default */
374
- [hidden] {
375
- display: none;
376
- }
377
-
378
- *, ::before, ::after {
379
- --tw-border-spacing-x: 0;
380
- --tw-border-spacing-y: 0;
381
- --tw-translate-x: 0;
382
- --tw-translate-y: 0;
383
- --tw-rotate: 0;
384
- --tw-skew-x: 0;
385
- --tw-skew-y: 0;
386
- --tw-scale-x: 1;
387
- --tw-scale-y: 1;
388
- --tw-pan-x: ;
389
- --tw-pan-y: ;
390
- --tw-pinch-zoom: ;
391
- --tw-scroll-snap-strictness: proximity;
392
- --tw-ordinal: ;
393
- --tw-slashed-zero: ;
394
- --tw-numeric-figure: ;
395
- --tw-numeric-spacing: ;
396
- --tw-numeric-fraction: ;
397
- --tw-ring-inset: ;
398
- --tw-ring-offset-width: 0px;
399
- --tw-ring-offset-color: #fff;
400
- --tw-ring-color: rgb(59 130 246 / 0.5);
401
- --tw-ring-offset-shadow: 0 0 #0000;
402
- --tw-ring-shadow: 0 0 #0000;
403
- --tw-shadow: 0 0 #0000;
404
- --tw-shadow-colored: 0 0 #0000;
405
- --tw-blur: ;
406
- --tw-brightness: ;
407
- --tw-contrast: ;
408
- --tw-grayscale: ;
409
- --tw-hue-rotate: ;
410
- --tw-invert: ;
411
- --tw-saturate: ;
412
- --tw-sepia: ;
413
- --tw-drop-shadow: ;
414
- --tw-backdrop-blur: ;
415
- --tw-backdrop-brightness: ;
416
- --tw-backdrop-contrast: ;
417
- --tw-backdrop-grayscale: ;
418
- --tw-backdrop-hue-rotate: ;
419
- --tw-backdrop-invert: ;
420
- --tw-backdrop-opacity: ;
421
- --tw-backdrop-saturate: ;
422
- --tw-backdrop-sepia: ;
423
- }
424
-
425
- ::backdrop {
426
- --tw-border-spacing-x: 0;
427
- --tw-border-spacing-y: 0;
428
- --tw-translate-x: 0;
429
- --tw-translate-y: 0;
430
- --tw-rotate: 0;
431
- --tw-skew-x: 0;
432
- --tw-skew-y: 0;
433
- --tw-scale-x: 1;
434
- --tw-scale-y: 1;
435
- --tw-pan-x: ;
436
- --tw-pan-y: ;
437
- --tw-pinch-zoom: ;
438
- --tw-scroll-snap-strictness: proximity;
439
- --tw-ordinal: ;
440
- --tw-slashed-zero: ;
441
- --tw-numeric-figure: ;
442
- --tw-numeric-spacing: ;
443
- --tw-numeric-fraction: ;
444
- --tw-ring-inset: ;
445
- --tw-ring-offset-width: 0px;
446
- --tw-ring-offset-color: #fff;
447
- --tw-ring-color: rgb(59 130 246 / 0.5);
448
- --tw-ring-offset-shadow: 0 0 #0000;
449
- --tw-ring-shadow: 0 0 #0000;
450
- --tw-shadow: 0 0 #0000;
451
- --tw-shadow-colored: 0 0 #0000;
452
- --tw-blur: ;
453
- --tw-brightness: ;
454
- --tw-contrast: ;
455
- --tw-grayscale: ;
456
- --tw-hue-rotate: ;
457
- --tw-invert: ;
458
- --tw-saturate: ;
459
- --tw-sepia: ;
460
- --tw-drop-shadow: ;
461
- --tw-backdrop-blur: ;
462
- --tw-backdrop-brightness: ;
463
- --tw-backdrop-contrast: ;
464
- --tw-backdrop-grayscale: ;
465
- --tw-backdrop-hue-rotate: ;
466
- --tw-backdrop-invert: ;
467
- --tw-backdrop-opacity: ;
468
- --tw-backdrop-saturate: ;
469
- --tw-backdrop-sepia: ;
470
- }
471
- .fixed {
472
- position: fixed;
473
- }
474
- .absolute {
475
- position: absolute;
476
- }
477
- .relative {
478
- position: relative;
479
- }
480
- .inset-0 {
481
- top: 0px;
482
- right: 0px;
483
- bottom: 0px;
484
- left: 0px;
485
- }
486
- .inset-y-0 {
487
- top: 0px;
488
- bottom: 0px;
489
- }
490
- .right-0 {
491
- right: 0px;
492
- }
493
- .top-0 {
494
- top: 0px;
495
- }
496
- .left-0 {
497
- left: 0px;
498
- }
499
- .right-5 {
500
- right: 1.25rem;
501
- }
502
- .top-5 {
503
- top: 1.25rem;
504
- }
505
- .-top-2 {
506
- top: -0.5rem;
507
- }
508
- .-right-2 {
509
- right: -0.5rem;
510
- }
511
- .z-20 {
512
- z-index: 20;
513
- }
514
- .m-1 {
515
- margin: 0.25rem;
516
- }
517
- .my-2 {
518
- margin-top: 0.5rem;
519
- margin-bottom: 0.5rem;
520
- }
521
- .mx-2 {
522
- margin-left: 0.5rem;
523
- margin-right: 0.5rem;
524
- }
525
- .mb-1 {
526
- margin-bottom: 0.25rem;
527
- }
528
- .-ml-8 {
529
- margin-left: -2rem;
530
- }
531
- .mt-3 {
532
- margin-top: 0.75rem;
533
- }
534
- .mt-1 {
535
- margin-top: 0.25rem;
536
- }
537
- .mt-6 {
538
- margin-top: 1.5rem;
539
- }
540
- .block {
541
- display: block;
542
- }
543
- .inline-block {
544
- display: inline-block;
545
- }
546
- .flex {
547
- display: flex;
548
- }
549
- .inline-flex {
550
- display: inline-flex;
551
- }
552
- .table {
553
- display: table;
554
- }
555
- .grid {
556
- display: grid;
557
- }
558
- .hidden {
559
- display: none;
560
- }
561
- .h-8 {
562
- height: 2rem;
563
- }
564
- .h-full {
565
- height: 100%;
566
- }
567
- .h-24 {
568
- height: 6rem;
569
- }
570
- .h-5 {
571
- height: 1.25rem;
572
- }
573
- .min-h-screen {
574
- min-height: 100vh;
575
- }
576
- .w-full {
577
- width: 100%;
578
- }
579
- .w-screen {
580
- width: 100vw;
581
- }
582
- .w-8 {
583
- width: 2rem;
584
- }
585
- .w-1\/3 {
586
- width: 33.333333%;
587
- }
588
- .w-1\/2 {
589
- width: 50%;
590
- }
591
- .w-24 {
592
- width: 6rem;
593
- }
594
- .w-5 {
595
- width: 1.25rem;
596
- }
597
- .w-7 {
598
- width: 1.75rem;
599
- }
600
- .min-w-0 {
601
- min-width: 0px;
602
- }
603
- .max-w-full {
604
- max-width: 100%;
605
- }
606
- .flex-1 {
607
- flex: 1 1 0%;
608
- }
609
- .transform {
610
- 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));
611
- }
612
- .cursor-pointer {
613
- cursor: pointer;
614
- }
615
- .grid-cols-1 {
616
- grid-template-columns: repeat(1, minmax(0, 1fr));
617
- }
618
- .grid-rows-1 {
619
- grid-template-rows: repeat(1, minmax(0, 1fr));
620
- }
621
- .flex-row {
622
- flex-direction: row;
623
- }
624
- .flex-col {
625
- flex-direction: column;
626
- }
627
- .items-end {
628
- align-items: flex-end;
629
- }
630
- .items-center {
631
- align-items: center;
632
- }
633
- .justify-end {
634
- justify-content: flex-end;
635
- }
636
- .justify-center {
637
- justify-content: center;
638
- }
639
- .justify-between {
640
- justify-content: space-between;
641
- }
642
- .gap-3 {
643
- gap: 0.75rem;
644
- }
645
- .gap-1 {
646
- gap: 0.25rem;
647
- }
648
- .gap-x-4 {
649
- -moz-column-gap: 1rem;
650
- column-gap: 1rem;
651
- }
652
- .gap-y-2\.5 {
653
- row-gap: 0.625rem;
654
- }
655
- .gap-y-2 {
656
- row-gap: 0.5rem;
657
- }
658
- .space-x-1 > :not([hidden]) ~ :not([hidden]) {
659
- --tw-space-x-reverse: 0;
660
- margin-right: calc(0.25rem * var(--tw-space-x-reverse));
661
- margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
662
- }
663
- .space-y-1 > :not([hidden]) ~ :not([hidden]) {
664
- --tw-space-y-reverse: 0;
665
- margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
666
- margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
667
- }
668
- .self-center {
669
- align-self: center;
670
- }
671
- .overflow-hidden {
672
- overflow: hidden;
673
- }
674
- .overflow-x-auto {
675
- overflow-x: auto;
676
- }
677
- .overflow-y-scroll {
678
- overflow-y: scroll;
679
- }
680
- .truncate {
681
- overflow: hidden;
682
- text-overflow: ellipsis;
683
- white-space: nowrap;
684
- }
685
- .whitespace-pre-wrap {
686
- white-space: pre-wrap;
687
- }
688
- .rounded-lg {
689
- border-radius: 0.5rem;
690
- }
691
- .rounded-full {
692
- border-radius: 9999px;
693
- }
694
- .rounded-md {
695
- border-radius: 0.375rem;
696
- }
697
- .rounded {
698
- border-radius: 0.25rem;
699
- }
700
- .border {
701
- border-width: 1px;
702
- }
703
- .border-2 {
704
- border-width: 2px;
705
- }
706
- .border-b {
707
- border-bottom-width: 1px;
708
- }
709
- .border-t {
710
- border-top-width: 1px;
711
- }
712
- .border-t-0 {
713
- border-top-width: 0px;
714
- }
715
- .border-t-2 {
716
- border-top-width: 2px;
717
- }
718
- .border-dashed {
719
- border-style: dashed;
720
- }
721
- .border-gray-300 {
722
- --tw-border-opacity: 1;
723
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
724
- }
725
- .border-slate-400 {
726
- --tw-border-opacity: 1;
727
- border-color: rgb(148 163 184 / var(--tw-border-opacity));
728
- }
729
- .border-white {
730
- --tw-border-opacity: 1;
731
- border-color: rgb(255 255 255 / var(--tw-border-opacity));
732
- }
733
- .border-slate-500 {
734
- --tw-border-opacity: 1;
735
- border-color: rgb(100 116 139 / var(--tw-border-opacity));
736
- }
737
- .bg-blue-700 {
738
- --tw-bg-opacity: 1;
739
- background-color: rgb(29 78 216 / var(--tw-bg-opacity));
740
- }
741
- .bg-white {
742
- --tw-bg-opacity: 1;
743
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
744
- }
745
- .bg-green-700 {
746
- --tw-bg-opacity: 1;
747
- background-color: rgb(21 128 61 / var(--tw-bg-opacity));
748
- }
749
- .bg-red-700 {
750
- --tw-bg-opacity: 1;
751
- background-color: rgb(185 28 28 / var(--tw-bg-opacity));
752
- }
753
- .bg-gray-50 {
754
- --tw-bg-opacity: 1;
755
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
756
- }
757
- .bg-gray-100 {
758
- --tw-bg-opacity: 1;
759
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
760
- }
761
- .bg-black {
762
- --tw-bg-opacity: 1;
763
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
764
- }
765
- .bg-slate-50 {
766
- --tw-bg-opacity: 1;
767
- background-color: rgb(248 250 252 / var(--tw-bg-opacity));
768
- }
769
- .bg-red-500 {
770
- --tw-bg-opacity: 1;
771
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
772
- }
773
- .bg-gray-200 {
774
- --tw-bg-opacity: 1;
775
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
776
- }
777
- .bg-gray-300 {
778
- --tw-bg-opacity: 1;
779
- background-color: rgb(209 213 219 / var(--tw-bg-opacity));
780
- }
781
- .bg-transparent {
782
- background-color: transparent;
783
- }
784
- .bg-opacity-75 {
785
- --tw-bg-opacity: 0.75;
786
- }
787
- .p-0 {
788
- padding: 0px;
789
- }
790
- .p-1 {
791
- padding: 0.25rem;
792
- }
793
- .p-2 {
794
- padding: 0.5rem;
795
- }
796
- .p-4 {
797
- padding: 1rem;
798
- }
799
- .p-3 {
800
- padding: 0.75rem;
801
- }
802
- .px-1\.5 {
803
- padding-left: 0.375rem;
804
- padding-right: 0.375rem;
805
- }
806
- .py-1 {
807
- padding-top: 0.25rem;
808
- padding-bottom: 0.25rem;
809
- }
810
- .px-1 {
811
- padding-left: 0.25rem;
812
- padding-right: 0.25rem;
813
- }
814
- .px-3 {
815
- padding-left: 0.75rem;
816
- padding-right: 0.75rem;
817
- }
818
- .px-4 {
819
- padding-left: 1rem;
820
- padding-right: 1rem;
821
- }
822
- .py-2 {
823
- padding-top: 0.5rem;
824
- padding-bottom: 0.5rem;
825
- }
826
- .px-5 {
827
- padding-left: 1.25rem;
828
- padding-right: 1.25rem;
829
- }
830
- .py-3 {
831
- padding-top: 0.75rem;
832
- padding-bottom: 0.75rem;
833
- }
834
- .py-4 {
835
- padding-top: 1rem;
836
- padding-bottom: 1rem;
837
- }
838
- .px-6 {
839
- padding-left: 1.5rem;
840
- padding-right: 1.5rem;
841
- }
842
- .py-6 {
843
- padding-top: 1.5rem;
844
- padding-bottom: 1.5rem;
845
- }
846
- .py-2\.5 {
847
- padding-top: 0.625rem;
848
- padding-bottom: 0.625rem;
849
- }
850
- .pt-4 {
851
- padding-top: 1rem;
852
- }
853
- .pr-2 {
854
- padding-right: 0.5rem;
855
- }
856
- .pb-20 {
857
- padding-bottom: 5rem;
858
- }
859
- .pb-4 {
860
- padding-bottom: 1rem;
861
- }
862
- .pt-5 {
863
- padding-top: 1.25rem;
864
- }
865
- .pb-6 {
866
- padding-bottom: 1.5rem;
867
- }
868
- .pl-1 {
869
- padding-left: 0.25rem;
870
- }
871
- .text-left {
872
- text-align: left;
873
- }
874
- .text-center {
875
- text-align: center;
876
- }
877
- .align-bottom {
878
- vertical-align: bottom;
879
- }
880
- .text-xs {
881
- font-size: 0.75rem;
882
- line-height: 1rem;
883
- }
884
- .text-sm {
885
- font-size: 0.875rem;
886
- line-height: 1.25rem;
887
- }
888
- .text-lg {
889
- font-size: 1.125rem;
890
- line-height: 1.75rem;
891
- }
892
- .text-base {
893
- font-size: 1rem;
894
- line-height: 1.5rem;
895
- }
896
- .text-xl {
897
- font-size: 1.25rem;
898
- line-height: 1.75rem;
899
- }
900
- .font-medium {
901
- font-weight: 500;
902
- }
903
- .font-normal {
904
- font-weight: 400;
905
- }
906
- .font-semibold {
907
- font-weight: 600;
908
- }
909
- .font-bold {
910
- font-weight: 700;
911
- }
912
- .uppercase {
913
- text-transform: uppercase;
914
- }
915
- .leading-6 {
916
- line-height: 1.5rem;
917
- }
918
- .text-white {
919
- --tw-text-opacity: 1;
920
- color: rgb(255 255 255 / var(--tw-text-opacity));
921
- }
922
- .text-gray-900 {
923
- --tw-text-opacity: 1;
924
- color: rgb(17 24 39 / var(--tw-text-opacity));
925
- }
926
- .text-gray-700 {
927
- --tw-text-opacity: 1;
928
- color: rgb(55 65 81 / var(--tw-text-opacity));
929
- }
930
- .text-gray-500 {
931
- --tw-text-opacity: 1;
932
- color: rgb(107 114 128 / var(--tw-text-opacity));
933
- }
934
- .text-gray-400 {
935
- --tw-text-opacity: 1;
936
- color: rgb(156 163 175 / var(--tw-text-opacity));
937
- }
938
- .text-black {
939
- --tw-text-opacity: 1;
940
- color: rgb(0 0 0 / var(--tw-text-opacity));
941
- }
942
- .text-red-600 {
943
- --tw-text-opacity: 1;
944
- color: rgb(220 38 38 / var(--tw-text-opacity));
945
- }
946
- .opacity-100 {
947
- opacity: 1;
948
- }
949
- .shadow-md {
950
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
951
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
952
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
953
- }
954
- .shadow-xl {
955
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
956
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
957
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
958
- }
959
- .outline-none {
960
- outline: 2px solid transparent;
961
- outline-offset: 2px;
962
- }
963
- .filter {
964
- 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);
965
- }
966
- .transition-opacity {
967
- transition-property: opacity;
968
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
969
- transition-duration: 150ms;
970
- }
971
- .transition {
972
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
973
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
974
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
975
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
976
- transition-duration: 150ms;
977
- }
978
- .transition-all {
979
- transition-property: all;
980
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
981
- transition-duration: 150ms;
982
- }
983
- .transition-colors {
984
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
985
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
986
- transition-duration: 150ms;
987
- }
988
- .duration-200 {
989
- transition-duration: 200ms;
990
- }
991
-
992
- /* Buttons */
993
- .khb_btn {
994
- margin: 0.25rem;
995
- border-radius: 0.5rem;
996
- text-align: center;
997
- font-weight: 500;
998
- }
999
- .khb_btn:focus {
1000
- outline: 2px solid transparent;
1001
- outline-offset: 2px;
1002
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1003
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1004
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1005
- }
1006
- .khb_btn:disabled {
1007
- cursor: not-allowed;
1008
- }
1009
- .khb_btn-primary {
1010
- --tw-bg-opacity: 1;
1011
- background-color: rgb(29 78 216 / var(--tw-bg-opacity));
1012
- --tw-text-opacity: 1;
1013
- color: rgb(255 255 255 / var(--tw-text-opacity));
1014
- }
1015
- .khb_btn-primary:hover {
1016
- --tw-bg-opacity: 1;
1017
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
1018
- }
1019
- .khb_btn-primary:focus {
1020
- --tw-ring-opacity: 1;
1021
- --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
1022
- }
1023
- .khb_btn-primary:disabled {
1024
- --tw-bg-opacity: 1;
1025
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
1026
- }
1027
- .khb_btn-secondary:disabled {
1028
- --tw-bg-opacity: 1;
1029
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1030
- }
1031
- .khb_btn-secondary {
1032
- border-width: 1px;
1033
- --tw-border-opacity: 1;
1034
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1035
- --tw-bg-opacity: 1;
1036
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1037
- --tw-text-opacity: 1;
1038
- color: rgb(17 24 39 / var(--tw-text-opacity));
1039
- }
1040
- .khb_btn-secondary:hover {
1041
- --tw-bg-opacity: 1;
1042
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1043
- }
1044
- .khb_btn-secondary:focus {
1045
- --tw-ring-opacity: 1;
1046
- --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
1047
- }
1048
- .khb_btn-success {
1049
- --tw-bg-opacity: 1;
1050
- background-color: rgb(21 128 61 / var(--tw-bg-opacity));
1051
- --tw-text-opacity: 1;
1052
- color: rgb(255 255 255 / var(--tw-text-opacity));
1053
- }
1054
- .khb_btn-success:hover {
1055
- --tw-bg-opacity: 1;
1056
- background-color: rgb(22 101 52 / var(--tw-bg-opacity));
1057
- }
1058
- .khb_btn-success:focus {
1059
- --tw-ring-opacity: 1;
1060
- --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
1061
- }
1062
- .khb_btn-danger {
1063
- --tw-bg-opacity: 1;
1064
- background-color: rgb(185 28 28 / var(--tw-bg-opacity));
1065
- --tw-text-opacity: 1;
1066
- color: rgb(255 255 255 / var(--tw-text-opacity));
1067
- }
1068
- .khb_btn-danger:hover {
1069
- --tw-bg-opacity: 1;
1070
- background-color: rgb(153 27 27 / var(--tw-bg-opacity));
1071
- }
1072
- .khb_btn-danger:focus {
1073
- --tw-ring-opacity: 1;
1074
- --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
1075
- }
1076
- .khb_btn-danger:disabled {
1077
- --tw-bg-opacity: 1;
1078
- background-color: rgb(153 27 27 / var(--tw-bg-opacity));
1079
- }
1080
-
1081
- .khb_btn-xs {
1082
- padding-left: 0.375rem;
1083
- padding-right: 0.375rem;
1084
- padding-top: 0.25rem;
1085
- padding-bottom: 0.25rem;
1086
- font-size: 0.75rem;
1087
- line-height: 1rem;
1088
- }
1089
- .khb_btn-sm {
1090
- padding-left: 0.75rem;
1091
- padding-right: 0.75rem;
1092
- padding-top: 0.5rem;
1093
- padding-bottom: 0.5rem;
1094
- font-size: 0.875rem;
1095
- line-height: 1.25rem;
1096
- }
1097
- .khb_btn-base {
1098
- padding-left: 1rem;
1099
- padding-right: 1rem;
1100
- padding-top: 0.625rem;
1101
- padding-bottom: 0.625rem;
1102
- font-size: 0.875rem;
1103
- line-height: 1.25rem;
1104
- }
1105
- .khb_btn-lg {
1106
- padding-left: 1.25rem;
1107
- padding-right: 1.25rem;
1108
- padding-top: 0.75rem;
1109
- padding-bottom: 0.75rem;
1110
- font-size: 1.125rem;
1111
- line-height: 1.75rem;
1112
- }
1113
-
1114
- .khb_btn-loader {
1115
- margin-right: 0.5rem;
1116
- display: inline-block;
1117
- }
1118
- /* \ End of Buttons */
1119
-
1120
- /* Table */
1121
- .khb_table-container {
1122
- overflow: hidden;
1123
- border-radius: 0.5rem;
1124
- border-width: 1px;
1125
- --tw-border-opacity: 1;
1126
- border-color: rgb(229 231 235 / var(--tw-border-opacity));
1127
- --tw-bg-opacity: 1;
1128
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1129
- }
1130
- .khb_table-height {
1131
- justify-content: center;
1132
- overflow: auto;
1133
- height: calc(100vh - 252px);
1134
- }
1135
- .khb_table-wrapper {
1136
- position: relative;
1137
- overflow-x: auto;
1138
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1139
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1140
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1141
- }
1142
- @media (min-width: 640px) {
1143
-
1144
- .khb_table-wrapper {
1145
- border-radius: 0.5rem;
1146
- }
1147
- }
1148
- .khb_table {
1149
- width: 100%;
1150
- text-align: left;
1151
- font-size: 0.875rem;
1152
- line-height: 1.25rem;
1153
- --tw-text-opacity: 1;
1154
- color: rgb(107 114 128 / var(--tw-text-opacity));
1155
- }
1156
- .khb_thead {
1157
- --tw-bg-opacity: 1;
1158
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1159
- font-size: 0.75rem;
1160
- line-height: 1rem;
1161
- text-transform: uppercase;
1162
- --tw-text-opacity: 1;
1163
- color: rgb(55 65 81 / var(--tw-text-opacity));
1164
- }
1165
- .khb_table-heading {
1166
- padding-top: 0.75rem;
1167
- padding-bottom: 0.75rem;
1168
- padding-left: 1.5rem;
1169
- padding-right: 1.5rem;
1170
- }
1171
- .khb_table-row {
1172
- border-bottom-width: 1px;
1173
- --tw-bg-opacity: 1;
1174
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1175
- }
1176
- .khb_table-row:hover {
1177
- --tw-bg-opacity: 1;
1178
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1179
- }
1180
- .khb_table-row-heading {
1181
- white-space: nowrap;
1182
- padding-top: 1rem;
1183
- padding-bottom: 1rem;
1184
- padding-left: 1.5rem;
1185
- padding-right: 1.5rem;
1186
- font-weight: 500;
1187
- --tw-text-opacity: 1;
1188
- color: rgb(17 24 39 / var(--tw-text-opacity));
1189
- }
1190
- .khb_table-row-data {
1191
- padding-top: 0.75rem;
1192
- padding-bottom: 0.75rem;
1193
- padding-left: 1.25rem;
1194
- padding-right: 1.25rem;
1195
- }
1196
- .khb_table-row-actions {
1197
- padding: 0.125rem;
1198
- }
1199
- .khb_actions-update {
1200
- margin: 0.25rem;
1201
- border-radius: 0.5rem;
1202
- text-align: center;
1203
- font-weight: 500;
1204
- }
1205
- .khb_actions-update:focus {
1206
- outline: 2px solid transparent;
1207
- outline-offset: 2px;
1208
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1209
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1210
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1211
- }
1212
- .khb_actions-update:disabled {
1213
- cursor: not-allowed;
1214
- }
1215
- .khb_actions-update {
1216
- --tw-bg-opacity: 1;
1217
- background-color: rgb(29 78 216 / var(--tw-bg-opacity));
1218
- --tw-text-opacity: 1;
1219
- color: rgb(255 255 255 / var(--tw-text-opacity));
1220
- }
1221
- .khb_actions-update:hover {
1222
- --tw-bg-opacity: 1;
1223
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
1224
- }
1225
- .khb_actions-update:focus {
1226
- --tw-ring-opacity: 1;
1227
- --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
1228
- }
1229
- .khb_actions-update:disabled {
1230
- --tw-bg-opacity: 1;
1231
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
1232
- }
1233
- .khb_actions-update {
1234
- padding-left: 0.375rem;
1235
- padding-right: 0.375rem;
1236
- padding-top: 0.25rem;
1237
- padding-bottom: 0.25rem;
1238
- font-size: 0.75rem;
1239
- line-height: 1rem;
1240
- }
1241
- .khb_actions-delete {
1242
- margin: 0.25rem;
1243
- border-radius: 0.5rem;
1244
- text-align: center;
1245
- font-weight: 500;
1246
- }
1247
- .khb_actions-delete:focus {
1248
- outline: 2px solid transparent;
1249
- outline-offset: 2px;
1250
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1251
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1252
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1253
- }
1254
- .khb_actions-delete:disabled {
1255
- cursor: not-allowed;
1256
- }
1257
- .khb_actions-delete {
1258
- --tw-bg-opacity: 1;
1259
- background-color: rgb(185 28 28 / var(--tw-bg-opacity));
1260
- --tw-text-opacity: 1;
1261
- color: rgb(255 255 255 / var(--tw-text-opacity));
1262
- }
1263
- .khb_actions-delete:hover {
1264
- --tw-bg-opacity: 1;
1265
- background-color: rgb(153 27 27 / var(--tw-bg-opacity));
1266
- }
1267
- .khb_actions-delete:focus {
1268
- --tw-ring-opacity: 1;
1269
- --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
1270
- }
1271
- .khb_actions-delete:disabled {
1272
- --tw-bg-opacity: 1;
1273
- background-color: rgb(153 27 27 / var(--tw-bg-opacity));
1274
- }
1275
- .khb_actions-delete {
1276
- padding-left: 0.375rem;
1277
- padding-right: 0.375rem;
1278
- padding-top: 0.25rem;
1279
- padding-bottom: 0.25rem;
1280
- font-size: 0.75rem;
1281
- line-height: 1rem;
1282
- }
1283
- /* \ End of Table */
1284
-
1285
- /* Pagination */
1286
- .khb_pagination {
1287
- display: flex;
1288
- align-items: center;
1289
- justify-content: space-between;
1290
- padding-top: 0.5rem;
1291
- padding-bottom: 0.5rem;
1292
- padding-left: 1.25rem;
1293
- padding-right: 1.25rem;
1294
- }
1295
- .khb_pagination-total {
1296
- font-size: 0.875rem;
1297
- line-height: 1.25rem;
1298
- font-weight: 400;
1299
- --tw-text-opacity: 1;
1300
- color: rgb(107 114 128 / var(--tw-text-opacity));
1301
- }
1302
- .khb_pagination-total-showing {
1303
- font-weight: 600;
1304
- --tw-text-opacity: 1;
1305
- color: rgb(17 24 39 / var(--tw-text-opacity));
1306
- }
1307
- .khb_pagination-total-items {
1308
- font-weight: 600;
1309
- --tw-text-opacity: 1;
1310
- color: rgb(17 24 39 / var(--tw-text-opacity));
1311
- }
1312
- .khb_pagination-actions {
1313
- display: inline-flex;
1314
- align-items: center;
1315
- }
1316
- .khb_pagination-actions > :not([hidden]) ~ :not([hidden]) {
1317
- --tw-space-x-reverse: 0;
1318
- margin-right: calc(-1px * var(--tw-space-x-reverse));
1319
- margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
1320
- }
1321
- .khb_pagination-pager {
1322
- display: flex;
1323
- flex-direction: row;
1324
- align-items: center;
1325
- padding-left: 0.25rem;
1326
- padding-right: 0.25rem;
1327
- }
1328
- .khb_pagination-pager input {
1329
- margin-top: 0.5rem;
1330
- margin-bottom: 0.5rem;
1331
- width: 4rem;
1332
- }
1333
- /* \ End of Pagination */
1334
-
1335
- /* Input */
1336
- .khb_input {
1337
- width: 100%;
1338
- border-radius: 0.5rem;
1339
- border-width: 1px;
1340
- --tw-border-opacity: 1;
1341
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1342
- --tw-bg-opacity: 1;
1343
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1344
- --tw-text-opacity: 1;
1345
- color: rgb(17 24 39 / var(--tw-text-opacity));
1346
- outline: 2px solid transparent;
1347
- outline-offset: 2px;
1348
- }
1349
- .khb_input:focus {
1350
- --tw-border-opacity: 1;
1351
- border-color: rgb(59 130 246 / var(--tw-border-opacity));
1352
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1353
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1354
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1355
- --tw-ring-opacity: 1;
1356
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
1357
- }
1358
- .khb_input:disabled {
1359
- cursor: not-allowed;
1360
- --tw-border-opacity: 1;
1361
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1362
- --tw-bg-opacity: 1;
1363
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1364
- --tw-text-opacity: 1;
1365
- color: rgb(107 114 128 / var(--tw-text-opacity));
1366
- }
1367
- .khb_input-info {
1368
- margin-top: 0.25rem;
1369
- font-size: 0.875rem;
1370
- line-height: 1.25rem;
1371
- --tw-text-opacity: 1;
1372
- color: rgb(156 163 175 / var(--tw-text-opacity));
1373
- }
1374
- .khb_input-error {
1375
- font-size: 0.875rem;
1376
- line-height: 1.25rem;
1377
- --tw-text-opacity: 1;
1378
- color: rgb(220 38 38 / var(--tw-text-opacity));
1379
- }
1380
- .khb_input-xs {
1381
- padding: 0.375rem;
1382
- font-size: 0.875rem;
1383
- line-height: 1.25rem;
1384
- }
1385
- .khb_input-sm {
1386
- padding: 0.5rem;
1387
- font-size: 0.875rem;
1388
- line-height: 1.25rem;
1389
- }
1390
- .khb_input-base {
1391
- padding: 0.625rem;
1392
- font-size: 1rem;
1393
- line-height: 1.5rem;
1394
- }
1395
- .khb_input-label {
1396
- margin-bottom: 0.25rem;
1397
- display: block;
1398
- font-size: 0.875rem;
1399
- line-height: 1.25rem;
1400
- font-weight: 500;
1401
- --tw-text-opacity: 1;
1402
- color: rgb(17 24 39 / var(--tw-text-opacity));
1403
- }
1404
- .khb_input-label-required {
1405
- --tw-text-opacity: 1;
1406
- color: rgb(220 38 38 / var(--tw-text-opacity));
1407
- }
1408
- .khb_input-srcset {
1409
- display: flex;
1410
- flex-direction: row;
1411
- align-items: center;
1412
- }
1413
- .khb_input-srcset-items > :not([hidden]) ~ :not([hidden]) {
1414
- --tw-space-y-reverse: 0;
1415
- margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1416
- margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1417
- }
1418
- .khb_input-color {
1419
- height: 3.5rem;
1420
- }
1421
- /* \ End of Input */
1422
-
1423
- /* Drawer */
1424
- .khb_drawer-wrapper-1 {
1425
- position: fixed;
1426
- top: 0px;
1427
- right: 0px;
1428
- bottom: 0px;
1429
- left: 0px;
1430
- overflow: hidden;
1431
- }
1432
- .khb_drawer-wrapper-2 {
1433
- position: absolute;
1434
- top: 0px;
1435
- right: 0px;
1436
- bottom: 0px;
1437
- left: 0px;
1438
- overflow: hidden;
1439
- }
1440
- .khb_drawer-backdrop {
1441
- position: absolute;
1442
- top: 0px;
1443
- right: 0px;
1444
- bottom: 0px;
1445
- left: 0px;
1446
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1447
- --tw-bg-opacity: 0.75;
1448
- --tw-backdrop-blur: blur(4px);
1449
- -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);
1450
- 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);
1451
- transition-property: opacity;
1452
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1453
- transition-duration: 150ms;
1454
- }
1455
- .khb_drawer-container-1 {
1456
- position: fixed;
1457
- top: 0px;
1458
- bottom: 0px;
1459
- right: 0px;
1460
- display: flex;
1461
- max-width: 100%;
1462
- padding-left: 2.5rem;
1463
- }
1464
- .khb_drawer-container-2 {
1465
- position: relative;
1466
- width: 100vw;
1467
- max-width: 72rem;
1468
- }
1469
- .khb_drawer-close-section {
1470
- position: absolute;
1471
- top: 0px;
1472
- left: 0px;
1473
- margin-left: -2rem;
1474
- display: flex;
1475
- padding-top: 1rem;
1476
- padding-right: 0.5rem;
1477
- }
1478
- @media (min-width: 640px) {
1479
-
1480
- .khb_drawer-close-section {
1481
- margin-left: -2.5rem;
1482
- padding-right: 1rem;
1483
- }
1484
- }
1485
- .khb_drawer-close-btn {
1486
- display: flex;
1487
- height: 2rem;
1488
- width: 2rem;
1489
- align-items: center;
1490
- justify-content: center;
1491
- border-radius: 9999px;
1492
- --tw-bg-opacity: 1;
1493
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1494
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1495
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1496
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1497
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1498
- transition-duration: 150ms;
1499
- }
1500
- .khb_drawer-close-btn:hover {
1501
- --tw-rotate: 90deg;
1502
- 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));
1503
- }
1504
- .khb_drawer-close-btn:focus {
1505
- outline: 2px solid transparent;
1506
- outline-offset: 2px;
1507
- }
1508
- .khb_sr-only {
1509
- position: absolute;
1510
- width: 1px;
1511
- height: 1px;
1512
- padding: 0;
1513
- margin: -1px;
1514
- overflow: hidden;
1515
- clip: rect(0, 0, 0, 0);
1516
- white-space: nowrap;
1517
- border-width: 0;
1518
- }
1519
- .khb_drawer-main {
1520
- display: flex;
1521
- height: 100%;
1522
- flex-direction: column;
1523
- overflow-y: scroll;
1524
- --tw-bg-opacity: 1;
1525
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1526
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1527
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1528
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1529
- }
1530
- .khb_drawer-header {
1531
- border-bottom-width: 1px;
1532
- --tw-border-opacity: 1;
1533
- border-color: rgb(148 163 184 / var(--tw-border-opacity));
1534
- --tw-bg-opacity: 1;
1535
- background-color: rgb(203 213 225 / var(--tw-bg-opacity));
1536
- padding-left: 1rem;
1537
- padding-right: 1rem;
1538
- padding-top: 1.5rem;
1539
- padding-bottom: 1.5rem;
1540
- }
1541
- @media (min-width: 640px) {
1542
-
1543
- .khb_drawer-header {
1544
- padding-left: 1.5rem;
1545
- padding-right: 1.5rem;
1546
- }
1547
- }
1548
- .khb_drawer-header-title {
1549
- font-size: 1.25rem;
1550
- line-height: 1.75rem;
1551
- font-weight: 500;
1552
- }
1553
- .khb_darwer-content {
1554
- position: relative;
1555
- flex: 1 1 0%;
1556
- overflow: auto;
1557
- padding-left: 1.5rem;
1558
- padding-right: 1.5rem;
1559
- padding-top: 1.5rem;
1560
- padding-bottom: 1.5rem;
1561
- }
1562
- .khb_drawer-footer {
1563
- display: flex;
1564
- align-items: center;
1565
- justify-content: flex-end;
1566
- border-top-width: 1px;
1567
- --tw-border-opacity: 1;
1568
- border-color: rgb(148 163 184 / var(--tw-border-opacity));
1569
- --tw-bg-opacity: 1;
1570
- background-color: rgb(248 250 252 / var(--tw-bg-opacity));
1571
- padding-left: 1rem;
1572
- padding-right: 1rem;
1573
- padding-top: 1rem;
1574
- padding-bottom: 1rem;
1575
- }
1576
- /* \ End of Drawer */
1577
-
1578
- /* Utility */
1579
- .khb_sr-only {
1580
- position: absolute;
1581
- width: 1px;
1582
- height: 1px;
1583
- padding: 0;
1584
- margin: -1px;
1585
- overflow: hidden;
1586
- clip: rect(0, 0, 0, 0);
1587
- white-space: nowrap;
1588
- border-width: 0;
1589
- }
1590
- .khb_grid-item-1of3 {
1591
- display: inline-block;
1592
- width: 33.333333%;
1593
- }
1594
- .khb_grid-item-1of2 {
1595
- display: inline-block;
1596
- width: 50%;
1597
- }
1598
- .khb_padding-right-1 {
1599
- padding-right: 0.25rem;
1600
- }
1601
- .khb_padding-left-1 {
1602
- padding-left: 0.25rem;
1603
- }
1604
- .khb_align-top {
1605
- vertical-align: top;
1606
- }
1607
- .khb_margin-top-0 {
1608
- margin-top: 0px !important;
1609
- }
1610
- /* \ End of Utility */
1611
-
1612
- /* Animations */
1613
- .khb_drawer-enter {
1614
- opacity: 0.1;
1615
- }
1616
- .khb_drawer-enter.khb_drawer-enter-active {
1617
- opacity: 1;
1618
- transition: opacity 200ms ease-in;
1619
- }
1620
- .khb_drawer-exit {
1621
- opacity: 1;
1622
- }
1623
- .khb_drawer-exit.khb_drawer-exit-active {
1624
- opacity: 0.01;
1625
- transition: opacity 200ms ease-in;
1626
- }
1627
- /* \ End of Animations */
1628
-
1629
- /* Form */
1630
- .khb_form {
1631
- display: grid;
1632
- grid-template-columns: repeat(1, minmax(0, 1fr));
1633
- grid-template-rows: repeat(1, minmax(0, 1fr));
1634
- row-gap: 0.75rem;
1635
- }
1636
- /* \ End of Form */
1637
-
1638
- /* Accordian */
1639
- .khb_accordian-header {
1640
- display: flex;
1641
- width: 100%;
1642
- align-items: center;
1643
- justify-content: space-between;
1644
- border-top-left-radius: 0.375rem;
1645
- border-top-right-radius: 0.375rem;
1646
- border-width: 2px;
1647
- --tw-border-opacity: 1;
1648
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1649
- --tw-bg-opacity: 1;
1650
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1651
- padding: 1rem;
1652
- font-weight: 500;
1653
- }
1654
- .khb_accordian-header:hover {
1655
- --tw-bg-opacity: 1;
1656
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1657
- }
1658
- .khb_accordian-body {
1659
- border-bottom-right-radius: 0.375rem;
1660
- border-bottom-left-radius: 0.375rem;
1661
- border-width: 2px;
1662
- border-top-width: 0px;
1663
- --tw-border-opacity: 1;
1664
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1665
- }
1666
- .khb_accordian-content {
1667
- padding: 0.625rem;
1668
- }
1669
- .khb_accordian-footer {
1670
- display: flex;
1671
- flex-direction: row;
1672
- justify-content: flex-end;
1673
- }
1674
- .khb_accordian-footer > :not([hidden]) ~ :not([hidden]) {
1675
- --tw-space-x-reverse: 0;
1676
- margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1677
- margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
1678
- }
1679
- .khb_accordian-footer {
1680
- border-top-width: 2px;
1681
- --tw-border-opacity: 1;
1682
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
1683
- --tw-bg-opacity: 1;
1684
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1685
- padding: 0.25rem;
1686
- }
1687
- .khb_item-items > :not([hidden]) ~ :not([hidden]) {
1688
- --tw-space-y-reverse: 0;
1689
- margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1690
- margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1691
- }
1692
- .khb-form-items > :not([hidden]) ~ :not([hidden]) {
1693
- --tw-space-y-reverse: 0;
1694
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1695
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1696
- }
1697
- /* \ End of Accordian */
1698
-
1699
- /* Modal */
1700
- .khb_modal-wrapper-1 {
1701
- position: fixed;
1702
- top: 0px;
1703
- right: 0px;
1704
- bottom: 0px;
1705
- left: 0px;
1706
- z-index: 20;
1707
- overflow-y: auto;
1708
- }
1709
- .khb_modal-wrapper-2 {
1710
- position: relative;
1711
- display: flex;
1712
- min-height: 100vh;
1713
- align-items: flex-end;
1714
- justify-content: center;
1715
- padding-left: 1rem;
1716
- padding-right: 1rem;
1717
- padding-top: 1rem;
1718
- padding-bottom: 5rem;
1719
- text-align: center;
1720
- }
1721
- @media (min-width: 640px) {
1722
-
1723
- .khb_modal-wrapper-2 {
1724
- display: block;
1725
- padding: 0px;
1726
- }
1727
- }
1728
- .khb_modal-backdrop {
1729
- position: absolute;
1730
- top: 0px;
1731
- right: 0px;
1732
- bottom: 0px;
1733
- left: 0px;
1734
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1735
- --tw-bg-opacity: 0.75;
1736
- --tw-backdrop-blur: blur(4px);
1737
- -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);
1738
- 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);
1739
- transition-property: opacity;
1740
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1741
- transition-duration: 150ms;
1742
- }
1743
- .khb_modal-container-1 {
1744
- display: flex;
1745
- min-height: 100vh;
1746
- align-items: center;
1747
- justify-content: center;
1748
- opacity: 1;
1749
- }
1750
- .khb_modal-container-2 {
1751
- display: inline-block;
1752
- 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));
1753
- overflow: hidden;
1754
- border-radius: 0.5rem;
1755
- text-align: left;
1756
- vertical-align: bottom;
1757
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1758
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1759
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1760
- transition-property: all;
1761
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1762
- transition-duration: 150ms;
1763
- }
1764
- @media (min-width: 640px) {
1765
-
1766
- .khb_modal-container-2 {
1767
- margin-top: 2rem;
1768
- margin-bottom: 2rem;
1769
- width: 100%;
1770
- max-width: 36rem;
1771
- vertical-align: middle;
1772
- }
1773
- }
1774
- .khb_modal-main {
1775
- --tw-bg-opacity: 1;
1776
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1777
- }
1778
- .khb_modal-header {
1779
- position: relative;
1780
- border-bottom-width: 1px;
1781
- --tw-border-opacity: 1;
1782
- border-color: rgb(229 231 235 / var(--tw-border-opacity));
1783
- padding: 1rem;
1784
- padding-bottom: 1rem;
1785
- }
1786
- .khb_modal-title {
1787
- font-size: 0.875rem;
1788
- line-height: 1.25rem;
1789
- font-weight: 600;
1790
- }
1791
- .khb_modal-close {
1792
- position: absolute;
1793
- right: 1.25rem;
1794
- top: 1.25rem;
1795
- }
1796
- .khb_modal-close:focus {
1797
- outline: 2px solid transparent;
1798
- outline-offset: 2px;
1799
- }
1800
- .khb_modal-content {
1801
- padding: 1rem;
1802
- }
1803
- /* \ End of Modal */
1804
-
1805
- /* Delete Modal */
1806
- .khb_delete-header {
1807
- display: flex;
1808
- align-items: center;
1809
- gap: 0.75rem;
1810
- border-radius: 0.5rem;
1811
- --tw-bg-opacity: 1;
1812
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
1813
- padding-top: 0.5rem;
1814
- padding-bottom: 0.5rem;
1815
- padding-left: 1rem;
1816
- padding-right: 1rem;
1817
- font-size: 0.875rem;
1818
- line-height: 1.25rem;
1819
- --tw-text-opacity: 1;
1820
- color: rgb(0 0 0 / var(--tw-text-opacity));
1821
- }
1822
- .khb_delete-content {
1823
- margin-top: 0.75rem;
1824
- font-size: 0.875rem;
1825
- line-height: 1.25rem;
1826
- --tw-text-opacity: 1;
1827
- color: rgb(0 0 0 / var(--tw-text-opacity));
1828
- }
1829
- .khb_delete-note {
1830
- margin-top: 0.75rem;
1831
- }
1832
- .khb_delete-actions {
1833
- margin-top: 0.75rem;
1834
- display: flex;
1835
- flex-direction: row;
1836
- gap: 0.75rem;
1837
- }
1838
- .khb_delete-input {
1839
- width: 100%;
1840
- flex-grow: 1;
1841
- }
1842
- .khb_delete-buttons {
1843
- grid-column: span 3 / span 3;
1844
- }
1845
- /* \ End of Delete Modal */
1846
-
1847
- /* Image Upload */
1848
- .khb_img-upload-wrapper-1 {
1849
- margin-top: 0.25rem;
1850
- border-radius: 0.375rem;
1851
- border-width: 2px;
1852
- border-style: dashed;
1853
- --tw-border-opacity: 1;
1854
- border-color: rgb(148 163 184 / var(--tw-border-opacity));
1855
- }
1856
- .khb_img-upload-wrapper-2 {
1857
- display: flex;
1858
- cursor: pointer;
1859
- justify-content: center;
1860
- }
1861
- .khb_img-upload-wrapper-2 > :not([hidden]) ~ :not([hidden]) {
1862
- --tw-space-y-reverse: 0;
1863
- margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1864
- margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1865
- }
1866
- .khb_img-upload-wrapper-2 {
1867
- padding-left: 1.5rem;
1868
- padding-right: 1.5rem;
1869
- padding-top: 1.25rem;
1870
- padding-bottom: 1.5rem;
1871
- text-align: center;
1872
- }
1873
- .khb_img-wrapper {
1874
- position: relative;
1875
- display: inline-flex;
1876
- }
1877
- .khb_img-wrapper-img {
1878
- height: 6rem;
1879
- width: 6rem;
1880
- -o-object-fit: cover;
1881
- object-fit: cover;
1882
- }
1883
- .khb_img-wrapper-del {
1884
- position: absolute;
1885
- top: -0.5rem;
1886
- right: -0.5rem;
1887
- display: flex;
1888
- height: 1.25rem;
1889
- width: 1.25rem;
1890
- cursor: pointer;
1891
- align-items: center;
1892
- justify-content: center;
1893
- border-radius: 9999px;
1894
- --tw-bg-opacity: 1;
1895
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
1896
- }
1897
- .khb_img-text-wrapper {
1898
- display: flex;
1899
- font-size: 0.875rem;
1900
- line-height: 1.25rem;
1901
- --tw-text-opacity: 1;
1902
- color: rgb(75 85 99 / var(--tw-text-opacity));
1903
- }
1904
- .khb_img-text-label {
1905
- position: relative;
1906
- border-radius: 0.375rem;
1907
- font-weight: 500;
1908
- }
1909
- .khb_img-text-label:focus-within {
1910
- outline: 2px solid transparent;
1911
- outline-offset: 2px;
1912
- }
1913
- .khb_img-text-1 {
1914
- padding-left: 0.25rem;
1915
- --tw-text-opacity: 1;
1916
- color: rgb(107 114 128 / var(--tw-text-opacity));
1917
- }
1918
- .khb_img-text-2 {
1919
- font-size: 0.75rem;
1920
- line-height: 1rem;
1921
- --tw-text-opacity: 1;
1922
- color: rgb(107 114 128 / var(--tw-text-opacity));
1923
- }
1924
- .khb_img-upload-wrapper-3 {
1925
- margin-top: 1.5rem;
1926
- cursor: pointer;
1927
- border-radius: 0.5rem;
1928
- border-width: 1px;
1929
- --tw-border-opacity: 1;
1930
- border-color: rgb(255 255 255 / var(--tw-border-opacity));
1931
- padding: 0.75rem;
1932
- }
1933
- /* \End of Image Upload */
1934
-
1935
- /* Switch */
1936
- .khb_switch {
1937
- position: relative;
1938
- display: inline-block;
1939
- width: 60px;
1940
- height: 30px;
1941
- }
1942
- .khb_switch input {
1943
- opacity: 0;
1944
- width: 0;
1945
- height: 0;
1946
- }
1947
- .khb_switch .slider {
1948
- position: absolute;
1949
- cursor: pointer;
1950
- top: 0;
1951
- left: 0;
1952
- right: 0;
1953
- bottom: 0;
1954
- background-color: #888;
1955
- transition: all 0.4s ease-in;
1956
- }
1957
- .khb_switch .slider:before {
1958
- position: absolute;
1959
- content: "";
1960
- height: 22px;
1961
- width: 22px;
1962
- left: 5px;
1963
- bottom: 4px;
1964
- background-color: #fff;
1965
- transition: all 0.2s ease-in;
1966
- box-shadow: 0px 0px 6px #00000029;
1967
- /* background-image: url(../public/images/close.png); */
1968
- /* background-repeat: no-repeat; */
1969
- /* background-position: center; */
1970
- }
1971
- /* Switch Rounded sliders */
1972
- .khb_switch .slider.round {
1973
- border-radius: 34px;
1974
- }
1975
- .khb_switch .slider.round:before {
1976
- border-radius: 50%;
1977
- }
1978
- input:checked + .slider {
1979
- background-color: #16a34a;
1980
- }
1981
- input:focus + .slider {
1982
- box-shadow: 0 0 1px #16a34a;
1983
- }
1984
- input:checked + .slider:before {
1985
- transform: translateX(28px);
1986
- /* background-image: url(../public/images/tick.png);
1987
- background-repeat: no-repeat;
1988
- background-position: center; */
1989
- }
1990
- /* \ End of Switch */
1991
-
1992
- .khb_DND-items > :not([hidden]) ~ :not([hidden]) {
1993
- --tw-space-y-reverse: 0;
1994
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1995
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1996
- }
1997
- .khb_DND-item-text {
1998
- overflow: hidden;
1999
- text-overflow: ellipsis;
2000
- white-space: nowrap;
2001
- font-size: 1rem;
2002
- font-weight: 500;
2003
- line-height: 1.5rem;
2004
- --tw-text-opacity: 1;
2005
- color: rgb(0 0 0 / var(--tw-text-opacity));
2006
- }
2007
- .khb_DND-item {
2008
- cursor: pointer;
2009
- overflow: hidden;
2010
- border-radius: 0.375rem;
2011
- border-width: 1px;
2012
- --tw-border-opacity: 1;
2013
- border-color: rgb(100 116 139 / var(--tw-border-opacity));
2014
- --tw-bg-opacity: 1;
2015
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2016
- padding: 0.75rem;
2017
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2018
- transition-duration: 200ms;
2019
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2020
- }
2021
- .khb_DND-item:hover {
2022
- --tw-border-opacity: 1;
2023
- border-color: rgb(96 165 250 / var(--tw-border-opacity));
2024
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2025
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
2026
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2027
- }
2028
-
2029
- /* Tabs */
2030
- .khb_tabs-container {
2031
- border-radius: 0.25rem;
2032
- border-width: 1px;
2033
- padding: 0.75rem;
2034
- }
2035
- .khb-tabs {
2036
- margin-bottom: 0.5rem;
2037
- }
2038
- .khb_tabs-item {
2039
- display: flex;
2040
- cursor: pointer;
2041
- flex-direction: column;
2042
- align-self: center;
2043
- border-radius: 0.375rem;
2044
- --tw-bg-opacity: 1;
2045
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
2046
- padding: 0.5rem;
2047
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2048
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2049
- transition-duration: 150ms;
2050
- }
2051
- .khb_tabs-item:hover {
2052
- cursor: pointer;
2053
- --tw-bg-opacity: 1;
2054
- background-color: rgb(209 213 219 / var(--tw-bg-opacity));
2055
- }
2056
- .khb_tabs-input {
2057
- min-width: 0px;
2058
- cursor: pointer;
2059
- white-space: pre-wrap;
2060
- background-color: transparent;
2061
- font-weight: 500;
2062
- --tw-text-opacity: 1;
2063
- color: rgb(0 0 0 / var(--tw-text-opacity));
2064
- }
2065
- .khb_tabs-input:focus {
2066
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2067
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2068
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2069
- }
2070
- .khb_tabs-item-selected {
2071
- --tw-bg-opacity: 1;
2072
- background-color: rgb(209 213 219 / var(--tw-bg-opacity));
2073
- font-weight: 500;
2074
- }
2075
- .khb_tabs-remove {
2076
- --tw-text-opacity: 1;
2077
- color: rgb(220 38 38 / var(--tw-text-opacity));
2078
- }
2079
- .khb_tabs-remove:hover {
2080
- --tw-text-opacity: 1;
2081
- color: rgb(185 28 28 / var(--tw-text-opacity));
2082
- }
2083
- .khb_tabs-remove:focus {
2084
- --tw-ring-opacity: 1;
2085
- --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
2086
- }
2087
- .khb_tabs-add {
2088
- margin: 0.25rem;
2089
- border-radius: 0.5rem;
2090
- text-align: center;
2091
- font-weight: 500;
2092
- }
2093
- .khb_tabs-add:focus {
2094
- outline: 2px solid transparent;
2095
- outline-offset: 2px;
2096
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2097
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2098
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2099
- }
2100
- .khb_tabs-add:disabled {
2101
- cursor: not-allowed;
2102
- }
2103
- .khb_tabs-add {
2104
- --tw-bg-opacity: 1;
2105
- background-color: rgb(29 78 216 / var(--tw-bg-opacity));
2106
- --tw-text-opacity: 1;
2107
- color: rgb(255 255 255 / var(--tw-text-opacity));
2108
- }
2109
- .khb_tabs-add:hover {
2110
- --tw-bg-opacity: 1;
2111
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
2112
- }
2113
- .khb_tabs-add:focus {
2114
- --tw-ring-opacity: 1;
2115
- --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
2116
- }
2117
- .khb_tabs-add:disabled {
2118
- --tw-bg-opacity: 1;
2119
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
2120
- }
2121
- .khb_tabs-add {
2122
- padding-left: 0.375rem;
2123
- padding-right: 0.375rem;
2124
- padding-top: 0.25rem;
2125
- padding-bottom: 0.25rem;
2126
- font-size: 0.75rem;
2127
- line-height: 1rem;
2128
- }
2129
- .khb_tabs-list {
2130
- display: flex;
2131
- flex-wrap: wrap;
2132
- -moz-column-gap: 1rem;
2133
- column-gap: 1rem;
2134
- row-gap: 0.625rem;
2135
- }
2136
- .khb_tabs-body {
2137
- padding-top: 0.5rem;
2138
- }
2139
- /* Confirm Popover */
2140
- .khb_confirm-popover {
2141
- position: relative;
2142
- z-index: 20;
2143
- border-radius: 0.25rem;
2144
- border-width: 1px;
2145
- --tw-bg-opacity: 1;
2146
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2147
- padding-left: 1rem;
2148
- padding-right: 1rem;
2149
- padding-top: 0.625rem;
2150
- padding-bottom: 0.625rem;
2151
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2152
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
2153
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2154
- }
2155
- .khb_confirm-popover-content {
2156
- display: grid;
2157
- grid-template-columns: repeat(1, minmax(0, 1fr));
2158
- gap: 0.375rem;
2159
- }
2160
- .khb_confirm-popover-title {
2161
- font-weight: 700;
2162
- }
2163
- .khb_confirm-popover-footer {
2164
- display: flex;
2165
- justify-content: center;
2166
- }
2167
- /* SrcSet */
2168
- .khb_srcset-remove {
2169
- height: 1.75rem;
2170
- width: 1.75rem;
2171
- }
2172
- /* End of SrcSet */
2173
- .hover\:border-blue-400:hover {
2174
- --tw-border-opacity: 1;
2175
- border-color: rgb(96 165 250 / var(--tw-border-opacity));
2176
- }
2177
- .hover\:bg-blue-800:hover {
2178
- --tw-bg-opacity: 1;
2179
- background-color: rgb(30 64 175 / var(--tw-bg-opacity));
2180
- }
2181
- .hover\:bg-gray-100:hover {
2182
- --tw-bg-opacity: 1;
2183
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
2184
- }
2185
- .hover\:bg-green-800:hover {
2186
- --tw-bg-opacity: 1;
2187
- background-color: rgb(22 101 52 / var(--tw-bg-opacity));
2188
- }
2189
- .hover\:bg-red-800:hover {
2190
- --tw-bg-opacity: 1;
2191
- background-color: rgb(153 27 27 / var(--tw-bg-opacity));
2192
- }
2193
- .hover\:bg-gray-200:hover {
2194
- --tw-bg-opacity: 1;
2195
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
2196
- }
2197
- .hover\:text-red-700:hover {
2198
- --tw-text-opacity: 1;
2199
- color: rgb(185 28 28 / var(--tw-text-opacity));
2200
- }
2201
- .hover\:shadow:hover {
2202
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2203
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
2204
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2205
- }
2206
- .focus\:border-blue-500:focus {
2207
- --tw-border-opacity: 1;
2208
- border-color: rgb(59 130 246 / var(--tw-border-opacity));
2209
- }
2210
- .focus\:outline-none:focus {
2211
- outline: 2px solid transparent;
2212
- outline-offset: 2px;
2213
- }
2214
- .focus\:ring-1:focus {
2215
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2216
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2217
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2218
- }
2219
- .focus\:ring-blue-500:focus {
2220
- --tw-ring-opacity: 1;
2221
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
2222
- }
2223
- @media (min-width: 640px) {
2224
-
2225
- .sm\:my-8 {
2226
- margin-top: 2rem;
2227
- margin-bottom: 2rem;
2228
- }
2229
-
2230
- .sm\:-ml-10 {
2231
- margin-left: -2.5rem;
2232
- }
2233
-
2234
- .sm\:block {
2235
- display: block;
2236
- }
2237
-
2238
- .sm\:w-full {
2239
- width: 100%;
2240
- }
2241
-
2242
- .sm\:max-w-xl {
2243
- max-width: 36rem;
2244
- }
2245
-
2246
- .sm\:p-0 {
2247
- padding: 0px;
2248
- }
2249
-
2250
- .sm\:px-6 {
2251
- padding-left: 1.5rem;
2252
- padding-right: 1.5rem;
2253
- }
2254
-
2255
- .sm\:align-middle {
2256
- vertical-align: middle;
2257
- }
2258
- }