@dejwcake/craftable 0.0.1

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 (49) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +10 -0
  3. package/dist/admin/Admin.js +42 -0
  4. package/dist/auth/Form.js +15 -0
  5. package/dist/base-components/Form/BaseForm.js +392 -0
  6. package/dist/base-components/Form/BaseUpload.js +188 -0
  7. package/dist/base-components/Form/bootstrap.js +21 -0
  8. package/dist/base-components/Listing/BaseListing.js +454 -0
  9. package/dist/base-components/Listing/components/Pagination.js +105 -0
  10. package/dist/base-components/Listing/components/Sortable.js +48 -0
  11. package/dist/base-components/Listing/components/UserDetailTooltip.js +55 -0
  12. package/dist/index.js +70 -0
  13. package/dist/overrides/trumbowyg.edit-embed-template.js +72 -0
  14. package/dist/overrides/trumbowyg.reupload.js +146 -0
  15. package/dist/overrides/trumbowyg.template.js +67 -0
  16. package/dist/translation/Form.js +15 -0
  17. package/dist/translation/Listing.js +283 -0
  18. package/dist/ui/index.js +33 -0
  19. package/img/favicon.png +0 -0
  20. package/img/logo.png +0 -0
  21. package/package.json +64 -0
  22. package/scss/_images.scss +18 -0
  23. package/scss/_variables.scss +17 -0
  24. package/scss/app.scss +9 -0
  25. package/scss/overrides/_alerts.scss +19 -0
  26. package/scss/overrides/_badges.scss +15 -0
  27. package/scss/overrides/_buttons.scss +62 -0
  28. package/scss/overrides/_cards.scss +72 -0
  29. package/scss/overrides/_checkboxes.scss +84 -0
  30. package/scss/overrides/_forms.scss +231 -0
  31. package/scss/overrides/_index.scss +19 -0
  32. package/scss/overrides/_keyframes.scss +23 -0
  33. package/scss/overrides/_layout.scss +47 -0
  34. package/scss/overrides/_media-wysiwyg.scss +111 -0
  35. package/scss/overrides/_modal.scss +26 -0
  36. package/scss/overrides/_multiselect.scss +39 -0
  37. package/scss/overrides/_nav.scss +87 -0
  38. package/scss/overrides/_notifications.scss +7 -0
  39. package/scss/overrides/_pagination.scss +38 -0
  40. package/scss/overrides/_switches.scss +23 -0
  41. package/scss/overrides/_tables.scss +64 -0
  42. package/scss/overrides/_text.scss +15 -0
  43. package/scss/overrides/_wysiwyg.scss +62 -0
  44. package/scss/styles/_auth.scss +92 -0
  45. package/scss/styles/_custom.scss +1 -0
  46. package/scss/styles/_index.scss +5 -0
  47. package/scss/styles/_legacy.scss +87 -0
  48. package/scss/styles/_others.scss +604 -0
  49. package/scss/vendor/_index.scss +4 -0
