src/app/components/app/app.style.scss
@import '~@code.gov/code-gov-style/_sass/_variables';
.agency-logos {
li {
display: inline-block;
margin-right: 2rem;
}
img,
svg {
max-height: 3rem;
vertical-align: middle;
@media screen and (min-width: $small-screen) {
max-height: 6rem;
}
}
svg {
height: 2.5rem;
.cls-1 {
fill: $color-white;
}
}
}
.app-links {
display: block;
float: left;
.app-link {
display: inline-block;
font-size: 0.7em;
font-weight: bold;
margin-left: 1.6rem;
text-transform: uppercase;
vertical-align: top;
@media screen and (min-width: $medium-screen) {
font-size: 0.8em;
margin-left: 2rem;
}
@media screen and (min-width: $large-screen) {
font-size: 1em;
margin-left: 4rem;
}
}
.social-link {
display: none;
@media screen and (min-width: $medium-screen) {
display: inline-block;
}
}
}
.app-link > a {
color: $color-gray;
display: inline-block;
line-height: 40px;
min-width: 44px;
text-align: center;
&.active {
color: $brand-primary;
font-weight: bold;
}
}
.app-logo {
margin: 0 auto;
width: 13rem;
@media screen and (min-width: $small-screen) {
float: left;
}
a {
display: block;
line-height: 40px;
&:focus {
box-shadow: none;
outline: 0;
}
}
}
.app-navigation {
font-size: 0.8em;
padding: 1.5rem 0;
text-align: center;
@media screen and (min-width: $small-screen) {
font-size: 1em;
text-align: left;
}
.search-form {
.autocomplete-container {
right: 0;
}
}
}
.footer-links {
margin-bottom: 1rem;
a {
font-size: 0.9em;
}
li {
display: inline-block;
&:not(:last-of-type) {
margin-right: 1em;
}
}
}
.usa-disclaimer {
font-size: 0.8em;
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 4;
@media screen and (min-width: $small-screen) {
font-size: 0.9em;
position: relative;
}
a {
color: $brand-blue;
font-weight: bold;
text-decoration: none;
}
img {
max-width: 1.5em;
}
.usa-disclaimer-stage {
margin-bottom: 0;
margin-top: 0;
}
}