optimized-react-component-library-xyz123 2.2.2 → 2.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.
@@ -15,6 +15,89 @@
15
15
  --background-third: #414141;
16
16
  }
17
17
 
18
+ body {
19
+ color: var(--text);
20
+ }
21
+
22
+ body,
23
+ #root {
24
+ min-height: 100vh;
25
+ margin: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ }
29
+
30
+ html {
31
+ font-size: 62.5%; /* 1rem = 10px */
32
+ }
33
+
34
+ body {
35
+ font-family: Arial;
36
+ font-size: 1.6rem;
37
+ font-weight: 400;
38
+ background-color: var(--background);
39
+ display: flex;
40
+ flex-direction: column;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ body a {
45
+ text-decoration: underline;
46
+ text-underline-offset: 0.35rem;
47
+ line-height: 2rem;
48
+ display: inline-flex;
49
+ align-items: center;
50
+ color: var(--action);
51
+ }
52
+
53
+ body a:hover {
54
+ text-decoration: underline 0.2rem;
55
+ }
56
+
57
+ #root {
58
+ display: flex;
59
+ flex-direction: column;
60
+ width: 100%;
61
+ margin: 0;
62
+ }
63
+
64
+ main {
65
+ flex: 1;
66
+ }
67
+
68
+ #main-content:focus:focus-visible,
69
+ h1:focus:focus-visible,
70
+ h2:focus:focus-visible,
71
+ #pts-form-id-error-summary:focus:focus-visible,
72
+ #pts-error-summary:focus:focus-visible {
73
+ outline: none !important;
74
+ border: none;
75
+ }
76
+
77
+ h1,
78
+ h2,
79
+ h3 {
80
+ margin: 0;
81
+ margin-bottom: 3.6rem;
82
+ }
83
+
84
+ h1 {
85
+ font-size: 2.4rem;
86
+ }
87
+
88
+ h2 {
89
+ font-size: 2rem;
90
+ width: 100%;
91
+ }
92
+
93
+ h3 {
94
+ font-size: 1.6rem;
95
+ }
96
+
97
+ h4 {
98
+ margin: 0;
99
+ font-size: 1.6rem;
100
+ }
18
101
 
19
102
  #main-content {
20
103
  padding-top: 3.6rem;
@@ -25,6 +108,24 @@
25
108
  width: 100%;
26
109
  }
27
110
 
111
+ section {
112
+ display: flex;
113
+ flex-direction: column;
114
+ background-color: var(--main);
115
+ padding: 3.6rem;
116
+ margin: 1.6rem 0.8rem;
117
+ border-radius: 0.4rem;
118
+ margin-left: 0.8rem;
119
+ margin-right: 0.8rem;
120
+ margin-top: 1.6rem;
121
+ }
122
+
123
+
124
+ p[aria-live='assertive']:empty {
125
+ margin: 0;
126
+ padding: 0;
127
+ }
128
+
28
129
  .pts-root-categoryDescription {
29
130
  margin-top: 0px;
30
131
  }
@@ -247,15 +348,300 @@ input:focus-visible:-webkit-autofill {
247
348
  text-decoration: underline 0.2rem;
248
349
  }
249
350
 
