diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss index d7a698e4d..c60ad1a73 100644 --- a/app/assets/stylesheets/budgets/investments/new.scss +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -34,12 +34,30 @@ @include brand-background($brand-secondary); @include background-till-left-of-screen; @include has-fa-icon(chart-pie, solid, after); - align-items: center; - display: flex; flex: 1; font-size: rem-calc(36); padding: $line-height * 2 0; + @include breakpoint(small) { + &::after { + display: none; + } + } + + @include breakpoint(medium) { + padding-right: 4em; + + &::after { + display: block; + font-size: 2em; + margin-right: rem-calc(60); + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + } + } + @include breakpoint(large) { clip-path: polygon( -100vw -#{$border-width}, @@ -56,18 +74,7 @@ height: calc(100% + 2 * #{$border-width}); } - &::after { - display: none; - - @include breakpoint(medium) { - display: block; - font-size: 2em; - margin-left: auto; - margin-right: rem-calc(60); - } - } - - span span { + span { display: block; font-size: 0.75em; margin-top: $line-height / 2; diff --git a/app/views/budgets/investments/new.html.erb b/app/views/budgets/investments/new.html.erb index 5c9b3b2a6..6ffeade7d 100644 --- a/app/views/budgets/investments/new.html.erb +++ b/app/views/budgets/investments/new.html.erb @@ -3,17 +3,15 @@

- - <%= t("budgets.investments.form.title") %> + <%= t("budgets.investments.form.title") %> - <% if @budget.single_heading? %> - - <%= t("budgets.investments.form.subtitle", - heading: @budget.headings.first.name, - price: @budget.formatted_heading_price(@budget.headings.first)) %> - - <% end %> - + <% if @budget.single_heading? %> + + <%= t("budgets.investments.form.subtitle", + heading: @budget.headings.first.name, + price: @budget.formatted_heading_price(@budget.headings.first)) %> + + <% end %>