Summary Table
Categories |
Total Count |
PII |
0 |
URL |
0 |
DNS |
0 |
EKL |
0 |
IP |
0 |
PORT |
0 |
VsID |
0 |
CF |
0 |
AI |
0 |
VPD |
0 |
PL |
0 |
Other |
0 |
File Content
// CSS Grid Structure Begins
.wrapper {
// This is the 'master' grid.
display: grid;
grid-template-columns: 210px auto;
grid-template-rows: 42px auto;
grid-template-areas: 'nav-gap header' 'nav content' 'nav footer';
display: -ms-grid; // For IE 11
-ms-grid-rows: 42px 1fr; // For IE 11
-ms-grid-columns: 210px 1fr; // For IE 11
height: 100%;
// z-index: 1;
}
.content {
// This is a secondary 'grid.'
grid-area: content;
grid-template-columns: auto;
grid-template-rows: 0 111px auto 36px;
grid-template-areas: 'section' 'section' 'article' 'footer';
-ms-grid-row: 2; // For IE 11
-ms-grid-column: 2; // For IE 11
// z-index: 20;
}
header {
// Top section of screens
grid-area: header;
padding-top: 10px; // Positions text
min-width: 1284px;
background-color: #fff;
border-bottom: 3px solid $color-danger;
color: $color-primary;
-ms-grid-row: 1; // For IE 11
-ms-grid-column: 2; // For IE 11
// z-index: 30;
}
nav {
grid-area: nav;
-ms-grid-row: 2; // For IE 11
-ms-grid-column: 1; // For IE 11
transition: all ease-in 0.1s; // Open-close animation
// z-index: 10;
}
main {
grid-area: main;
}
section {
grid-area: section;
-ms-grid-row: 2;
-ms-grid-column: 2;
}
article {
grid-area: article;
margin: 0 auto;
}
footer {
// Not current used for content
grid-area: footer;
height: 36px;
// z-index: 15;
}
.nav-gap {
grid-area: nav-gap; // Preserves space above NAV element
// width: 210px;
background-color: #fff;
border-bottom: 3px solid $color-danger;
color: $color-primary;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
// End of CSS Grid Structure
.container {
position: relative; // Allows position-based animation
margin: 0 auto; // Centers the DIV
padding: 0 24px;
width: $width-container; // Sets up fixed width of center sections
}
.fade-in {
// Implements animation
opacity: 0;
animation: fadeIn ease-in 1; // Calls animation below
animation-fill-mode: forwards;
animation-duration: 0.6s;
animation-delay: 0.1s;
}
.slide-in {
// Implements animation
opacity: 0;
animation: slideIn ease-in 1; // Calls animation below
animation-fill-mode: forwards;
animation-duration: 0.4s;
}
.drop-in {
// Implements animation
opacity: 0;
animation: slideIn linear 1; // Calls animation below
animation-fill-mode: forwards;
animation-duration: 0.3s;
animation-delay: 0;
}
// Container Animations
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
opacity: 0;
right: 21px;
}
to {
opacity: 1;
right: 0;
}
}
@keyframes dropIn {
from {
height: 0;
opacity: 0;
top: 15px;
}
to {
height: 100%;
opacity: 1;
top: 0;
}
}
.row {
// Adds buffer for stacking sections
display: block;
margin-bottom: 15px; // background-color: lightyellow;
&.bottom {
margin-bottom: 24px;
}
}
.col {
display: block;
margin-right: 18px;
float: left; // background-color: #ddd;
// Background-colors are for troubleshooting
&.one {
width: $width-col-one; // background-color: pink;
}
&.two {
width: $width-col-two; // background-color: lightblue;
}
&.three {
margin-right: 0;
width: $width-col-three; // background-color: lightgreen;
}
&.four {
margin-right: 0;
width: $width-col-four; // background-color: lightslategray;
}
&.no-flow {
margin-right: 0; // background-color: magenta;
} // Below are temporary FPPS-reconciliation classes
&.one-four {
width: 284px; // background-color: pink;
}
&.two-four {
width: 586px; // background-color: orange;
}
&.three-four {
width: 888px; // background-color: lightgreen;
}
&.four-four {
width: 1191px; // background-color: lightblue;
}
&.show {
padding: 6px 9px;
height: 24px;
background-color: orange;
font-size: $font-size-base;
}
}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '';
display: table;
clear: both;
}