351
+ /**Header with navigation**/
352
+
353
+
354
+
355
+ .pts-navigation-header-container {
356
+ display: flex;
357
+ min-height: 80px;
358
+ padding: 0px 70px;
359
+ align-items: center;
360
+ justify-content: space-between;
361
+ background-color: var(--main);
362
+ }
363
+
364
+ .pts-navigation-header-content {
365
+ width: 100%;
366
+ display: grid;
367
+ grid-template-columns: 1fr auto 1fr;
368
+ align-items: center;
369
+ }
370
+
371
+
372
+ .pts-navigation-header-logo svg {
373
+ height: 4.7rem;
374
+ width: auto;
375
+ }
376
+
377
+ .pts-navigation-header-headline-container{
378
+ display:flex;
379
+ justify-content: center;
380
+ align-items: flex-end;
381
+ }
382
+
383
+ .pts-navigation-header-headline-container p{
384
+ position: relative;
385
+ font-family: 'Aeonik';
386
+ font-size: 24px;
387
+ font-weight: 700;
388
+ top: 8px;
389
+ }
390
+
391
+ .pts-navigation-header-icons{
392
+ position: relative;
393
+ top: 2px;
394
+ }
395
+
396
+ .pts-close-icon{
397
+ position: relative;
398
+ bottom: -1px;
399
+ }
400
+
401
+ .pts-open-icon{
402
+ position: relative;
403
+ top: 4px;
404
+ }
405
+
406
+ .pts-navigation-overlay{
407
+ position: fixed;
408
+ left: 0;
409
+ top: 0;
410
+ width: 100%;
411
+ height: 100%;
412
+ background-color: rgba(0, 0, 0, 0.5);
413
+ display: flex;
414
+ align-items: center;
415
+ justify-content: center;
416
+ z-index: 998;
417
+ }
418
+
419
+ .pts-navigation-header-nav-container{
420
+ display: flex;
421
+ justify-content: flex-end;
422
+ width: 100%;
423
+ align-items: flex-end;
424
+ height: 5rem;
425
+ }
426
+
427
+ .pts-navigation-header-nav-container button {
428
+ background: none;
429
+ line-height: 2.4rem;
430
+ text-decoration-skip-ink: none;
431
+ border: none;
432
+ color: var(--action);
433
+ font-size: 1.6rem;
434
+ padding: 0;
435
+ cursor: pointer;
436
+ width: 13rem;
437
+ z-index: 900;
438
+ }
439
+
440
+ .pts-navigation-header-button-label {
441
+ position: relative;
442
+ padding-left: 0.8rem;
443
+ }
444
+
445
+
446
+ /******NAVIGATION MENU********/
447
+ .pts-navigation-menu-container {
448
+ position: fixed;
449
+ top: 0;
450
+ right: 0;
451
+ width: 100%;
452
+ max-width: 570px;
453
+ z-index: 999;
454
+ opacity: 0;
455
+ transform: translateX(100%);
456
+ transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ;
457
+ }
458
+
459
+ .pts-navigation-menu-container.open {
460
+ opacity: 1;
461
+ transform: translateX(0);
462
+ }
463
+
464
+
465
+ .pts-navigation-close-text {
466
+ padding-left: 0.8rem;
467
+ font-size: 16px;
468
+ }
469
+
470
+ .pts-navigation-link-list,
471
+ .pts-navigation-link,
472
+ .pts-sub-navigation-list {
473
+ all: unset;
474
+ list-style: none;
475
+ background-color:var(--main);;
476
+ }
477
+
478
+ .pts-navigation-link-list {
479
+ width: 100%;
480
+ padding-inline-start: 0px;
481
+ }
482
+
483
+ .pts-navigation-button a,
484
+ .pts-sub-navigation-item a {
485
+ text-decoration: none;
486
+ color: var(--text)
487
+ }
488
+
489
+ .pts-navigation-link-expand-button {
490
+ border: none;
491
+ padding: 0;
492
+ cursor: pointer;
493
+ }
494
+
495
+ .pts-sub-navigation-container {
496
+ background-color: #d5b9dd;
497
+ border-left: var(--action) 5px solid;
498
+ padding-left: 3.6rem;
499
+ display: flex ;
500
+ align-items: flex-end ;
501
+ gap: 18px ;
502
+ }
503
+
504
+ .pts-sub-navigation-list {
505
+ display:block;
506
+ width: 100%;
507
+ }
508
+
509
+ .pts-sub-navigation-item {
510
+ height: 5.1rem;
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: flex-start;
514
+ border-bottom: 2px solid var(--background) ;
515
+ padding-left: 3rem;
516
+ }
517
+
518
+
519
+ .pts-navigation-button,
520
+ .pts-navigation-close-container {
521
+ padding: 2.1rem 3.6rem;
522
+ border-width: 0px;
523
+ border-bottom: 2px solid var(--background);
524
+ background-color: var(--main);
525
+ text-align: left;
526
+ display: flex;
527
+ justify-content: space-between;
528
+ align-items: center;
529
+ }
530
+
531
+ .pts-navigation-close-button {
532
+ border: none;
533
+ color: var(--action);
534
+ background-color: var(--main);
535
+ display: flex;
536
+ align-items: center;
537
+ justify-content: flex-start;
538
+ margin-top: 1.5rem;
539
+ margin-bottom: 1.5rem;
540
+ cursor: pointer;
541
+ }
542
+
543
+ /*******Breadcrumbs********/
544
+ .pts-breadcrumbs nav {
545
+ background-color: unset;
546
+ position: unset;
547
+ display: flex;
548
+ }
549
+
550
+ .pts-breadcrumbs {
551
+ background-color: var(--background-third);
552
+ height: 4rem;
553
+ display: flex;
554
+ align-items: center;
555
+ padding-left: 6rem;
556
+ padding-top: 2px;
557
+
558
+ }
559
+
560
+ .pts-breadcrumbs ol{
561
+ all: unset;
562
+ }
563
+
564
+ .pts-breadcrumbs li{
565
+ all: unset;
566
+ list-style: none;
567
+ }
568
+
569
+
570
+ .pts-breadcrumbs a:hover {
571
+ color: var(--main);
572
+ text-decoration: underline 2px;
573
+ }
574
+
575
+ .pts-breadcrumbs a {
576
+ text-decoration: underline;
577
+ }
578
+
579
+ .pts-crumb-label,
580
+ .pts-breadcrumbs a {
581
+ color: var(--main);
582
+ position: relative;
583
+ line-height: 2rem;
584
+ }
585
+
586
+ .pts-breadcrumbs svg {
587
+ margin: 0 1.6rem;
588
+ top: 3px;
589
+ position: relative;
590
+ }
591
+
592
+
593
+ /******SEARCH BAR*******/
594
+ .pts-searchBar-container {
595
+ height: 7rem;
596
+ background-color: var(--background);
597
+ display: flex;
598
+ align-items: center;
599
+ justify-content: center;
600
+ }
601
+
602
+ .pts-searchBar-button {
603
+ height: 3.9rem;
604
+ background-color: var(--action);
605
+ border-radius: 8px;
606
+ border: var(--action) solid 1px;
607
+ color: var(--main);
608
+ }
609
+
610
+ .pts-searchBar-Button svg {
611
+ margin-right: 0.5rem;
612
+ }
613
+
614
+ .pts-searchBar-container input {
615
+ border-radius: 8px;
616
+ width: 65vw;
617
+ border: var(--action) solid 1px;
618
+ margin-right: -10px;
619
+ padding: 1rem;
620
+ border-top-right-radius: 0px;
621
+ border-bottom-right-radius: 0px;
622
+ }
623
+
250
624
  /* ---------- TextBODY ---------- */
