diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss new file mode 100644 index 000000000..474c07d37 --- /dev/null +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -0,0 +1,74 @@ +.budget-investment-new { + $border-width: 4px; + + > * { + @include grid-row; + @include grid-column-gutter; + } + + header { + @include has-fa-icon(building, regular, after); + align-items: center; + border: $border-width solid; + color: $brand-secondary; + border-bottom-right-radius: rem-calc(12); + border-top-right-radius: rem-calc(12); + display: flex; + margin-bottom: $line-height * 2; + margin-top: $line-height * 2; + + @include breakpoint(large) { + padding-right: $line-height; + } + + &::after { + display: none; + + @include breakpoint(large) { + display: block; + font-size: rem-calc(100); + margin-left: $line-height; + } + } + + h1 { + @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); + margin-bottom: 0; + padding: $line-height * 2 0; + position: relative; + + @include breakpoint(large) { + clip-path: polygon( + -100vw -#{$border-width}, + 100% -#{$border-width}, + calc(100% - #{rem-calc(20)}) 50%, + 100% calc(100% + #{$border-width}), + -100vw calc(100% + #{$border-width}) + ); + font-size: rem-calc(44); + } + + &::before { + top: -$border-width; + 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); + } + } + } + } +} diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss index ead4fdaf8..fd8d96cab 100644 --- a/app/assets/stylesheets/mixins/colors.scss +++ b/app/assets/stylesheets/mixins/colors.scss @@ -1,5 +1,5 @@ -@mixin brand-background($invert-selection: true) { - background-color: $brand; +@mixin brand-background($color: $brand, $invert-selection: true) { + background-color: $color; color: $white; @if $invert-selection { diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index 38f53974e..40fd65503 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -27,3 +27,15 @@ max-width: none; } } + +@mixin background-till-left-of-screen { + &::before { + background: inherit; + content: ""; + height: 100%; + position: absolute; + top: 0; + right: 100%; + width: 100vw; + } +} diff --git a/app/views/budgets/investments/new.html.erb b/app/views/budgets/investments/new.html.erb index 85bea3c36..7eb136bfa 100644 --- a/app/views/budgets/investments/new.html.erb +++ b/app/views/budgets/investments/new.html.erb @@ -1,7 +1,11 @@ -