From 1560b73672479a1b38b9021b4cc1301e26d5c6c7 Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Thu, 10 Oct 2019 15:26:50 -0400
Subject: [PATCH] Create styles for new app sticky action footer

---
 styles/components/_footer.scss            |  1 +
 styles/components/_global_navigation.scss |  3 +++
 styles/elements/_action_group.scss        | 21 +++++++++++++++++++++
 templates/applications/new/step_1.html    |  3 ++-
 templates/applications/new/step_2.html    |  3 +--
 templates/applications/new/step_3.html    | 22 +++++++++++-----------
 6 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss
index e5975115..2b7fc552 100644
--- a/styles/components/_footer.scss
+++ b/styles/components/_footer.scss
@@ -1,4 +1,5 @@
 .app-footer {
+  z-index: 3;
   background-color: $color-white;
   border-top: 1px solid $color-gray-lightest;
   display: flex;
diff --git a/styles/components/_global_navigation.scss b/styles/components/_global_navigation.scss
index 75daa768..63bf0d41 100644
--- a/styles/components/_global_navigation.scss
+++ b/styles/components/_global_navigation.scss
@@ -1,6 +1,9 @@
 .global-navigation {
+  z-index: 2;
   background-color: $color-white;
   height: auto;
+  box-shadow: $box-shadow;
+  margin-bottom: -$footer-height * 2.5;
 
   .sidenav__link {
     padding-right: $gap * 2;
diff --git a/styles/elements/_action_group.scss b/styles/elements/_action_group.scss
index 379c2642..1f79f7d2 100644
--- a/styles/elements/_action_group.scss
+++ b/styles/elements/_action_group.scss
@@ -29,3 +29,24 @@
     }
   }
 }
+
+.action-group-footer {
+  @extend .action-group;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: $gap;
+  padding-bottom: $gap;
+
+  position: fixed;
+  bottom: $footer-height;
+  background: white;
+  right: 0;
+  padding-right: $gap * 4;
+  border-top: 1px solid $color-gray-light;
+  width: 100%;
+  z-index: 1;
+}
diff --git a/templates/applications/new/step_1.html b/templates/applications/new/step_1.html
index f312f55b..385d80de 100644
--- a/templates/applications/new/step_1.html
+++ b/templates/applications/new/step_1.html
@@ -38,7 +38,8 @@
         </div>
       </div>
 
-      <span class="action-group">
+
+      <span class="action-group-footer">
         {% block next_button %}
           {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }}
         {% endblock %}
diff --git a/templates/applications/new/step_2.html b/templates/applications/new/step_2.html
index 53c1ad44..bb622f8f 100644
--- a/templates/applications/new/step_2.html
+++ b/templates/applications/new/step_2.html
@@ -61,8 +61,7 @@
         </div>    
       </div>
     </div>    
-
-      <span class="action-group">
+      <span class="action-group-footer">
         {% block next_button %}
           {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
         {% endblock %}
diff --git a/templates/applications/new/step_3.html b/templates/applications/new/step_3.html
index 40b350b9..cdf458e4 100644
--- a/templates/applications/new/step_3.html
+++ b/templates/applications/new/step_3.html
@@ -24,17 +24,17 @@
     user_can(permissions.CREATE_APPLICATION_MEMBER)) }}
     
 
-    <span class="action-group">
-      <a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">  
-        Return to Application Settings
-      </a>
-      <a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_2', application_id=application.id) }}">
-        Previous
-      </a>
-      <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
-        Cancel
-      </a>
-    </span>
+  <span class="action-group-footer">
+    <a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">  
+      Return to Application Settings
+    </a>
+    <a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_2', application_id=application.id) }}">
+      Previous
+    </a>
+    <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
+      Cancel
+    </a>
+  </span>
   
 {% endblock %}