optimized-react-component-library-xyz123 2.0.2 → 2.1.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,89 +15,6 @@
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
- }
101
18
 
102
19
  #main-content {
103
20
  padding-top: 3.6rem;
@@ -108,43 +25,6 @@ h4 {
108
25
  width: 100%;
109
26
  }
110
27
 
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
-
148
28
  .pts-root-categoryDescription {
149
29
  margin-top: 0px;
150
30
  }
@@ -367,291 +247,16 @@ input:focus-visible:-webkit-autofill {
367
247
  text-decoration: underline 0.2rem;
368
248
  }
369
249
 
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
-
644
250
  /* ---------- TextBODY ---------- */
645
251
 
646
252
  .pts-textBody-container p {
647
253
  margin-bottom: 1.6rem;
648
254
  }
649
255
 
650
- .pts-standard-link-icon{
256
+ .MoreInfoIcon {
651
257
  margin-top: 2px;
652
258
  }
653
259
 
654
-
655
260
  .MoreInfoIcon svg {
656
261
  width: 1.6rem;
657
262
  height: 1.6rem;
@@ -662,9 +267,7 @@ input:focus-visible:-webkit-autofill {
662
267
  margin-right: 1.6rem;
663
268
  }
664
269
 
665
-
666
- .MoreInfoIcon svg path,
667
- .MoreInfoIcon {
270
+ .MoreInfoIcon svg path {
668
271
  fill: var(--main);
669
272
  }
670
273
 
@@ -1117,86 +720,3 @@ input:focus-visible:-webkit-autofill {
1117
720
 
1118
721
 
1119
722
 
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
- }