diff --git a/app/assets/images/budgets/budget_multiple_heading_icon.png b/app/assets/images/budgets/budget_multiple_heading_icon.png new file mode 100644 index 000000000..14a3ec1eb Binary files /dev/null and b/app/assets/images/budgets/budget_multiple_heading_icon.png differ diff --git a/app/assets/images/budgets/budget_single_heading_icon.png b/app/assets/images/budgets/budget_single_heading_icon.png new file mode 100644 index 000000000..2a1f72e35 Binary files /dev/null and b/app/assets/images/budgets/budget_single_heading_icon.png differ diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index fbb7a3176..a634ecf07 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -665,7 +665,8 @@ code { display: flex; flex-wrap: wrap; - a { + a, + button { @include regular-button; margin-left: auto; } diff --git a/app/assets/stylesheets/admin/budgets/heading_mode.scss b/app/assets/stylesheets/admin/budgets/heading_mode.scss new file mode 100644 index 000000000..d3ee8eadd --- /dev/null +++ b/app/assets/stylesheets/admin/budgets/heading_mode.scss @@ -0,0 +1,77 @@ +.admin .heading-mode { + border-radius: rem-calc(12); + color: $admin-text; + display: flex; + flex-wrap: wrap; + max-width: $global-width * 0.6; + width: 100%; + + section { + @include grid-column-gutter; + display: flex; + flex-flow: column; + margin-bottom: $line-height; + width: 100%; + + @include breakpoint(medium) { + width: 50%; + + &:last-of-type { + border-left: $admin-border; + } + } + + &.single-heading-option h2::after { + content: image-url("budgets/budget_single_heading_icon.png"); + } + + &.multiple-heading-option h2::after { + content: image-url("budgets/budget_multiple_heading_icon.png"); + } + + h2::after { + display: block; + text-align: center; + } + } + + h1 { + margin-bottom: $line-height * 2; + margin-top: $line-height; + text-transform: uppercase; + width: 100%; + } + + h1, + h2 { + font-size: rem-calc(24); + text-align: center; + } + + h2 { + font-weight: 500; + padding-top: $line-height; + } + + p { + font-size: $small-font-size; + font-style: italic; + flex: 1; + } + + a { + @include hollow-button; + margin: 0 auto; + max-width: max-content; + } + + .close-button { + border: 3px solid $admin-text; + border-radius: 50%; + color: $admin-text; + font-size: rem-calc(23); + font-weight: bold; + height: rem-calc(30); + width: rem-calc(30); + } +} diff --git a/app/components/admin/budget_phases/form_component.html.erb b/app/components/admin/budget_phases/form_component.html.erb index e8e0822c0..3fcaab81c 100644 --- a/app/components/admin/budget_phases/form_component.html.erb +++ b/app/components/admin/budget_phases/form_component.html.erb @@ -4,6 +4,8 @@ <%= render "shared/errors", resource: phase %> + <%= render Admin::BudgetsWizard::ModelFieldComponent.new %> +
<%= t("#{i18n_namespace}.#{mode}.description") %>
- <%= t("admin.budgets_wizard.#{i18n_namespace}.continue") %> -
+ <%= t("admin.budgets_wizard.#{i18n_namespace}.continue") %> +