Create styles for new app sticky action footer

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;

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;

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;
+}

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 %}

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 %}

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 %}