qpp-design-system 0.4.1 → 0.4.2
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.
- package/dist/styles/qpp-theme.css +82 -24
- package/package.json +1 -1
|
@@ -499,6 +499,24 @@
|
|
|
499
499
|
--usa-banner-security-icon__color: var(--color-success-light);
|
|
500
500
|
}
|
|
501
501
|
|
|
502
|
+
/* Reset CMS default margin-block spacing to prevent unexpected top/bottom margins on consuming apps */
|
|
503
|
+
h1,
|
|
504
|
+
h2,
|
|
505
|
+
h3,
|
|
506
|
+
h4,
|
|
507
|
+
h5,
|
|
508
|
+
h6,
|
|
509
|
+
ol,
|
|
510
|
+
ul,
|
|
511
|
+
legend,
|
|
512
|
+
label,
|
|
513
|
+
input,
|
|
514
|
+
button,
|
|
515
|
+
textarea,
|
|
516
|
+
select {
|
|
517
|
+
margin-block: 0;
|
|
518
|
+
}
|
|
519
|
+
|
|
502
520
|
h1,
|
|
503
521
|
h2,
|
|
504
522
|
h3,
|
|
@@ -509,61 +527,101 @@ h6 {
|
|
|
509
527
|
line-height: var(--font-line-height-heading);
|
|
510
528
|
}
|
|
511
529
|
|
|
512
|
-
h1,
|
|
530
|
+
h1,
|
|
531
|
+
.qpp-h1 {
|
|
513
532
|
font-size: var(--font-size-4xl); /* 3rem */
|
|
514
533
|
font-weight: var(--font-weight-heading-4xl); /* 400 */
|
|
534
|
+
margin-bottom: 0.5em;
|
|
535
|
+
margin-top: 1.5em;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
h1:first-child {
|
|
539
|
+
margin-top: 0;
|
|
515
540
|
}
|
|
516
541
|
|
|
517
|
-
|
|
542
|
+
h1:last-child {
|
|
543
|
+
margin-bottom: 0;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
h2,
|
|
547
|
+
.qpp-h2 {
|
|
518
548
|
font-size: var(--font-size-3xl); /* 2.25rem */
|
|
519
549
|
font-weight: var(--font-weight-heading-3xl); /* 400 */
|
|
550
|
+
margin-bottom: 0.5em;
|
|
551
|
+
margin-top: 1.5em;
|
|
520
552
|
}
|
|
521
553
|
|
|
522
|
-
h3,
|
|
554
|
+
h3,
|
|
555
|
+
.qpp-h3 {
|
|
523
556
|
font-size: var(--font-size-2xl); /* 1.5rem */
|
|
524
557
|
font-weight: var(--font-weight-heading-2xl); /* 500 */
|
|
558
|
+
margin-bottom: 0.5em;
|
|
559
|
+
margin-top: 1.5em;
|
|
525
560
|
}
|
|
526
561
|
|
|
527
|
-
h4,
|
|
562
|
+
h4,
|
|
563
|
+
.qpp-h4 {
|
|
528
564
|
font-size: var(--font-size-xl); /* 1.3125rem */
|
|
529
565
|
font-weight: var(--font-weight-heading-xl); /* 500 */
|
|
566
|
+
margin-bottom: 0.5em;
|
|
567
|
+
margin-top: 1.5em;
|
|
530
568
|
}
|
|
531
569
|
|
|
532
|
-
h5,
|
|
570
|
+
h5,
|
|
571
|
+
.qpp-h5 {
|
|
533
572
|
font-size: var(--font-size-lg); /* 1.125rem */
|
|
534
573
|
font-weight: var(--font-weight-heading-lg); /* 500 */
|
|
574
|
+
margin-bottom: 0.5em;
|
|
575
|
+
margin-top: 1.5em;
|
|
535
576
|
}
|
|
536
577
|
|
|
537
|
-
h6,
|
|
578
|
+
h6,
|
|
579
|
+
.qpp-h6 {
|
|
538
580
|
font-size: var(--font-size-md); /* 1rem */
|
|
539
581
|
font-weight: var(--font-weight-heading-md); /* 500 */
|
|
540
582
|
}
|
|
541
583
|
|
|
542
584
|
@media (max-width: 768px) {
|
|
543
|
-
h1,
|
|
585
|
+
h1,
|
|
586
|
+
.qpp-h1 {
|
|
544
587
|
font-size: var(--font-size-4xl--mobile); /* 2.25rem */
|
|
545
588
|
}
|
|
546
589
|
|
|
547
|
-
h2,
|
|
590
|
+
h2,
|
|
591
|
+
.qpp-h2 {
|
|
548
592
|
font-size: var(--font-size-3xl--mobile); /* 1.875rem */
|
|
549
593
|
}
|
|
550
594
|
}
|
|
551
595
|
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
596
|
+
p:last-child {
|
|
597
|
+
margin-bottom: 0;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
p:first-child {
|
|
601
|
+
margin-top: 0;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
p {
|
|
605
|
+
font-size: var(--font-size-lg);
|
|
606
|
+
line-height: var(--font-line-height-base);
|
|
607
|
+
margin-bottom: 1em;
|
|
608
|
+
margin-top: 1em;
|
|
609
|
+
}
|
|
610
|
+
|
|
560
611
|
ol,
|
|
561
|
-
ul
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
612
|
+
ul {
|
|
613
|
+
margin-bottom: var(--spacer-2);
|
|
614
|
+
margin-top: var(--spacer-2);
|
|
615
|
+
padding-left: var(--spacer-4);
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
ol,
|
|
619
|
+
ul {
|
|
620
|
+
font-size: var(--font-size-lg);
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
ol li,
|
|
624
|
+
ul li {
|
|
625
|
+
line-height: var(--font-line-height-base);
|
|
626
|
+
margin-bottom: var(--spacer-1);
|
|
569
627
|
}
|