frontend/source/sass/components/_header.scss
@import '../base/variables';
// the "official gov site" banner
#banner {
color: $color-gray-darker;
font-size: 85%;
background: $color-white;
padding: .2em 0;
text-align: center;
p {
margin: 0;
font-size: $small-font-size;
}
#usa img {
vertical-align: baseline;
position: relative;
top: 1px;
margin-right: .3em;
}
@include media($medium-screen) {
text-align: left;
#usa {
float: left;
}
#site-status {
float: right;
a {
color: $color-white;
}
}
}
&.banner__non-prod {
background: $color-gold;
color: $color-gray-dark;
z-index: 10000;
.developer-nav {
float: right;
font-size: $small-font-size;
}
a, details, summary {
color: $color-gray-darker;
}
details {
font-size: $small-font-size;
cursor: pointer;
float: right;
position: relative;
padding-left: .2em;
ul {
background: $color-gold;
li {
a {
display: block;
white-space: nowrap;
text-decoration: none;
padding: .3em;
&:hover, &:focus {
background: $color-gold-lightest;
}
.email {
font-size: $em-base;
text-decoration: underline;
}
}
}
border: 1px solid $color-black;
list-style-type: none;
position: absolute;
top: .3em;
left: 0;
}
}
}
}
header {
color: $color-white;
background: $color-gray-darker;
background-image: url(../../images/background-header.svg);
background-size: 100%;
padding-bottom: $space-4x; //to create "stacked" card look
@include antialias();
}
.hero {
margin-bottom: $space-8x;
a {
color: $color-green-bright;
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.hero-callout {
border-left: 4px solid $color-gray;
padding: 0 $space-3x;
p {
font-size: $medium-font-size;
margin: 0;
}
}
.base-header {
display: flex;
margin-top: 3em;
+ .row {
margin-top: 2em;
}
}
.logo {
display: inline-block;
height: 42px;
max-width: none;
padding-bottom: 0;
}
.description-main {
color: $color-white;
font-size: $display-font-size;
margin-top: 0;
margin-bottom: .3em;
padding-right: 1em;
}
.description-secondary {
color: $color-gray-light;
font-size: $h4-font-size;
font-weight: $font-weight-normal;
line-height: 1.5;
letter-spacing: normal;
margin-bottom: 2em;
}
.price-callout {
p {
opacity: 1;
padding-left: 40px;
margin: 0;
}
h3 {
font-size: $base-font-size;
font-weight: $font-weight-normal;
border-bottom: 1px solid $color-gray-dark;
padding-bottom: $space-1x;
margin-top: $space-1x;
margin-bottom: 0;
}
}
.user-id {
margin: 0 0 0.8rem 0;
padding-left: 2.8rem;
font-size: 1.5rem;
> a {
color: $color-white;
}
}
@media all and (max-width: 890px){
nav ul {
@include span-columns(8 of 12);
@include shift(2);
}
}
nav {
position: relative;
&:after {
content: " ";
display: table;
clear: both;
}
ul {
list-style: none;
text-align: left;
color: $color-white;
padding: 0;
margin-top: 0;
margin-bottom: 0;
li {
font-size: $base-font-size;
list-style: none;
display: inline-block;
margin: 0 $space-2x;
border-bottom: $space-1x solid transparent; //so pages with no applicable item still have the right spacing
&:first-child {
margin-left: 0em;
}
&:last-child {
margin-right: 0em;
}
&.selected {
border-bottom: $space-1x solid $color-green-bright;
a {
font-weight: $font-weight-bold;
display: block;
padding-bottom: $space-half;
}
}
a {
color: $color-white;
text-decoration: none;
&:hover,
&:visited,
&:visited:hover,
&:visited:active,
&:visited:focus{
color: $color-white;
}
}
}
}
}
@media screen and (max-width: $medium-screen) {
.logo-container {
}
nav {
margin-left: -20px; // to account for container padding
ul {
padding: 1em;
margin-top: 1em;
width: 100%;
.nav-user-id {
max-width: 400px;
}
}
}
}