src/sass/eqip.scss
html {
-webkit-overflow-scrolling: touch;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.5;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.7rem;
}
h5 {
font-size: 1.3rem;
}
h6 {
font-size: 1rem;
}
ul {
margin-top: 0;
}
p {
margin-bottom: 2rem;
}
/* set up structure to go from a table-style to floated block style */
.eapp-structure-wrap {
display: block;
width: 100%;
.eapp-structure-row {
display: flex;
.eapp-structure-left,
.eapp-structure-right {
vertical-align: top;
}
.eapp-structure-left {
width: 20%;
min-width: 32rem;
&.eapp-navigation {
background: $color-gray-extra-lightest;
border-right: 1px solid $color-gray-lightest;
min-height: 100vh;
}
}
.eapp-structure-right {
width: 80%;
padding: 1rem 1rem 1rem 5rem;
&.eapp-title {
vertical-align: bottom;
}
.eapp-form {
padding-bottom: 2rem;
}
}
}
p {
line-height: 1.6;
margin-top: 0;
}
}
.usa-header {
font-family: $eapp-serif;
background-color: $eapp-blue-dark;
min-height: 16.7rem;
border-bottom: none;
.usa-banner-inner {
margin: 0;
max-width: none;
.usa-banner-button {
display: inline-block;
width: auto;
height: auto;
}
}
.eapp-header {
min-height: 14.5rem;
.eapp-logo {
height: 14.5rem;
background: $eapp-blue-darkest;
color: $eapp-blue-lighter;
.eapp-logo-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.eapp-logo-icon {
margin-right: 5%;
}
.eapp-logo-text {
font-size: 4rem;
font-weight: $eapp-bold;
color: $color-white;
font-variant-numeric: lining-nums;
-moz-font-feature-settings: 'lnum';
-webkit-font-feature-settings: 'lnum';
font-feature-settings: 'lnum';
}
}
}
/* logout control */
.eapp-logout {
position: absolute;
right: 25px;
top: 2.2rem;
z-index: 100;
font-family: $eapp-sans;
font-size: 1.6rem;
button {
display: inline-block;
color: $eapp-grey;
background: none;
font-weight: initial;
font-size: 1.6rem;
&:hover {
color: #fff;
}
}
a {
display: inline-block;
padding: 1rem 1.5rem;
color: $eapp-grey;
text-decoration: none;
&:hover {
color: #fff;
}
}
}
}
}
.header-container {
// This is necessary to make sure the header is always on top of content
.header {
z-index: 1000;
overflow: hidden;
}
}
@media screen and (min-width: 1001px) {
.sticky-header {
.header-container {
height: 16.7rem;
.usa-banner-header {
display: none;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
overflow: hidden;
}
.usa-header,
.usa-header > .eapp-structure-wrap {
height: 6rem;
min-height: 6rem;
}
.usa-header.usa-header-basic {
.eapp-structure-wrap.eapp-header > .eapp-structure-row {
.eapp-structure-right {
@keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.eapp-logout {
position: absolute;
top: 0;
animation: fadeIn 0.3s;
-moz-animation: fadeIn 0.3s;
-webkit-animation: fadeIn 0.3s;
-o-animation: fadeIn 0.3s;
}
.title {
max-height: 5rem;
line-height: 1.3;
margin-top: -1rem;
.title-text {
transition: all 400ms ease-out;
display: block;
font-size: 1.8rem;
line-height: 1;
}
.crumb {
transition: all 400ms ease-out;
font-size: 1rem;
color: $eapp-blue-lighter;
}
}
}
.eapp-structure-left.eapp-logo {
height: 5.7rem;
min-height: 5.7rem;
img,
span,
a {
height: 0;
font-size: 0;
opacity: 1;
}
}
}
}
}
}
}
/* horizontal progress bar, inner div width to be adjusted via JS */
.eapp-progress {
position: relative;
height: 0.7rem;
background: $eapp-grey-lightest;
.eapp-progress-current {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: $eapp-green;
width: 0;
transition: width 0.8s;
}
}
/* frame out the live form area for consistency */
.eapp-structure-right.eapp-core {
padding-top: 5rem !important;
padding-bottom: 4rem !important;
}
.hidden {
display: none !important;
}
.visible {
display: initial;
visibility: visible;
}
.clear {
float: none;
clear: both;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.title-case {
text-transform: capitalize;
}
.no-gutter {
margin-left: initial;
margin-right: initial;
max-width: 100%;
}
.disabled,
[disabled],
[readonly] {
background-color: #fff;
opacity: 0.35;
&[type='checkbox'],
&[type='radio'] {
opacity: 0;
}
}
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
background-color: #fff !important;
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
@-ms-viewport {
width: device-width;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade.in {
opacity: 0;
animation: fadeIn ease-in 1;
-moz-animation: fadeIn ease-in 1;
-webkit-animation: fadeIn ease-in 1;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-duration: 0.7s;
-moz-animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;
&.animate {
animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
}
}
// eApp section focus
a.eapp-section-focus:focus {
outline: none;
}
// List styles
.usa-list-inline {
padding-left: 0;
list-style: none;
margin-top: 0;
margin-bottom: 0;
}
.usa-list-inline li {
display: inline-block;
margin-bottom: 0;
@media all and (max-width: 980px) {
display: block;
}
}
.usa-list-inline li:not(:last-child),
.usa-list-inline-justified li:not(:last-child) {
margin-right: 1rem;
@media all and (max-width: 980px) {
margin-right: 0;
}
}
.usa-list-inline-justified {
display: flex;
justify-content: space-between;
@media all and (max-width: 980px) {
display: block;
}
}
.usa-list-inline-justified li {
width: 100%;
}