@enki-tek/fms-web-components 0.1.63 → 0.1.64

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 (11) hide show
  1. package/components/Pagination/OldPagination.svelte +750 -0
  2. package/components/Pagination/OldPagination.svelte.d.ts +21 -0
  3. package/components/Pagination/Pagination.stories.d.ts +1 -1
  4. package/components/Pagination/Pagination.stories.js +1 -1
  5. package/components/Pagination/Pagination.svelte +59 -739
  6. package/components/Pagination/Pagination.svelte.d.ts +3 -2
  7. package/index.d.ts +1 -1
  8. package/index.js +1 -1
  9. package/lib/common.d.ts +1 -0
  10. package/lib/common.js +4 -0
  11. package/package.json +4 -2
package/components/Pagination/Pagination.svelte CHANGED
@@ -1,750 +1,70 @@
1
- <script>import { onMount } from "svelte";
2
- import { Pagination, PaginationItem, PaginationLink, Icon } from "sveltestrap";
1
+ <script>import { Pagination, PaginationItem, PaginationLink, Icon } from "sveltestrap";
3
2
  import { createEventDispatcher } from "svelte";
3
+ import { first, last, range } from "lodash";
4
+ import { isMobile } from "../../lib/common";
4
5
  const dispatch = createEventDispatcher();
5
- const DEFAULT_PAGE_COUNT = 5;
6
- export let noOfItems = 300;
7
- export let itemPerPage = 30;
8
- export let currentPage = 1;
6
+ export let PAGE_GUTTER = isMobile() ? 1 : 2;
7
+ export let noOfItems;
8
+ export let itemPerPage = 10;
9
+ export let page = 1;
9
10
  export let size = "md";
10
- let pageCount = Math.ceil(noOfItems / itemPerPage);
11
- let pagesToShow = pageCount > DEFAULT_PAGE_COUNT ? DEFAULT_PAGE_COUNT : pageCount;
12
- let pageNumbers = [];
13
- let endPage;
14
- function calculatePageNumbers() {
15
- const halfPagesToShow = Math.floor(pagesToShow / 2);
16
- let startPage = currentPage - halfPagesToShow;
17
- endPage = currentPage + halfPagesToShow;
18
- if (startPage <= 0) {
19
- startPage = 1;
20
- endPage = pagesToShow;
21
- }
22
- if (endPage > pageCount) {
23
- endPage = pageCount;
24
- startPage = pageCount - pagesToShow + 1;
25
- }
26
- pageNumbers = Array(endPage - startPage + 1).fill().map((_, idx) => startPage + idx);
27
- }
28
- onMount(() => {
29
- calculatePageNumbers();
30
- });
31
- function gotoPage(page) {
32
- currentPage = page;
11
+ $:
12
+ pageCount = Math.ceil((noOfItems || 0) / itemPerPage);
13
+ $:
14
+ pages = range(
15
+ page - PAGE_GUTTER > 0 ? page - PAGE_GUTTER : 1,
16
+ page + (PAGE_GUTTER + 1) > pageCount ? pageCount + 1 : page + (PAGE_GUTTER + 1)
17
+ ).filter((i) => i != 1 && i != pageCount);
18
+ const goTo = (num) => {
19
+ page = num;
33
20
  dispatch("pageChanged", page);
34
- calculatePageNumbers();
35
- }
36
- function prevPage() {
37
- if (currentPage > 1) {
38
- currentPage--;
39
- dispatch("pageChanged", currentPage);
40
- calculatePageNumbers();
41
- }
42
- }
43
- function nextPage() {
44
- if (currentPage < pageCount) {
45
- currentPage++;
46
- dispatch("pageChanged", currentPage);
47
- calculatePageNumbers();
48
- }
49
- }
21
+ };
50
22
  </script>
51
23
 
