-
Notifications
You must be signed in to change notification settings - Fork 921
/
_typography.scss
122 lines (97 loc) · 1.99 KB
/
_typography.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
html {
@include add-kerning;
font-family: font-family($theme-body-font-family);
font-size: $root-font-size;
}
@if $theme-style-body-element {
body {
@include typeset;
}
}
.usa-prose {
@include typeset($theme-prose-font-family);
& > {
@include usa-content-styles;
}
}
@if $theme-global-paragraph-styles == true {
@include usa-paragraph-style;
}
@if $theme-global-link-styles == true {
@include usa-link-style;
}
@if $theme-global-content-styles == true {
@include usa-content-styles;
}
.usa-paragraph {
@include typeset-p;
}
.usa-link {
@include typeset-link;
}
// External link consider "effortless style approach":
// [href^="http:"]:not([href*="my-domain.com"])
// [href^="https:"]:not([href*="my-domain.com"])
.usa-link--external {
@include external-link(external-link, external-link-hover);
&.usa-link--alt {
@include external-link(external-link-alt, external-link-alt-hover);
}
}
// Remove user agent styles
cite,
var,
address,
dfn {
font-style: normal;
}
// Custom typography
.usa-content {
p,
ul:not(.usa-accordion):not(.usa-accordion--bordered),
ol:not(.usa-accordion):not(.usa-accordion--bordered) {
max-width: measure($theme-text-measure);
}
}
.usa-content-list {
max-width: measure($theme-text-measure);
}
.usa-display {
@include typeset-h3;
margin-bottom: 0;
@include at-media('mobile-lg') {
@include typeset-h1;
}
@include at-media('tablet') {
@include typeset-title;
}
}
.usa-font-lead {
@include typeset(
$theme-lead-font-family,
$theme-lead-font-size,
$theme-lead-line-height
);
font-weight: $theme-font-weight-normal;
max-width: measure($theme-lead-measure);
}
.usa-dark-background {
@include add-knockout-font-smoothing;
background-color: color('base-darker');
p,
span {
color: color('white');
}
a {
color: color('base-lighter');
&:hover {
color: color('white');
}
}
}
%usa-paragraph {
@include typeset-p;
}
%usa-heading {
@include typeset-heading;
}