optimized-react-component-library-xyz123 1.2.4 → 2.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.
@@ -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,43 @@
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
+ /* ?? Make changes in html ?? ----
123
+ .pts-button{
124
+ background-color: var(--action);
125
+ border: 2px solid var(--action);
126
+ color: var(--main);
127
+ padding: 8px 20px;
128
+ border-radius: 8px;
129
+ font-size: 16px;
130
+ cursor: pointer;
131
+ margin-left: 1.6rem;
132
+ }
133
+
134
+ .pts-button:focus,
135
+ .pts-button:hover{
136
+ background-color: var(--main);
137
+ border: 2px solid var(--action);
138
+ color: var(--action);
139
+ transition: 0.2s;
140
+ }
141
+ --- ?? Make changes in html ?? */
142
+
143
+ p[aria-live='assertive']:empty {
144
+ margin: 0;
145
+ padding: 0;
146
+ }
147
+
28
148
  .pts-root-categoryDescription {
29
149
  margin-top: 0px;
30
150
  }
@@ -247,16 +367,291 @@ input:focus-visible:-webkit-autofill {
247
367
  text-decoration: underline 0.2rem;
248
368
  }
249
369
 
370
+ /**Header with navigation**/
371
+
372
+
373
+
374
+ .pts-navigation-header-container {
375
+ display: flex;
376
+ min-height: 80px;
377
+ padding: 0px 70px;
378
+ align-items: center;
379
+ justify-content: space-between;
380
+ background-color: var(--main);
381
+ }
382
+
383
+ .pts-navigation-header-content {
384
+ width: 100%;
385
+ display: grid;
386
+ grid-template-columns: 1fr auto 1fr;
387
+ align-items: center;
388
+ }
389
+
390
+ .pts-navigation-header-logo-container {
391
+ height: 4rem;
392
+ }
393
+
394
+ .pts-navigation-header-logo svg {
395
+ height: 4rem;
396
+ }
397
+
398
+ .pts-navigation-header-headline-container{
399
+ display:flex;
400
+ justify-content: center;
401
+ align-items: flex-end;
402
+ }
403
+ .pts-navigation-header-headline-container p{
404
+ position: relative;
405
+ font-family: 'Aeonik';
406
+ font-size: 24px;
407
+ font-weight: 700;
408
+ top: 8px;
409
+ }
410
+
411
+ .pts-navigation-header-icons{
412
+ position: relative;
413
+ top: 2px;
414
+ }
415
+
416
+ .pts-close-icon{
417
+ position: relative;
418
+ bottom: -1px;
419
+ }
420
+
421
+ .pts-open-icon{
422
+ position: relative;
423
+ top: 4px;
424
+ }
425
+
426
+ .pts-navigation-overlay{
427
+ position: fixed;
428
+ top: 80px;
429
+ left: 0;
430
+ width: 100%;
431
+ height: 100%;
432
+ background-color: rgba(0, 0, 0, 0.5);
433
+ display: flex;
434
+ align-items: center;
435
+ justify-content: center;
436
+ z-index: 998;
437
+ }
438
+
439
+ .pts-navigation-header-nav-container{
440
+ display: flex;
441
+ justify-content: flex-end;
442
+ width: 100%;
443
+ align-items: flex-end;
444
+ height: 5rem;
445
+ }
446
+
447
+ .pts-navigation-header-nav-container button {
448
+ background: none;
449
+ line-height: 2.4rem;
450
+ text-decoration-skip-ink: none;
451
+ border: none;
452
+ color: var(--action);
453
+ font-size: 1.6rem;
454
+ padding: 0;
455
+ cursor: pointer;
456
+ width: 13rem;
457
+ z-index: 999;
458
+ }
459
+
460
+ .pts-navigation-header-button-label {
461
+ position: relative;
462
+ padding-left: 0.8rem;
463
+ }
464
+
465
+
466
+ /******Navigation Menu********/
467
+ .pts-navigation-menu-container {
468
+ background-color:var(--main);
469
+ position: absolute;
470
+ top: 8rem;
471
+ right: 0;
472
+ z-index: 20;
473
+ width: 100%;
474
+ max-width: 570px;
475
+ z-index: 999;
476
+ }
477
+
478
+ .pts-navigation-with-close-button{
479
+ top:0;
480
+ }
481
+
482
+ .pts-navigation-close-text {
483
+ padding-left: 0.8rem;
484
+ }
485
+
486
+ .pts-navigation-link-list,
487
+ .pts-navigation-link,
488
+ .pts-sub-navigation-list {
489
+ all: unset;
490
+ list-style: none;
491
+ background-color:var(--main);;
492
+ }
493
+
494
+ .pts-navigation-link-list {
495
+ width: 100%;
496
+ padding-inline-start: 0px;
497
+ }
498
+
499
+ .pts-navigation-button a,
500
+ .pts-sub-navigation-item a {
501
+ text-decoration: none;
502
+ color: var(--text)
503
+ }
504
+
505
+ .pts-navigation-link-expand-button {
506
+ border: none;
507
+ padding: 0;
508
+ cursor: pointer;
509
+ }
510
+
511
+ .pts-sub-navigation-container {
512
+ background-color: #d5b9dd;
513
+ border-left: var(--action) 5px solid;
514
+ padding-left: 3.6rem;
515
+ display: flex ;
516
+ align-items: flex-end ;
517
+ gap: 18px ;
518
+ }
519
+
520
+ .pts-sub-navigation-list {
521
+ display:block;
522
+ width: 100%;
523
+ }
524
+
525
+ .pts-sub-navigation-item {
526
+ height: 5.1rem;
527
+ display: flex;
528
+ align-items: center;
529
+ justify-content: flex-start;
530
+ border-bottom: 2px solid var(--background) ;
531
+ padding-left: 3rem;
532
+ }
533
+
534
+
535
+ .pts-navigation-button,
536
+ .pts-navigation-close-container {
537
+ padding: 2.1rem 3.6rem;
538
+ border-width: 0px;
539
+ border-bottom: 2px solid var(--background);
540
+ background-color: var(--main);
541
+ text-align: left;
542
+ display: flex;
543
+ justify-content: space-between;
544
+ align-items: center;
545
+ }
546
+
547
+ .pts-navigation-close-button {
548
+ width: 20rem;
549
+ height: 4rem;
550
+ border: none;
551
+ border-radius: 8px;
552
+ color: var(--action);
553
+ background-color: var(--main);
554
+ display: flex;
555
+ align-items: center;
556
+ justify-content: flex-start;
557
+ margin-top: 3rem;
558
+ margin-bottom: 3rem;
559
+ cursor: pointer;
560
+ }
561
+
562
+ /*******Breadcrumbs********/
563
+ .pts-breadcrumbs nav {
564
+ background-color: unset;
565
+ position: unset;
566
+ display: flex;
567
+ }
568
+
569
+ .pts-breadcrumbs {
570
+ background-color: var(--background-third);
571
+ height: 48px;
572
+ display: flex;
573
+ align-items: center;
574
+ padding-left: 6rem;
575
+ padding-top: 2px;
576
+
577
+ }
578
+
579
+ .pts-breadcrumbs ol{
580
+ all: unset;
581
+ }
582
+
583
+ .pts-breadcrumbs li{
584
+ all: unset;
585
+ list-style: none;
586
+ }
587
+
588
+
589
+ .pts-breadcrumbs a:hover {
590
+ color: var(--main);
591
+ text-decoration: underline 2px;
592
+ }
593
+
594
+ .pts-crumb-label,
595
+ .pts-breadcrumbs a {
596
+ color: var(--main);
597
+ text-decoration: none;
598
+ position: relative;
599
+ line-height: 2rem;
600
+ }
601
+
602
+ .pts-bold-crumb {
603
+ font-weight: 700;
604
+ }
605
+
606
+ .pts-breadcrumbs svg {
607
+ margin: 0 1.6rem;
608
+ top: 1px;
609
+ position: relative;
610
+ }
611
+
612
+
613
+ /******SEARCH BAR*******/
614
+ .pts-searchBar-container {
615
+ height: 7rem;
616
+ background-color: var(--background);
617
+ display: flex;
618
+ align-items: center;
619
+ justify-content: center;
620
+ }
621
+
622
+ .pts-searchBar-button {
623
+ height: 3.9rem;
624
+ background-color: var(--action);
625
+ border-radius: 8px;
626
+ border: var(--action) solid 1px;
627
+ color: var(--main);
628
+ }
629
+
630
+ .pts-searchBar-Button svg {
631
+ margin-right: 0.5rem;
632
+ }
633
+
634
+ .pts-searchBar-container input {
635
+ border-radius: 8px;
636
+ width: 65vw;
637
+ border: var(--action) solid 1px;
638
+ margin-right: -10px;
639
+ padding: 1rem;
640
+ border-top-right-radius: 0px;
641
+ border-bottom-right-radius: 0px;
642
+ }
643
+
250
644
  /* ---------- TextBODY ---------- */
