diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 0656c660..c5946951 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -2,6 +2,11 @@ margin-left: -$gap * 4; margin-right: -$gap * 5; z-index: 10; + background-color: $color-gray-lightest; + border-top: 1px solid $color-gray-lighter; + border-bottom: 1px solid $color-gray-lighter; + padding: 0 $gap * 5 0 $gap * 5; + box-shadow: $box-shadow; @include media($medium-screen) { margin-right: -$gap * 5; @@ -16,12 +21,6 @@ display: flex; align-items: center; - background-color: $color-gray-lightest; - border-top: 1px solid $color-gray-lighter; - border-bottom: 1px solid $color-gray-lighter; - padding: 0 $gap * 5 0 $gap * 5; - box-shadow: $box-shadow; - .usa-button { margin: $gap $gap * 1.5 $gap 0; width: 20rem; @@ -32,6 +31,12 @@ &-text { flex-grow: 1; + display: flex; + align-items: baseline; + } + &-context { + color: $color-gray; + margin-left: $gap; } &-buttons { diff --git a/templates/applications/new/step_1.html b/templates/applications/new/step_1.html index 4ce3d5b3..30db02a3 100644 --- a/templates/applications/new/step_1.html +++ b/templates/applications/new/step_1.html @@ -14,7 +14,7 @@ {% block portfolio_header %} {% include "portfolios/header.html" %} - {{ StickyCTA(text="Name and Describe New Application") }} + {{ StickyCTA(text="Name and Describe New Application", context="Step 1 of 3") }} {% endblock %} {% block application_content %} diff --git a/templates/applications/new/step_2.html b/templates/applications/new/step_2.html index fa0954e7..6760333c 100644 --- a/templates/applications/new/step_2.html +++ b/templates/applications/new/step_2.html @@ -8,7 +8,8 @@ {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %} {% block portfolio_header %} - {{ StickyCTA(text=application.name) }} + {% include "portfolios/header.html" %} + {{ StickyCTA(text=('portfolios.applications.new.step_2_header' | translate({"application_name": application.name}) ), context="Step 2 of 3") }} {% endblock %} {% block application_content %} diff --git a/templates/applications/new/step_3.html b/templates/applications/new/step_3.html index c963beee..6b2dbde3 100644 --- a/templates/applications/new/step_3.html +++ b/templates/applications/new/step_3.html @@ -6,7 +6,7 @@ {% block portfolio_header %} {% include "portfolios/header.html" %} - {{ StickyCTA(text=application.name) }} + {{ StickyCTA(text=('portfolios.applications.new.step_3_header' | translate({"application_name": application.name}) ), context="Step 3 of 3") }} {% endblock %} {% block application_content %} diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html index 4ba268c0..3d66dd6a 100644 --- a/templates/components/sticky_cta.html +++ b/templates/components/sticky_cta.html @@ -1,23 +1,26 @@ {% from 'components/icon.html' import Icon %} -{% macro StickyCTA(text, return_link_url=None, return_link_text=None) -%} -