optimized-react-component-library-xyz123 2.2.2 → 2.2.3

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,298 @@ 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
+ transform: translateX(100%);
455
+ transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
456
+ }
457
+
458
+ .pts-navigation-menu-container.open {
459
+ transform: translateX(0);
460
+ }
461
+
462
+
463
+ .pts-navigation-close-text {
464
+ padding-left: 0.8rem;
465
+ font-size: 16px;
466
+ }
467
+
468
+ .pts-navigation-link-list,
469
+ .pts-navigation-link,
470
+ .pts-sub-navigation-list {
471
+ all: unset;
472
+ list-style: none;
473
+ background-color:var(--main);;
474
+ }
475
+
476
+ .pts-navigation-link-list {
477
+ width: 100%;
478
+ padding-inline-start: 0px;
479
+ }
480
+
481
+ .pts-navigation-button a,
482
+ .pts-sub-navigation-item a {
483
+ text-decoration: none;
484
+ color: var(--text)
485
+ }
486
+
487
+ .pts-navigation-link-expand-button {
488
+ border: none;
489
+ padding: 0;
490
+ cursor: pointer;
491
+ }
492
+
493
+ .pts-sub-navigation-container {
494
+ background-color: #d5b9dd;
495
+ border-left: var(--action) 5px solid;
496
+ padding-left: 3.6rem;
497
+ display: flex ;
498
+ align-items: flex-end ;
499
+ gap: 18px ;
500
+ }
501
+
502
+ .pts-sub-navigation-list {
503
+ display:block;
504
+ width: 100%;
505
+ }
506
+
507
+ .pts-sub-navigation-item {
508
+ height: 5.1rem;
509
+ display: flex;
510
+ align-items: center;
511
+ justify-content: flex-start;
512
+ border-bottom: 2px solid var(--background) ;
513
+ padding-left: 3rem;
514
+ }
515
+
516
+
517
+ .pts-navigation-button,
518
+ .pts-navigation-close-container {
519
+ padding: 2.1rem 3.6rem;
520
+ border-width: 0px;
521
+ border-bottom: 2px solid var(--background);
522
+ background-color: var(--main);
523
+ text-align: left;
524
+ display: flex;
525
+ justify-content: space-between;
526
+ align-items: center;
527
+ }
528
+
529
+ .pts-navigation-close-button {
530
+ border: none;
531
+ color: var(--action);
532
+ background-color: var(--main);
533
+ display: flex;
534
+ align-items: center;
535
+ justify-content: flex-start;
536
+ margin-top: 1.5rem;
537
+ margin-bottom: 1.5rem;
538
+ cursor: pointer;
539
+ }
540
+
541
+ /*******Breadcrumbs********/
542
+ .pts-breadcrumbs nav {
543
+ background-color: unset;
544
+ position: unset;
545
+ display: flex;
546
+ }
547
+
548
+ .pts-breadcrumbs {
549
+ background-color: var(--background-third);
550
+ height: 4rem;
551
+ display: flex;
552
+ align-items: center;
553
+ padding-left: 6rem;
554
+ padding-top: 2px;
555
+
556
+ }
557
+
558
+ .pts-breadcrumbs ol{
559
+ all: unset;
560
+ }
561
+
562
+ .pts-breadcrumbs li{
563
+ all: unset;
564
+ list-style: none;
565
+ }
566
+
567
+
568
+ .pts-breadcrumbs a:hover {
569
+ color: var(--main);
570
+ text-decoration: underline 2px;
571
+ }
572
+
573
+ .pts-breadcrumbs a {
574
+ text-decoration: underline;
575
+ }
576
+
577
+ .pts-crumb-label,
578
+ .pts-breadcrumbs a {
579
+ color: var(--main);
580
+ position: relative;
581
+ line-height: 2rem;
582
+ }
583
+
584
+ .pts-breadcrumbs svg {
585
+ margin: 0 1.6rem;
586
+ top: 3px;
587
+ position: relative;
588
+ }
589
+
590
+
591
+ /******SEARCH BAR*******/
592
+ .pts-searchBar-container {
593
+ height: 7rem;
594
+ background-color: var(--background);
595
+ display: flex;
596
+ align-items: center;
597
+ justify-content: center;
598
+ }
599
+
600
+ .pts-searchBar-button {
601
+ height: 3.9rem;
602
+ background-color: var(--action);
603
+ border-radius: 8px;
604
+ border: var(--action) solid 1px;
605
+ color: var(--main);
606
+ }
607
+
608
+ .pts-searchBar-Button svg {
609
+ margin-right: 0.5rem;
610
+ }
611
+
612
+ .pts-searchBar-container input {
613
+ border-radius: 8px;
614
+ width: 65vw;
615
+ border: var(--action) solid 1px;
616
+ margin-right: -10px;
617
+ padding: 1rem;
618
+ border-top-right-radius: 0px;
619
+ border-bottom-right-radius: 0px;
620
+ }
621
+
250
622
  /* ---------- TextBODY ---------- */