@@ -0,0 +1,604 @@
1
+ // Uncategorised styles, will refactor if it gets bigger
2
+ .avatar-initials {
3
+ background-color: $primary;
4
+ color: white;
5
+ display: inline-block;
6
+ margin: 0 10px;
7
+ letter-spacing: 0;
8
+ width: 35px;
9
+ height: 35px;
10
+ line-height: 35px;
11
+ border-radius: 100%;
12
+ text-align: center;
13
+ }
14
+
15
+ .no-items-found {
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ justify-content: center;
20
+ padding: 50px 0;
21
+ &>i {
22
+ color: rgba(0, 0, 0, 0.2);
23
+ margin-bottom: 30px;
24
+ font-size: 70px;
25
+ }
26
+ h3 {
27
+ font-size: 15px;
28
+ font-weight: 600;
29
+ text-align: center;
30
+ }
31
+ p {
32
+ color: #7e8990;
33
+ font-weight: 500;
34
+ text-align: center;
35
+ }
36
+ }
37
+
38
+ .welcome-quote {
39
+ display: flex;
40
+ justify-content: center;
41
+ align-items: center;
42
+ height: calc(100vh - 200px);
43
+ min-height: 200px;
44
+ blockquote {
45
+ font-family: Georgia, serif;
46
+ font-size: 25px;
47
+ font-style: italic;
48
+ max-width: 100%;
49
+ margin: 0.25em 0;
50
+ padding: 0.25em 0 0.35em 40px;
51
+ line-height: 1.45;
52
+ position: relative;
53
+ color: #383838;
54
+ }
55
+ blockquote:before {
56
+ display: block;
57
+ content: "\201C";
58
+ font-size: 89px;
59
+ position: absolute;
60
+ left: -15px;
61
+ top: -20px;
62
+ color: #7a7a7a;
63
+ }
64
+ blockquote cite {
65
+ color: #999999;
66
+ font-size: 18px;
67
+ display: block;
68
+ margin-top: 10px;
69
+ }
70
+ blockquote cite:before {
71
+ content: "\2014 \2009";
72
+ }
73
+ }
74
+
75
+ .localization-error {
76
+ background-image: $icon-error-triangle;
77
+ position: relative;
78
+ top: 6px;
79
+ background-size: contain;
80
+ background-repeat: no-repeat;
81
+ background-position: center;
82
+ width: 20px;
83
+ height: 20px;
84
+ display: inline-block;
85
+ margin-right: 5px;
86
+ }
87
+
88
+ .avatar-upload {
89
+ display: inline-block;
90
+ .vue-dropzone.dropzone {
91
+ position: relative;
92
+ width: 200px;
93
+ height: 200px;
94
+ border-radius: 200px;
95
+ background: #B0C4DA;
96
+ color: white;
97
+ overflow: hidden;
98
+
99
+ &:hover {
100
+ background-color: #4273FA;
101
+ }
102
+
103
+
104
+ .dz-preview {
105
+ position: absolute;
106
+ top: 0;
107
+ left: 0;
108
+ margin: 0;
109
+
110
+ .dz-image img + p {
111
+ display: none;
112
+ }
113
+ }
114
+
115
+ .dz-details {
116
+ .dz-size, .dz-filename{
117
+ display: none !important;
118
+ }
119
+ }
120
+
121
+ .dz-error-message {
122
+ display: none !important;
123
+ }
124
+
125
+ .dz-error-mark {
126
+ top: 20% !important;
127
+ }
128
+
129
+ .dz-remove {
130
+ width: 60% !important;
131
+ height: 40px !important;
132
+ bottom: 40px !important;
133
+ top: auto !important;
134
+ left: 20% !important;
135
+ right: 20% !important;
136
+ margin: 0 !important;
137
+ }
138
+
139
+ .dz-message,.dz-message * {
140
+ color: white;
141
+ font-weight: bold;
142
+ font-size: 14px;
143
+ line-height: 1.2;
144
+ }
145
+
146
+ i {
147
+ color: white !important;
148
+ }
149
+ }
150
+ }
151
+
152
+ .avatar-photo {
153
+ display: inline-block;
154
+ width: 35px;
155
+ height: 35px;
156
+ border-radius: 100%;
157
+ margin: 0 10px;
158
+ }
159
+
160
+ .fa-spinner {
161
+ animation: spin 1s linear infinite;
162
+ }
163
+
164
+ .has-access i {
165
+ font-size: 20px;
166
+ }
167
+
168
+ .file-field {
169
+ position: relative;
170
+ }
171
+
172
+ .file-field input[type=file] {
173
+ position: absolute;
174
+ top: 0;
175
+ right: 0;
176
+ left: 0;
177
+ bottom: 0;
178
+ width: 100%;
179
+ margin: 0;
180
+ padding: 0;
181
+ cursor: pointer;
182
+ opacity: 0;
183
+ }
184
+
185
+ .file-field .btn-primary {
186
+ height: 33px;
187
+ overflow: hidden;
188
+ text-overflow: ellipsis;
189
+ white-space: nowrap;
190
+ }
191
+
192
+ .file-field span {
193
+ line-height: 2.0;
194
+ }
195
+
196
+ .form-check-label {
197
+ padding-left: 0.25rem;
198
+ }
199
+
200
+ .label-import {
201
+ width: 78%;
202
+ }
203
+
204
+ .import-radio {
205
+ box-sizing: border-box;
206
+ padding: 0;
207
+ vertical-align: top;
208
+ position: relative;
209
+ top: 5px;
210
+ }
211
+
212
+ .import-checkbox {
213
+ padding-left: 5px;
214
+ }
215
+
216
+ .import-footer {
217
+ border: none;
218
+ }
219
+
220
+ .translations-export {
221
+ margin-left: 15px;
222
+ }
223
+
224
+ .tranlations-export-dropdown {
225
+ position: relative !important;
226
+ left: -14px !important;
227
+ top: -36px !important;
228
+ }
229
+
230
+ .dropdown-menu {
231
+ .dropdown-item-label {
232
+ display: block;
233
+ width: 100%;
234
+
235
+ clear: both;
236
+ font-weight: normal;
237
+ color: #151b1e;
238
+ text-align: inherit;
239
+ white-space: nowrap;
240
+ background: none;
241
+ border: 0;
242
+
243
+ position: relative;
244
+ border-bottom: 1px solid #F0F2F4;
245
+ label {
246
+ width: 100%;
247
+ padding: 10px 20px;
248
+ padding-left: 40px;
249
+ margin: 0;
250
+
251
+ &:before {
252
+ left: 10px;
253
+ top: 10px;
254
+ }
255
+
256
+ &:after {
257
+ top: 15px;
258
+ left: 15px;
259
+ }
260
+ }
261
+ }
262
+
263
+ .btn.btn-primary {
264
+ text-align: center;
265
+ color: white;
266
+ border-radius: 0;
267
+ }
268
+ }
269
+
270
+ @media (max-width: 991px) {
271
+ .avatar-initials {
272
+ display: none;
273
+ }
274
+ }
275
+
276
+ @media (max-width: 450px) {
277
+ .no-items-found {
278
+ padding: 10px 0;
279
+ }
280
+ }
281
+
282
+ .user-avatar, .user-info{
283
+ display: inline-block;
284
+ vertical-align: middle;
285
+ }
286
+
287
+ .avatar-full-name {
288
+ display: inline-block;
289
+ vertical-align: middle;
290
+ margin-left: 5px;
291
+ }
292
+
293
+ .user-avatar {
294
+ width: 75px;
295
+ height: 75px;
296
+ text-align: center;
297
+
298
+ img, .avatar-initials {
299
+ margin: 0;
300
+ width: 100%;
301
+ height: 100%;
302
+ }
303
+
304
+ img {
305
+ border-radius: 75px;
306
+ }
307
+
308
+ .avatar-initials {
309
+ line-height: 75px;
310
+ text-align: center;
311
+ font-size: 2rem;
312
+ }
313
+ }
314
+
315
+ .user-info {
316
+ text-align: left;
317
+ margin: 0 5px;
318
+
319
+ h3 {
320
+ font-size: 1.3rem;
321
+ color: #536c79;
322
+ margin: 0;
323
+ padding:0;
324
+ line-height: 1.2;
325
+ }
326
+
327
+ a {
328
+ display: block;
329
+ margin: 0;
330
+ font-size: 0.8rem;
331
+ line-height: 1.2;
332
+ }
333
+
334
+ p {
335
+ color: #536c79;
336
+ font-size: 0.8rem;
337
+ margin: 5px 0 0 0;
338
+ }
339
+ }
340
+ .tooltip {
341
+ display: block !important;
342
+ z-index: 10000;
343
+ max-width: 800px;
344
+
345
+ .tooltip-inner {
346
+ background: black;
347
+ color: white;
348
+ border-radius: 16px;
349
+ padding: 5px 10px 4px;
350
+ max-width: 800px;
351
+ }
352
+
353
+ .tooltip-arrow {
354
+ width: 0;
355
+ height: 0;
356
+ border-style: solid;
357
+ position: absolute;
358
+ margin: 5px;
359
+ border-color: black;
360
+ z-index: 1;
361
+ }
362
+
363
+ &[x-placement^="top"] {
364
+ margin-bottom: 5px;
365
+
366
+ .tooltip-arrow {
367
+ border-width: 5px 5px 0 5px;
368
+ border-left-color: transparent !important;
369
+ border-right-color: transparent !important;
370
+ border-bottom-color: transparent !important;
371
+ bottom: -5px;
372
+ left: calc(50% - 5px);
373
+ margin-top: 0;
374
+ margin-bottom: 0;
375
+ }
376
+ }
377
+
378
+ &[x-placement^="bottom"] {
379
+ margin-top: 5px;
380
+
381
+ .tooltip-arrow {
382
+ border-width: 0 5px 5px 5px;
383
+ border-left-color: transparent !important;
384
+ border-right-color: transparent !important;
385
+ border-top-color: transparent !important;
386
+ top: -5px;
387
+ left: calc(50% - 5px);
388
+ margin-top: 0;
389
+ margin-bottom: 0;
390
+ }
391
+ }
392
+
393
+ &[x-placement^="right"] {
394
+ margin-left: 5px;
395
+
396
+ .tooltip-arrow {
397
+ border-width: 5px 5px 5px 0;
398
+ border-left-color: transparent !important;
399
+ border-top-color: transparent !important;
400
+ border-bottom-color: transparent !important;
401
+ left: -5px;
402
+ top: calc(50% - 5px);
403
+ margin-left: 0;
404
+ margin-right: 0;
405
+ }
406
+ }
407
+
408
+ &[x-placement^="left"] {
409
+ margin-right: 5px;
410
+
411
+ .tooltip-arrow {
412
+ border-width: 5px 0 5px 5px;
413
+ border-top-color: transparent !important;
414
+ border-right-color: transparent !important;
415
+ border-bottom-color: transparent !important;
416
+ right: -5px;
417
+ top: calc(50% - 5px);
418
+ margin-left: 0;
419
+ margin-right: 0;
420
+ }
421
+ }
422
+
423
+ &.popover {
424
+ $color: #f9f9f9;
425
+
426
+ .popover-inner {
427
+ background: $color;
428
+ color: black;
429
+ padding: 24px;
430
+ border-radius: 5px;
431
+ box-shadow: 0 5px 30px rgba(black, .1);
432
+ }
433
+
434
+ .popover-arrow {
435
+ border-color: $color;
436
+ }
437
+ }
438
+
439
+ &[aria-hidden='true'] {
440
+ visibility: hidden;
441
+ opacity: 0;
442
+ transition: opacity .15s, visibility .15s;
443
+ }
444
+
445
+ &[aria-hidden='false'] {
446
+ visibility: visible;
447
+ opacity: 1;
448
+ transition: opacity .15s;
449
+ }
450
+ }
451
+
452
+ .tooltip {
453
+ display: block !important;
454
+ z-index: 10000;
455
+ }
456
+
457
+ .tooltip .tooltip-inner {
458
+ background: black;
459
+ color: white;
460
+ border-radius: 16px;
461
+ padding: 5px 10px 4px;
462
+ }
463
+
464
+ .tooltip .tooltip-arrow {
465
+ width: 0;
466
+ height: 0;
467
+ border-style: solid;
468
+ position: absolute;
469
+ margin: 5px;
470
+ border-color: black;
471
+ z-index: 1;
472
+ }
473
+
474
+ .tooltip[x-placement^="top"] {
475
+ margin-bottom: 5px;
476
+ }
477
+
478
+ .tooltip[x-placement^="top"] .tooltip-arrow {
479
+ border-width: 5px 5px 0 5px;
480
+ border-left-color: transparent !important;
481
+ border-right-color: transparent !important;
482
+ border-bottom-color: transparent !important;
483
+ bottom: -5px;
484
+ left: calc(50% - 5px);
485
+ margin-top: 0;
486
+ margin-bottom: 0;
487
+ }
488
+
489
+ .tooltip[x-placement^="bottom"] {
490
+ margin-top: 5px;
491
+ }
492
+
493
+ .tooltip[x-placement^="bottom"] .tooltip-arrow {
494
+ border-width: 0 5px 5px 5px;
495
+ border-left-color: transparent !important;
496
+ border-right-color: transparent !important;
497
+ border-top-color: transparent !important;
498
+ top: -5px;
499
+ left: calc(50% - 5px);
500
+ margin-top: 0;
501
+ margin-bottom: 0;
502
+ }
503
+
504
+ .tooltip[x-placement^="right"] {
505
+ margin-left: 5px;
506
+ }
507
+
508
+ .tooltip[x-placement^="right"] .tooltip-arrow {
509
+ border-width: 5px 5px 5px 0;
510
+ border-left-color: transparent !important;
511
+ border-top-color: transparent !important;
512
+ border-bottom-color: transparent !important;
513
+ left: -5px;
514
+ top: calc(50% - 5px);
515
+ margin-left: 0;
516
+ margin-right: 0;
517
+ }
518
+
519
+ .tooltip[x-placement^="left"] {
520
+ margin-right: 5px;
521
+ }
522
+
523
+ .tooltip[x-placement^="left"] .tooltip-arrow {
524
+ border-width: 5px 0 5px 5px;
525
+ border-top-color: transparent !important;
526
+ border-right-color: transparent !important;
527
+ border-bottom-color: transparent !important;
528
+ right: -5px;
529
+ top: calc(50% - 5px);
530
+ margin-left: 0;
531
+ margin-right: 0;
532
+ }
533
+
534
+ .tooltip.popover .popover-inner {
535
+ background: #f9f9f9;
536
+ color: black;
537
+ padding: 24px;
538
+ border-radius: 5px;
539
+ box-shadow: 0 5px 30px rgba(black, .1);
540
+ }
541
+
542
+ .tooltip.popover .popover-arrow {
543
+ border-color: #C8C8C8;
544
+ }
545
+
546
+ .tooltip[aria-hidden='true'] {
547
+ visibility: hidden;
548
+ opacity: 0;
549
+ transition: opacity .15s, visibility .15s;
550
+ }
551
+
552
+ .tooltip[aria-hidden='false'] {
553
+ visibility: visible;
554
+ opacity: 1;
555
+ transition: opacity .15s;
556
+ }
557
+
558
+ .fixed-cta-button {
559
+ position: fixed;
560
+ bottom: 20px;
561
+ right: 20px;
562
+ z-index: 99999;
563
+
564
+ width: 56px;
565
+ height: 56px;
566
+ border-radius: 56px;
567
+ font-size: 12px;
568
+
569
+ -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
570
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
571
+ i {
572
+ display: block;
573
+ margin-bottom: 2px;
574
+ font-size: 13px;
575
+ }
576
+ }
577
+
578
+ .user-info-span {
579
+ color: #536c79;
580
+ font-size: 0.8rem;
581
+ margin: 5px 0 0 0;
582
+ }
583
+
584
+ .bulk-checkbox {
585
+ width: 1%;
586
+ white-space: nowrap;
587
+ }
588
+
589
+ .bulk-info {
590
+ margin-bottom: 0.5rem;
591
+ margin-top: 0.5rem;
592
+ }
593
+
594
+ .bulk-checkbox label {
595
+ display: inline !important;
596
+ }
597
+
598
+ .bg-bulk {
599
+ background: #edf3fe;
600
+ }
601
+
602
+ .bg-bulk-info {
603
+ background: $mutedText;
604
+ }
@@ -0,0 +1,4 @@
1
+ @import '~@coreui/icons/css/coreui-icons.min.css';
2
+ @import '~font-awesome/scss/font-awesome.scss';
3
+ @import '~simple-line-icons/scss/simple-line-icons.scss';
4
+ @import "~@coreui/coreui/scss/coreui";