251
625
 
252
626
  .pts-textBody-container p {
253
627
  margin-bottom: 1.6rem;
254
628
  }
255
629
 
256
- .MoreInfoIcon {
630
+ .pts-standard-link a{
631
+ align-items: start;
632
+ }
633
+
634
+ .pts-standard-link-text{
635
+ margin-top: 2px;
636
+ }
637
+
638
+ .pts-standard-link-icon{
257
639
  margin-top: 2px;
258
640
  }
641
+ .pts-icon-circle svg{
642
+ width: 1.6rem;
643
+ height: 1.6rem;
644
+ }
259
645
 
260
646
  .MoreInfoIcon svg {
261
647
  width: 1.6rem;
@@ -267,7 +653,9 @@ input:focus-visible:-webkit-autofill {
267
653
  margin-right: 1.6rem;
268
654
  }
269
655
 
270
- .MoreInfoIcon svg path {
656
+
657
+ .MoreInfoIcon svg path,
658
+ .MoreInfoIcon {
271
659
  fill: var(--main);
272
660
  }
273
661
 
@@ -720,3 +1108,93 @@ input:focus-visible:-webkit-autofill {
720
1108
 
721
1109
 
722
1110
 
1111
+
1112
+ /****New STUFF****/
1113
+ .pts-collapse {
1114
+ position: relative;
1115
+ }
1116
+
1117
+ .pts-collapse-button {
1118
+ background-color: var(--action);
1119
+ color: white;
1120
+ cursor: pointer;
1121
+ padding: 12px 16px;
1122
+ width: 100%;
1123
+ border: none;
1124
+ border-radius: 8px;
1125
+ outline: none;
1126
+ display: grid;
1127
+ text-align: left;
1128
+ grid-template-columns: 95% 5%;
1129
+ align-items: center;
1130
+ font-size: 16px;
1131
+ }
1132
+
1133
+ .pts-collapse-button.open {
1134
+ border-radius: 8px 8px 0 0;
1135
+ }
1136
+
1137
+ .pts-collapse-title {
1138
+ all: unset;
1139
+ font-family: Arial;
1140
+ font-size: 16px;
1141
+ font-style: normal;
1142
+ font-weight: 400;
1143
+ }
1144
+
1145
+ .pts-collapse-body {
1146
+ position: relative;
1147
+ display: grid;
1148
+ grid-template-rows: 0fr;
1149
+ transition: grid-template-rows 0.3s ease;
1150
+ }
1151
+
1152
+ .pts-collapse-body.open {
1153
+ grid-template-rows: 1fr;
1154
+ border: 2px solid var(--background);
1155
+ border-top: none;
1156
+ border-radius:0 0 8px 8px;
1157
+ }
1158
+
1159
+ .pts-collapse-content {
1160
+ overflow: hidden;
1161
+ }
1162
+
1163
+
1164
+ /******Links ********/
1165
+
1166
+ .pts-icon-circle {
1167
+ display: inline-flex;
1168
+ align-items: center;
1169
+ justify-content: center;
1170
+ min-width: 2rem;
1171
+ width: 2rem;
1172
+ height: 2rem;
1173
+ border-radius: 50%;
1174
+ border: 2px solid var(--action);
1175
+ background-color: var(--action);
1176
+ margin-right: 1.6rem;
1177
+ }
1178
+
1179
+ .pts-icon-circle.pts-fileIcon svg{
1180
+ margin-left: 2px;
1181
+ }
1182
+
1183
+ .pts-linkList-container {
1184
+ margin: 0;
1185
+ padding: 0;
1186
+ }
1187
+
1188
+ .pts-linkList-container ul {
1189
+ all :unset;
1190
+ margin: 0;
1191
+ padding: 0;
1192
+ }
1193
+ .pts-linkList-container li {
1194
+ padding: 6px;
1195
+ list-style: none;
1196
+ }
1197
+
1198
+ [hidden]{
1199
+ display:none;
1200
+ }
@@ -1,117 +0,0 @@
1
- body {
2
- color: var(--text);
3
- }
4
-
5
- body,
6
- #root {
7
- min-height: 100vh;
8
- margin: 0;
9
- width: 100%;
10
- height: 100%;
11
- }
12
-
13
- html {
14
- font-size: 62.5%; /* 1rem = 10px */
15
- }
16
-
17
- body {
18
- font-family: Arial;
19
- font-size: 1.6rem;
20
- font-weight: 400;
21
- background-color: var(--background);
22
- display: flex;
23
- flex-direction: column;
24
- min-height: 100vh;
25
- }
26
-
27
- body a {
28
- text-decoration: underline;
29
- text-underline-offset: 0.35rem;
30
- line-height: 2rem;
31
- display: inline-flex;
32
- align-items: center;
33
- color: var(--action);
34
- }
35
-
36
- body a:hover {
37
- text-decoration: underline 0.2rem;
38
- }
39
-
40
- #root {
41
- display: flex;
42
- flex-direction: column;
43
- width: 100%;
44
- margin: 0;
45
- }
46
-
47
- main {
48
- flex: 1;
49
- }
50
-
51
- #main-content:focus:focus-visible,
52
- h1:focus:focus-visible,
53
- h2:focus:focus-visible,
54
- #pts-form-id-error-summary:focus:focus-visible,
55
- #pts-error-summary:focus:focus-visible {
56
- outline: none !important;
57
- border: none;
58
- }
59
-
60
- h1,
61
- h2,
62
- h3 {
63
- margin: 0;
64
- margin-bottom: 3.6rem;
65
- }
66
-
67
- h1 {
68
- font-size: 2.4rem;
69
- }
70
-
71
- h2 {
72
- font-size: 2rem;
73
- width: 100%;
74
- }
75
-
76
- h3 {
77
- font-size: 1.6rem;
78
- }
79
-
80
- h4 {
81
- margin: 0;
82
- font-size: 1.6rem;
83
- }
84
-
85
- section {
86
- display: flex;
87
- flex-direction: column;
88
- background-color: var(--main);
89
- padding: 3.6rem;
90
- margin: 1.6rem 0.8rem;
91
- border-radius: 0.4rem;
92
- margin-left: 0.8rem;
93
- margin-right: 0.8rem;
94
- margin-top: 1.6rem;
95
- }
96
-
97
- p[aria-live='assertive']:empty {
98
- margin: 0;
99
- padding: 0;
100
- }
101
-
102
- fieldset {
103
- border: none;
104
- padding: 0;
105
- margin: 0;
106
- }
107
-
108
-
109
- @media (max-width: 750px) {
110
- section {
111
- margin-left: 0;
112
- margin-right: 0;
113
- border-radius: 0;
114
- padding: 1.6rem;
115
- }
116
- }
117
-