251
623
 
252
624
  .pts-textBody-container p {
253
625
  margin-bottom: 1.6rem;
254
626
  }
255
627
 
256
- .MoreInfoIcon {
628
+ .pts-standard-link a{
629
+ align-items: start;
630
+ }
631
+
632
+ .pts-standard-link-text{
633
+ margin-top: 2px;
634
+ }
635
+
636
+ .pts-standard-link-icon{
257
637
  margin-top: 2px;
258
638
  }
639
+ .pts-icon-circle svg{
640
+ width: 1.6rem;
641
+ height: 1.6rem;
642
+ }
259
643
 
260
644
  .MoreInfoIcon svg {
261
645
  width: 1.6rem;
@@ -267,7 +651,9 @@ input:focus-visible:-webkit-autofill {
267
651
  margin-right: 1.6rem;
268
652
  }
269
653
 
270
- .MoreInfoIcon svg path {
654
+
655
+ .MoreInfoIcon svg path,
656
+ .MoreInfoIcon {
271
657
  fill: var(--main);
272
658
  }
273
659
 
@@ -720,3 +1106,94 @@ input:focus-visible:-webkit-autofill {
720
1106
 
721
1107
 
722
1108
 
1109
+
1110
+ /****New STUFF****/
1111
+ .pts-collapse {
1112
+ position: relative;
1113
+ }
1114
+
1115
+ .pts-collapse-button {
1116
+ background-color: var(--action);
1117
+ color: white;
1118
+ cursor: pointer;
1119
+ padding: 12px 16px;
1120
+ width: 100%;
1121
+ border: none;
1122
+ border-radius: 8px;
1123
+ outline: none;
1124
+ display: grid;
1125
+ text-align: left;
1126
+ grid-template-columns: 95% 5%;
1127
+ align-items: center;
1128
+ }
1129
+
1130
+ .pts-collapse-button.open {
1131
+ border-radius: 8px 8px 0 0;
1132
+ }
1133
+
1134
+ .pts-collapse-title {
1135
+ all: unset;
1136
+ font-family: Arial;
1137
+ font-size: 16px;
1138
+ font-style: normal;
1139
+ font-weight: 400;
1140
+ }
1141
+
1142
+ .pts-collapse-body {
1143
+ position: relative;
1144
+ display: grid;
1145
+ grid-template-rows: 0fr;
1146
+ transition: grid-template-rows 0.3s ease;
1147
+ }
1148
+
1149
+ .pts-collapse-body.open {
1150
+ grid-template-rows: 1fr;
1151
+ border: 2px solid var(--background);
1152
+ border-top: none;
1153
+ border-radius:0 0 8px 8px;
1154
+ margin-left: 1px;
1155
+ margin-right: 2px;
1156
+ }
1157
+
1158
+ .pts-collapse-content {
1159
+ overflow: hidden;
1160
+ }
1161
+
1162
+
1163
+ /******Links ********/
1164
+
1165
+ .pts-icon-circle {
1166
+ display: inline-flex;
1167
+ align-items: center;
1168
+ justify-content: center;
1169
+ min-width: 2rem;
1170
+ width: 2rem;
1171
+ height: 2rem;
1172
+ border-radius: 50%;
1173
+ border: 2px solid var(--action);
1174
+ background-color: var(--action);
1175
+ margin-right: 1.6rem;
1176
+ }
1177
+
1178
+ .pts-icon-circle.pts-fileIcon svg{
1179
+ margin-left: 2px;
1180
+ }
1181
+
1182
+ .pts-linkList-container {
1183
+ margin: 0;
1184
+ padding: 0;
1185
+ }
1186
+
1187
+ .pts-linkList-container ul {
1188
+ all :unset;
1189
+ margin: 0;
1190
+ padding: 0;
1191
+ }
1192
+ .pts-linkList-container li {
1193
+ padding: 6px;
1194
+ list-style: none;
1195
+ }
1196
+
1197
+ [hidden]{
1198
+ display:none;
1199
+ }
@@ -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
-