52
- <Pagination {size} ariaLabel="Page navigation example">
53
- <PaginationItem disabled={currentPage === 1} class="eradius custom-pagination-list">
54
- <PaginationLink previous href="#" class="custom-pagination-link-add" on:click={prevPage}
55
- ><Icon name="chevron-left" /></PaginationLink
24
+ {#if 1 < pageCount}
25
+ <Pagination {size}>
26
+ <PaginationItem disabled={page == 1} class="d-none d-sm-block">
27
+ <PaginationLink first href={'javascript:{}'} on:click={() => goTo(1)} />
28
+ </PaginationItem>
29
+ <PaginationItem disabled={page == 1}>
30
+ <PaginationLink previous href={'javascript:{}'} on:click={() => goTo(page - 1)} />
31
+ </PaginationItem>
32
+ <PaginationItem active={1 == page}
33
+ ><PaginationLink href={'javascript:{}'} on:click={() => goTo(1)}>1</PaginationLink
34
+ ></PaginationItem
56
35
  >
57
- </PaginationItem>
58
-
59
- {#each pageNumbers as page}
60
- <PaginationItem active={currentPage == page} class="eradius custom-pagination-list">
61
- <PaginationLink
62
- class="eradius efs-small custom-pagination-link"
63
- href="#"
64
- on:click={() => gotoPage(page)}>{page}</PaginationLink
36
+ {#if !!first(pages) && (first(pages) || 0) > 2}
37
+ <PaginationItem
38
+ ><PaginationLink href={'javascript:{}'} on:click={() => goTo((first(pages) || 0) - 1)}
39
+ >...</PaginationLink
40
+ ></PaginationItem
65
41
  >
66
- </PaginationItem>
67
- {/each}
68
-
69
- {#if currentPage < pageCount && endPage != pageCount}
70
- <span class="dots-span">......</span>
71
- <PaginationItem class="eradius custom-pagination-list">
72
- <PaginationLink
73
- class="eradius efs-small custom-pagination-link"
74
- href="#"
75
- on:click={() => gotoPage(pageCount)}>{pageCount}</PaginationLink
42
+ {/if}
43
+ {#each pages as val, pg}
44
+ <PaginationItem active={val == page}>
45
+ <PaginationLink href={'javascript:{}'} on:click={() => goTo(val)}>{val}</PaginationLink>
46
+ </PaginationItem>
47
+ {/each}
48
+ {#if !!last(pages) && (last(pages) || 0) < pageCount - 1}
49
+ <PaginationItem
50
+ ><PaginationLink href={'javascript:{}'} on:click={() => goTo((last(pages) || 0) + 1)}
51
+ >...</PaginationLink
52
+ ></PaginationItem
76
53
  >
54
+ {/if}
55
+ {#if pageCount > 1}
56
+ <PaginationItem active={pageCount == page}
57
+ ><PaginationLink href={'javascript:{}'} on:click={() => goTo(pageCount)}
58
+ >{pageCount}</PaginationLink
59
+ ></PaginationItem
60
+ >
61
+ {/if}
62
+ <PaginationItem disabled={pageCount == page}>
63
+ <PaginationLink next href={'javascript:{}'} on:click={() => goTo(page + 1)} />
77
64
  </PaginationItem>
78
- {/if}
79
-
80
- <PaginationItem disabled={currentPage === pageCount} class="eradius custom-pagination-list">
81
- <PaginationLink
82
- next
83
- href="#"
84
- class="eradius efs-small custom-pagination-link-add"
85
- on:click={nextPage}><Icon name="chevron-right" /></PaginationLink
86
- >
87
- </PaginationItem>
88
- </Pagination>
65
+ <PaginationItem disabled={pageCount == page} class="d-none d-sm-block">
66
+ <PaginationLink last href={'javascript:{}'} on:click={() => goTo(pageCount)} />
67
+ </PaginationItem>
68
+ </Pagination>
69
+ {/if}
89
70
 
90
- <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
91
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
92
- @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
93
- @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
94
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
95
- @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
96
- :global(.page-link:hover), :global(.custom-pagination-link-add), :global(.custom-pagination-link), :global(.custom-pagination-list) {
97
- border: 1px solid #E9ECEF;
98
- }
99
- :global(.pagination) {
100
- display: flex;
101
- padding-left: 0;
102
- list-style: none;
103
- gap: 5px;
104
- margin-top: 2rem;
105
- }
106
- :global(.custom-pagination-list) {
107
- display: flex;
108
- background: #ffffff;
109
- }
110
- :global(.custom-pagination-link) {
111
- display: flex;
112
- align-items: center;
113
- background: #ffffff;
114
- color: #6C757D;
115
- line-height: 16px;
116
- /* 100% */
117
- }
118
- :global(.custom-pagination-link-add) {
119
- display: flex;
120
- align-items: center;
121
- background: #ffffff;
122
- color: #adb5bd;
123
- line-height: 16px;
124
- /* 100% */
125
- }
126
- :global(.page-item.disabled .page-link) {
127
- color: #CED4DA;
128
- }
129
- :global(.pagination-lg .page-link) {
130
- padding: 12px 16px;
131
- font-size: 16px;
132
- }
133
- :global(.page-link:hover) {
134
- z-index: 2;
135
- color: #6C757D;
136
- background: #D1E7DD;
137
- }
138
- :global(.page-link:focus) {
139
- outline: 0;
140
- box-shadow: none;
141
- }
142
- :global(.page-item.active .page-link) {
143
- z-index: 3;
144
- color: #ffffff;
145
- background-color: #3AC82E;
146
- border-color: #00A855;
147
- }
148
- .dots-span {
149
- display: flex;
150
- align-items: end;
151
- color: #6C757D;
152
- }
153
- :global(.page-item:first-child .page-link) {
154
- border-top-left-radius: 4px;
155
- border-bottom-left-radius: 4px;
156
- }
157
- :global(.page-item:last-child .page-link) {
158
- border-top-right-radius: 4px;
159
- border-bottom-right-radius: 4px;
160
- }
161
- :global(.ebg-none) {
162
- background-color: #ffffff !important;
163
- }
164
- :global(.ebg-white) {
165
- background-color: #ffffff;
166
- }
167
- :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
168
- background-color: #3AC82E;
169
- }
170
- :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
171
- background-color: #00A855;
172
- }
173
- :global(.ebg-secondaryLight, .eactive-secondaryLight:active, .ehover-secondaryLight:hover) {
174
- background-color: #CBFFC7;
175
- }
176
- :global(.ebg-primary) {
177
- background-color: #00AEE5;
178
- }
179
- :global(.ebg-primaryDark) {
180
- background-color: #007FD8;
181
- }
182
- :global(.ebg-primaryLight) {
183
- background-color: #CEF3FF;
184
- }
185
- :global(.ebg-danger) {
186
- background-color: #FE4747;
187
- }
188
- :global(.ebg-dangerDark) {
189
- background-color: #B02A37;
190
- }
191
- :global(.ebg-dangerLight) {
192
- background-color: #f8d7da;
193
- }
194
- :global(.ebg-warning) {
195
- background-color: #FFBA3A;
196
- }
197
- :global(.ebg-warningDark) {
198
- background-color: #997404;
199
- color: #ffffff !important;
200
- }
201
- :global(.ebg-warningLight) {
202
- background-color: #FFF3CD;
203
- }
204
- :global(.ebg-info) {
205
- background-color: #0DCAF0;
206
- }
207
- :global(.ebg-infoDark) {
208
- background-color: #087990;
209
- }
210
- :global(.ebg-infoLight) {
211
- background-color: #9EEAF9;
212
- }
213
- :global(.ebg-success) {
214
- background-color: #00A96B;
215
- }
216
- :global(.ebg-successDark) {
217
- background-color: #146C43;
218
- }
219
- :global(.ebg-successLight) {
220
- background-color: #D1E7DD;
221
- }
222
- :global(.ebg-gray100) {
223
- background-color: #F8F9FA;
224
- }
225
- :global(.ebg-gray200) {
226
- background-color: #E9ECEF;
227
- }
228
- :global(.ebg-gray300) {
229
- background-color: #DEE2E6;
230
- }
231
- :global(.ebg-gray400) {
232
- background-color: #CED4DA;
233
- }
234
- :global(.ebg-gray500) {
235
- background-color: #adb5bd;
236
- }
237
- :global(.ebg-gray600) {
238
- background-color: #6C757D;
239
- }
240
- :global(.ebg-gray700) {
241
- background-color: #495057;
242
- }
243
- :global(.ebg-gray800) {
244
- background-color: #343A40;
245
- }
246
- :global(.ebg-gray900) {
247
- background-color: #212529;
248
- }
249
- :global(.ebg-green100) {
250
- background-color: #D1E7DD;
251
- }
252
- :global(.ebg-green200) {
253
- background-color: #A3CFBB;
254
- }
255
- :global(.ebg-green300) {
256
- background-color: #75B798;
257
- }
258
- :global(.ebg-green400) {
259
- background-color: #479F76;
260
- }
261
- :global(.ebg-green500) {
262
- background-color: #198754;
263
- }
264
- :global(.ebg-green600) {
265
- background-color: #146C43;
266
- }
267
- :global(.ebg-green700) {
268
- background-color: #0F5132;
269
- }
270
- :global(.ebg-green800) {
271
- background-color: #0A3622;
272
- }
273
- :global(.ebg-green900) {
274
- background-color: #051B11;
275
- }
276
- :global(.ebg-red100) {
277
- background-color: #F8D7DA;
278
- }
279
- :global(.ebg-red200) {
280
- background-color: #F1AEB5;
281
- }
282
- :global(.ebg-red300) {
283
- background-color: #EA868F;
284
- }
285
- :global(.ebg-red400) {
286
- background-color: #E35D6A;
287
- }
288
- :global(.ebg-red500) {
289
- background-color: #DC3545;
290
- }
291
- :global(.ebg-red600) {
292
- background-color: #B02A37;
293
- }
294
- :global(.ebg-red700) {
295
- background-color: #842029;
296
- }
297
- :global(.ebg-red800) {
298
- background-color: #58151C;
299
- }
300
- :global(.ebg-red900) {
301
- background-color: #2C0B0E;
302
- }
303
- :global(.ebg-yellow100) {
304
- background-color: #FFF3CD;
305
- }
306
- :global(.ebg-yellow200) {
307
- background-color: #FFE69C;
308
- }
309
- :global(.ebg-yellow300) {
310
- background-color: #FFDA6A;
311
- }
312
- :global(.ebg-yellow400) {
313
- background-color: #FFCD39;
314
- }
315
- :global(.ebg-yellow500) {
316
- background-color: #FFC107;
317
- }
318
- :global(.ebg-yellow600) {
319
- background-color: #CC9A06;
320
- }
321
- :global(.ebg-yellow700) {
322
- background-color: #997404;
323
- }
324
- :global(.ebg-yellow800) {
325
- background-color: #664D03;
326
- }
327
- :global(.ebg-yellow900) {
328
- background-color: #332701;
329
- }
330
- :global(.ebg-cyan100) {
331
- background-color: #CFF4FC;
332
- }
333
- :global(.ebg-cyan200) {
334
- background-color: #9EEAF9;
335
- }
336
- :global(.ebg-cyan300) {
337
- background-color: #6EDFF6;
338
- }
339
- :global(.ebg-cyan400) {
340
- background-color: #3DD5F3;
341
- }
342
- :global(.ebg-cyan500) {
343
- background-color: #0DCAF0;
344
- }
345
- :global(.ebg-cyan600) {
346
- background-color: #0AA2C0;
347
- }
348
- :global(.ebg-cyan700) {
349
- background-color: #087990;
350
- }
351
- :global(.ebg-cyan800) {
352
- background-color: #055160;
353
- }
354
- :global(.ebg-cyan900) {
355
- background-color: #032830;
356
- }
357
- .etext-white {
358
- color: #ffffff;
359
- }
360
- :global(.etext-dark) {
361
- color: #000000;
362
- }
363
- :global(.etext-secondary) {
364
- color: #3AC82E;
365
- }
366
- :global(.etext-secondaryDark) {
367
- color: #00A855;
368
- }
369
- :global(.etext-secondaryLight) {
370
- color: #CBFFC7;
371
- }
372
- :global(.etext-primary) {
373
- color: #00AEE5;
374
- }
375
- :global(.etext-primaryDark) {
376
- color: #007FD8;
377
- }
378
- :global(.etext-primaryLight) {
379
- color: #CEF3FF;
380
- }
381
- :global(.etext-danger) {
382
- color: #FE4747;
383
- }
384
- :global(.etext-dangerDark) {
385
- color: #B02A37;
386
- }
387
- :global(.etext-dangerLight) {
388
- color: #f8d7da;
389
- }
390
- :global(.etext-info) {
391
- color: #0DCAF0;
392
- }
393
- :global(.etext-infoDark) {
394
- color: #087990;
395
- }
396
- :global(.etext-infoLight) {
397
- color: #9EEAF9;
398
- }
399
- :global(.etext-success) {
400
- color: #00A96B;
401
- }
402
- :global(.etext-successDark) {
403
- color: #146C43;
404
- }
405
- :global(.etext-successLight) {
406
- color: #D1E7DD;
407
- }
408
- :global(.etext-warning) {
409
- color: #FFBA3A;
410
- }
411
- :global(.etext-warningDark) {
412
- color: #997404;
413
- }
414
- :global(.etext-warningLight) {
415
- color: #FFF3CD;
416
- }
417
- :global(.etext-gray100) {
418
- color: #F8F9FA;
419
- }
420
- :global(.etext-gray200) {
421
- color: #E9ECEF;
422
- }
423
- :global(.etext-gray300) {
424
- color: #DEE2E6;
425
- }
426
- :global(.etext-gray400) {
427
- color: #CED4DA;
428
- }
429
- :global(.etext-gray500) {
430
- color: #adb5bd;
431
- }
432
- :global(.etext-gray600) {
433
- color: #6C757D;
434
- }
435
- :global(.etext-gray700) {
436
- color: #495057;
437
- }
438
- :global(.etext-gray800) {
439
- color: #343A40;
440
- }
441
- :global(.etext-gray900) {
442
- color: #212529;
443
- }
444
- :global(.etext-green100) {
445
- color: #D1E7DD;
446
- }
447
- :global(.etext-green200) {
448
- color: #A3CFBB;
449
- }
450
- :global(.etext-green300) {
451
- color: #75B798;
452
- }
453
- :global(.etext-green400) {
454
- color: #479F76;
455
- }
456
- :global(.etext-green500) {
457
- color: #198754;
458
- }
459
- :global(.etext-green600) {
460
- color: #146C43;
461
- }
462
- :global(.etext-green700) {
463
- color: #0F5132;
464
- }
465
- :global(.etext-green800) {
466
- color: #0A3622;
467
- }
468
- :global(.etext-green900) {
469
- color: #051B11;
470
- }
471
- :global(.etext-red100) {
472
- color: #F8D7DA;
473
- }
474
- :global(.etext-red200) {
475
- color: #F1AEB5;
476
- }
477
- :global(.etext-red300) {
478
- color: #EA868F;
479
- }
480
- :global(.etext-red400) {
481
- color: #E35D6A;
482
- }
483
- :global(.etext-red500) {
484
- color: #DC3545;
485
- }
486
- :global(.etext-red600) {
487
- color: #B02A37;
488
- }
489
- :global(.etext-red700) {
490
- color: #842029;
491
- }
492
- :global(.etext-red800) {
493
- color: #58151C;
494
- }
495
- :global(.etext-red900) {
496
- color: #2C0B0E;
497
- }
498
- :global(.etext-yellow100) {
499
- color: #FFF3CD;
500
- }
501
- :global(.etext-yellow200) {
502
- color: #FFE69C;
503
- }
504
- :global(.etext-yellow300) {
505
- color: #FFDA6A;
506
- }
507
- :global(.etext-yellow400) {
508
- color: #FFCD39;
509
- }
510
- :global(.etext-yellow500) {
511
- color: #FFC107;
512
- }
513
- :global(.etext-yellow600) {
514
- color: #CC9A06;
515
- }
516
- :global(.etext-yellow700) {
517
- color: #997404;
518
- }
519
- :global(.etext-yellow800) {
520
- color: #664D03;
521
- }
522
- :global(.etext-yellow900) {
523
- color: #332701;
524
- }
525
- :global(.etext-cyan100) {
526
- color: #CFF4FC;
527
- }
528
- :global(.etext-cyan200) {
529
- color: #9EEAF9;
530
- }
531
- :global(.etext-cyan300) {
532
- color: #6EDFF6;
533
- }
534
- :global(.etext-cyan400) {
535
- color: #3DD5F3;
536
- }
537
- :global(.etext-cyan500) {
538
- color: #0DCAF0;
539
- }
540
- :global(.etext-cyan600) {
541
- color: #0AA2C0;
542
- }
543
- :global(.etext-cyan700) {
544
- color: #087990;
545
- }
546
- :global(.etext-cyan800) {
547
- color: #055160;
548
- }
549
- :global(.etext-cyan900) {
550
- color: #032830;
551
- }
552
- :global(.eoutline-secondary) {
553
- outline: 1px solid #3AC82E;
554
- }
555
- :global(.eoutline-secondaryDark) {
556
- outline: 1px solid #00A855;
557
- }
558
- :global(.eoutline-secondaryLight) {
559
- outline: 1px solid #CBFFC7;
560
- }
561
- :global(.eoutline-primary) {
562
- outline: 1px solid #00AEE5;
563
- }
564
- :global(.eoutline-primaryDark) {
565
- outline: 1px solid #007FD8;
566
- }
567
- :global(.eoutline-primaryLight) {
568
- outline: 1px solid #CEF3FF;
569
- }
570
- :global(.eoutline-danger) {
571
- outline: 1px solid #FE4747;
572
- }
573
- :global(.eoutline-dangerDark) {
574
- outline: 1px solid #B02A37;
575
- }
576
- :global(.eoutline-dangerLight) {
577
- outline: 1px solid #f8d7da;
578
- }
579
- :global(.eoutline-success) {
580
- outline: 1px solid #00A96B;
581
- }
582
- :global(.eoutline-successDark) {
583
- outline: 1px solid #146C43;
584
- }
585
- :global(.eoutline-successLight) {
586
- outline: 1px solid #D1E7DD;
587
- }
588
- :global(.eoutline-info) {
589
- outline: 1px solid #0DCAF0;
590
- }
591
- :global(.eoutline-infoDark) {
592
- outline: 1px solid #087990;
593
- }
594
- :global(.eoutline-infoLight) {
595
- outline: 1px solid #9EEAF9;
596
- }
597
- :global(.eoutline-warning) {
598
- outline: 1px solid #FFBA3A;
599
- }
600
- :global(.eoutline-warningDark) {
601
- outline: 1px solid #997404;
602
- }
603
- :global(.eoutline-warningLight) {
604
- outline: 1px solid #FFF3CD;
605
- }
606
- :global(.eradius) {
607
- border-radius: 4px;
608
- }
609
- :global(.eradius-low) {
610
- border-radius: 8px;
611
- }
612
- :global(.eradius-medium) {
613
- border-radius: 16px;
614
- }
615
- :global(.eradius-full) {
616
- border-radius: 50%;
617
- }
618
- .eshadow-non {
619
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
620
- }
621
- .eshadow-low {
622
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
623
- }
624
- .eshadow-medium {
625
- box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
626
- }
627
- .eshadow-high {
628
- box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.1);
629
- }
630
- :global(.efs-small) {
631
- font-family: Roboto;
632
- font-size: 12px;
633
- font-style: normal;
634
- font-weight: 400;
635
- line-height: normal;
636
- }
637
- :global(.efs-normal) {
638
- font-family: Roboto;
639
- font-size: 16px;
640
- font-style: normal;
641
- font-weight: 400;
642
- line-height: 28px;
643
- }
644
- :global(.efs-strong) {
645
- font-family: Roboto;
646
- font-size: 17px;
647
- font-style: normal;
648
- font-weight: 700;
649
- line-height: 28px;
650
- }
651
- :global(.efs-h6) {
652
- font-family: Roboto;
653
- font-size: 16px;
654
- font-style: normal;
655
- font-weight: 700;
656
- line-height: normal;
657
- }
658
- :global(.efs-h5) {
659
- font-family: Roboto;
660
- font-size: 20px;
661
- font-style: normal;
662
- font-weight: 700;
663
- line-height: normal;
664
- }
665
- :global(.efs-h4) {
666
- font-family: Roboto;
667
- font-size: 24px;
668
- font-style: normal;
669
- font-weight: 700;
670
- line-height: normal;
671
- }
672
- :global(.efs-h3) {
673
- font-family: Roboto;
674
- font-size: 28px;
675
- font-style: normal;
676
- font-weight: 700;
677
- line-height: normal;
678
- }
679
- :global(.efs-h2) {
680
- font-family: Roboto;
681
- font-size: 32px;
682
- font-style: normal;
683
- font-weight: 700;
684
- line-height: normal;
685
- }
686
- :global(.efs-h1) {
687
- font-family: Roboto;
688
- font-size: 40px;
689
- font-style: normal;
690
- font-weight: 700;
691
- line-height: normal;
692
- letter-spacing: -0.8px;
693
- }
694
- :global(.efs-h4D) {
695
- font-family: Merriweather;
696
- font-size: 52px;
697
- font-style: normal;
698
- font-weight: 400;
699
- line-height: normal;
700
- }
701
- :global(.efs-h3D) {
702
- font-family: Merriweather;
703
- font-size: 58px;
704
- font-style: normal;
705
- font-weight: 400;
706
- line-height: normal;
707
- }
708
- :global(.efs-h2D) {
709
- font-family: Merriweather;
710
- font-size: 64px;
711
- font-style: normal;
712
- font-weight: 400;
713
- line-height: normal;
714
- letter-spacing: -1.28px;
715
- }
716
- :global(.efs-h1D) {
717
- font-family: Merriweather;
718
- font-size: 72px;
719
- font-style: normal;
720
- font-weight: 400;
721
- line-height: normal;
722
- }
723
- :global(.bg-dark) {
724
- background-color: #05445E !important;
725
- }
726
- .sidebar {
727
- position: fixed;
728
- top: 90px;
729
- /* Height of the navbar */
730
- bottom: 0;
731
- width: 315px;
732
- transition: transform 0.3s ease;
733
- }
734
- .main-content {
735
- /* Width of the sidebar */
736
- flex: 1;
737
- overflow-y: auto;
738
- transition: margin-left 0.3s ease;
739
- }
740
- .main-content.collapsed {
741
- margin-left: 0;
742
- }
743
- @media (max-width: 767px) {
744
- .sidebar {
745
- display: none !important;
746
- }
747
- .main-content {
748
- margin-left: 0;
749
- }
750
- }</style>