html {
font-family: $font-sans; font-size: $em-base;
}
body {
font-size: $base-font-size;
}
p {
line-height: $base-line-height; margin-bottom: 1em; margin-top: 1em;
}
a {
color: $color-primary; text-decoration: underline; &:hover, &:active { color: $color-primary-darker; } &:focus { @include focus; } &:visited { color: $color-visited; }
}
@mixin external-link($external-link, $external-link-hover) {
&::after { background: url('#{$image-path}/#{$external-link}.png') no-repeat 0 0; background: url('#{$image-path}/#{$external-link}.svg') no-repeat 0 0; background-size: 100%; content: ''; display: inline-block; height: 0.65em; margin-bottom: -1px; margin-left: 4px; width: 0.65em; } &:hover::after { background-image: url('#{$image-path}/#{$external-link-hover}.png'); background-image: url('#{$image-path}/#{$external-link-hover}.svg'); }
}
// External link consider “effortless style approach”: // [href^=“http:”]:not() // [href^=“https:”]:not()
.usa-external_link {
@include external-link(external-link, external-link-hover);
}
.usa-external_link-alt {
@include external-link(external-link-alt, external-link-alt-hover);
}
h1, h2, h3, h4, h5, h6 {
clear: both; font-family: $font-serif; line-height: $heading-line-height; margin-bottom: 0.5em; margin-top: 1.5em;
}
h1 {
@include h1();
}
h2 {
@include h2();
}
h3 {
@include h3();
}
h4 {
@include h4();
}
h5 {
@include h5();
}
h6 {
@include h6(); font-family: $font-sans;
}
// 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: $text-max-width; }
}
.usa-content-list {
max-width: $text-max-width;
}
.usa-sans {
p, a, li, span { font-family: $font-sans; } a { border-bottom: none; font-weight: $font-bold; }
}
.usa-serif {
p, a, li, span { font-family: $font-serif; }
}
.usa-display {
@include h3(); margin-bottom: 0; @include media($small-screen) { @include h1(); } @include media($medium-screen) { @include title(); }
}
.usa-font-lead {
font-family: $font-serif; font-size: $lead-font-size; font-weight: $font-normal; line-height: $lead-line-height; max-width: $lead-max-width;
}
.usa-background-dark {
background-color: $color-gray-dark; p, span { color: $color-white; } a { color: $color-gray-lighter; &:hover { color: $color-white; } }
}
.usa-text-small {
font-size: $h6-font-size; margin-top: 0;
}
// Removes top margin from first child and bottom margin from last child on // elements when they are within those layout elements. .usa-section, .usa-grid, .usa-grid-full {
> :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; }
}
.usa-width-one-whole, .usa-width-one-half, .usa-width-one-third, .usa-width-two-thirds, .usa-width-one-fourth, .usa-width-three-fourths, .usa-width-one-sixth, .usa-width-five-sixths, .usa-width-one-twelfth {
&:first-child { > :first-child { margin-top: 0; } } > :first-child { @include media($medium-screen) { margin-top: 0; } } &:last-child { > :last-child { margin-bottom: 0; } } > :last-child { @include media($medium-screen) { margin-bottom: 0; } }
}