diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 401a2ec81..c256d7315 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -30,3 +30,17 @@ } } } + +@mixin image-upload { + .image-upload { + .button, + p { + float: left; + } + + p { + margin-left: 1rem; + margin-top: 0.8rem; + } + } +} diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 6c5a08ae6..3490f745b 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -654,55 +654,70 @@ } .budget-investments-list { - .budget-investment{ - .no-image{ + .budget-investment { + .no-image { background: $brand; } - @include breakpoint(medium) { - .panel{ - padding:0 0.75rem 0 0; - .no-image{ - height: 245px; - width: 140px; - } - } - h3{ - font-size: 1.4rem; - } - .column:first-child{ - overflow: hidden; - } - .column:nth-child(2){ - float: left; - } - .column:last-child:not(:first-child){ - padding-top:0.75rem; - } - img{ - max-width: 12rem; - } - .budget-investment-content{ - ul{ - margin-bottom:0; - } + } +} + +.budget-investments-list .budget-investment { + + @include breakpoint(small) { + .no-image { + width: 100%; + max-width: 300px; + margin: 0 auto; + } + + .no-image::before { + content: ''; + display: block; + padding-top: 100%; + } + + h3 { + font-size: 1.3rem; + } + + .column:first-child { + text-align: center; + } + } + + @include breakpoint(medium) { + .panel { + padding: 0 0.75rem 0 0; + + .no-image { + height: 245px; + width: 140px; } } - @include breakpoint(small) { - .no-image{ - width: 100%; - max-width: 300px; - margin:0 auto; - &:before { - content: ""; - display: block; - padding-top: 100%; - } - } - h3{ - font-size: 1.3rem; - } - .column:first-child{ - text-align: center; + + h3 { + font-size: 1.4rem; + } + + .column:first-child { + overflow: hidden; + } + + .column:nth-child(2) { + float: left; + } + + .column:last-child:not(:first-child) { + padding-top: 0.75rem; + } + + img { + max-width: 12rem; + } + + .budget-investment-content { + ul { + margin-bottom: 0; } } } @@ -927,32 +942,33 @@ } } -.budget-investment-show{ - figure{ +.budget-investment-show { + + figure { margin: 1em 0 0; display: inline-block; - figcaption{ + + figcaption { font-size: $small-font-size; - margin-top:1rem; + margin-top: 1rem; } } } -.edit_budget_investment{ - .note-marked p{ - margin-bottom:0; - } - .image-upload{ - .button, p{ - float: left; - } - p{ - margin-left:1rem; - margin-top: 0.8rem; - } +.edit_budget_investment { + + @include image-upload; + + .note-marked p { + margin-bottom: 0; } } +.new_budget_investment { + + @include image-upload; +} + .investment-project-show .supports, .budget-investment-show .supports { border: 0; diff --git a/app/views/budgets/investments/_form.html.erb b/app/views/budgets/investments/_form.html.erb index 1d6a12903..78733ba9e 100644 --- a/app/views/budgets/investments/_form.html.erb +++ b/app/views/budgets/investments/_form.html.erb @@ -54,7 +54,12 @@
<%= investment_image_file_name(@investment) %>
+