Merge pull request #858 from dod-ccpo/sticky-to

Sticky CTA Header

styles/atat.scss

@@ -43,6 +43,7 @@
 @import "components/usa_banner";
 @import "components/checklist";
 @import "components/dod_login_notice.scss";
+@import "components/sticky_cta.scss";
 
 @import "sections/login";
 @import "sections/home";

styles/components/_global_layout.scss

@@ -24,7 +24,6 @@ body {
   .global-panel-container {
     margin: $gap;
     max-width: $site-max-width;
-    overflow-x: auto;
     flex-grow: 1;
     -ms-flex-negative: 1;
 

styles/components/_sticky_cta.scss

@@ -0,0 +1,41 @@
+.sticky-cta {
+  @include media($small-screen) {
+    margin-left: -$gap * 4;
+  }
+
+  @include media($medium-screen) {
+    margin-left: -$gap * 7;
+  }
+}
+
+.sticky-cta.js-is-sticky {
+  width: 78.5%;
+}
+
+.sticky-cta-container {
+  display: flex;
+  justify-content: center;
+
+  background-color: $color-gray-lightest;
+  border-top: 1px solid $color-gray-lighter;
+  border-bottom: 1px solid $color-gray-lighter;
+  padding: 0 40px 0 40px;
+  box-shadow: $box-shadow;
+  margin-bottom: 20px;
+}
+
+.sticky-cta-text {
+  flex-grow: 1;
+}
+
+.sticky-cta-buttons {
+  display: flex;
+  justify-content: center;
+
+  button {
+    margin-top: auto;
+    margin-bottom: auto;
+    width: 144px;
+    margin-left: 33px;
+  }
+}

styles/core/_grid.scss

@@ -42,6 +42,5 @@
   &.col--grow {
     flex: 1;
     flex-grow: 1;
-    overflow: auto;
   }
 }