From 55b12ba633762def69be8e33e78b80409af732a7 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Fri, 30 Aug 2019 14:58:18 -0400
Subject: [PATCH] Use css variables for banner heights

---
 styles/components/_global_layout.scss |  4 ++--
 styles/components/_sticky_cta.scss    |  1 +
 styles/components/_topbar.scss        |  4 ++--
 styles/components/_usa_banner.scss    |  2 +-
 styles/core/_variables.scss           |  3 +++
 styles/elements/_sidenav.scss         | 16 ++++++++--------
 6 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss
index 26d2bdeb..8fbda16e 100644
--- a/styles/components/_global_layout.scss
+++ b/styles/components/_global_layout.scss
@@ -25,12 +25,12 @@ body {
     margin: $gap;
     flex-grow: 1;
     -ms-flex-negative: 1;
-    top: 68px;
+    top: $usa-banner-height + $topbar-height;
     position: relative;
 
     @include media($medium-screen) {
       margin: $gap * 2;
-      top: 68px;
+      top: $usa-banner-height + $topbar-height;
     }
   }
 }
diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss
index 31d2fa80..2d841840 100644
--- a/styles/components/_sticky_cta.scss
+++ b/styles/components/_sticky_cta.scss
@@ -10,6 +10,7 @@
 
   &.js-is-sticky {
     width: calc(100% - 25rem);
+    top: $usa-banner-height + $topbar-height;
   }
 
   .sticky-cta-container {
diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss
index 06ee22d1..9e180685 100644
--- a/styles/components/_topbar.scss
+++ b/styles/components/_topbar.scss
@@ -1,9 +1,9 @@
 .topbar {
   background-color: $color-blue-darkest;
   border-bottom: 1px solid $color-black;
-  height: 48px;
+  height: $topbar-height;
   position: fixed;
-  top: 28px;
+  top: $usa-banner-height;
   width: 100%;
   z-index: 10;
 
diff --git a/styles/components/_usa_banner.scss b/styles/components/_usa_banner.scss
index 68f63494..b9455683 100644
--- a/styles/components/_usa_banner.scss
+++ b/styles/components/_usa_banner.scss
@@ -4,7 +4,7 @@
   padding: ($gap / 2) $gap;
   z-index: 15;
   position: fixed;
-  height: 28px;
+  height: $usa-banner-height;
   width: 100%;
 
   img {
diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss
index 4ec4ab39..dc609fe4 100644
--- a/styles/core/_variables.scss
+++ b/styles/core/_variables.scss
@@ -13,6 +13,9 @@ $hover-transition-time: 0.2s;
 $search-input-height: 4.4rem;
 $search-button-width: 5rem;
 $footer-height: 5rem;
+$usa-banner-height: 2.8rem;
+$sidenav-expanded-width: 25rem;
+$sidenav-collapsed-width: 10rem;
 
 /*
  * USWDS Variables
diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss
index 6674b2e7..4df6c196 100644
--- a/styles/elements/_sidenav.scss
+++ b/styles/elements/_sidenav.scss
@@ -7,12 +7,12 @@
   box-shadow: $box-shadow;
   overflow: hidden;
   position: relative;
-  top: 76px;
-  width: 25rem;
+  top: $topbar-height + $usa-banner-height;
+  width: $sidenav-expanded-width;
 
   &--minimized {
     @extend .sidenav-container;
-    width: 10rem;
+    width: $sidenav-collapsed-width;
   }
 
   &__fixed {
@@ -20,7 +20,7 @@
   }
 
   .sidenav {
-    width: 25rem;
+    width: $sidenav-expanded-width;
 
     @include media($large-screen) {
       margin: 0px;
@@ -54,10 +54,10 @@
         margin: ( 4 * $gap) 0;
         position: fixed;
         overflow-y: scroll;
-        top: 106px;
-        bottom: 35px;
+        top: $topbar-height + $usa-banner-height + 4rem;
+        bottom: $footer-height;
         left: 0;
-        width: 25rem;
+        width: $sidenav-expanded-width;
       }
 
       list-style: none;
@@ -196,7 +196,7 @@
   &--minimized {
     @extend .sidenav;
 
-    width: 10rem;
+    width: $sidenav-collapsed-width;
     margin: 0px;
   }
 }