251
645
 
252
646
  .pts-textBody-container p {
253
647
  margin-bottom: 1.6rem;
254
648
  }
255
649
 
256
- .MoreInfoIcon {
650
+ .pts-standard-link-icon{
257
651
  margin-top: 2px;
258
652
  }
259
653
 
654
+
260
655
  .MoreInfoIcon svg {
261
656
  width: 1.6rem;
262
657
  height: 1.6rem;
@@ -267,7 +662,9 @@ input:focus-visible:-webkit-autofill {
267
662
  margin-right: 1.6rem;
268
663
  }
269
664
 
270
- .MoreInfoIcon svg path {
665
+
666
+ .MoreInfoIcon svg path,
667
+ .MoreInfoIcon {
271
668
  fill: var(--main);
272
669
  }
273
670
 
@@ -720,3 +1117,86 @@ input:focus-visible:-webkit-autofill {
720
1117
 
721
1118
 
722
1119
 
1120
+
1121
+ /****New STUFF****/
1122
+ .pts-collapse {
1123
+ position: relative;
1124
+ }
1125
+
1126
+ .pts-collapse-button {
1127
+ background-color: var(--action);
1128
+ color: white;
1129
+ cursor: pointer;
1130
+ padding: 12px 16px;
1131
+ width: 100%;
1132
+ border: none;
1133
+ border-radius: 8px;
1134
+ outline: none;
1135
+ display: grid;
1136
+ text-align: left;
1137
+ grid-template-columns: 95% 5%;
1138
+ align-items: center;
1139
+ }
1140
+
1141
+ .pts-collapse-button.open {
1142
+ border-radius: 8px 8px 0 0;
1143
+ }
1144
+
1145
+ .pts-collapse-title {
1146
+ all: unset;
1147
+ font-family: Arial;
1148
+ font-size: 16px;
1149
+ font-style: normal;
1150
+ font-weight: 400;
1151
+ }
1152
+
1153
+ .pts-collapse-body {
1154
+ position: relative;
1155
+ display: grid;
1156
+ grid-template-rows: 0fr;
1157
+ transition: grid-template-rows 0.3s ease;
1158
+ }
1159
+
1160
+ .pts-collapse-body.open {
1161
+ grid-template-rows: 1fr;
1162
+ border: 2px solid var(--info);
1163
+ border-top: none;
1164
+ }
1165
+
1166
+ .pts-collapse-content {
1167
+ overflow: hidden;
1168
+ }
1169
+
1170
+
1171
+ /******Links ********/
1172
+
1173
+ .pts-icon-circle {
1174
+ display: inline-flex;
1175
+ align-items: center;
1176
+ justify-content: center;
1177
+ width: 2rem;
1178
+ height: 2rem;
1179
+ border-radius: 50%;
1180
+ border: 2px solid var(--action);
1181
+ background-color: var(--action);
1182
+ margin-right: 1.6rem;
1183
+ }
1184
+
1185
+ .pts-linkList-container {
1186
+ margin: 0;
1187
+ padding: 0;
1188
+ }
1189
+
1190
+ .pts-linkList-container ul {
1191
+ all :unset;
1192
+ margin: 0;
1193
+ padding: 0;
1194
+ }
1195
+ .pts-linkList-container li {
1196
+ padding: 6px;
1197
+ list-style: none;
1198
+ }
1199
+
1200
+ [hidden]{
1201
+ display:none;
1202
+ }
@@ -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
-