New design of the forms for creating debates and proposals

app/assets/stylesheets/admin.scss

@@ -315,7 +315,7 @@ $table-header:   #ecf1f6;
   }
 
   .admin-content {
-    .proposal-form {
+    .proposal-new {
       padding-top: 0;
     }
   }

app/assets/stylesheets/application.scss

@@ -38,7 +38,9 @@
 @import "tags";
 @import "admin/**/*";
 @import "budgets/**/*";
+@import "debates/**/*";
 @import "layout/**/*";
+@import "proposals/**/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";

app/assets/stylesheets/budgets/investments/form.scss

@@ -1,62 +1,3 @@
 .budget-investment-form {
-
-  .required-fields {
-    @include full-width-background($adjust-padding: true);
-    background: $light;
-    margin-bottom: $line-height;
-    padding-top: $line-height;
-  }
-
-  > fieldset > legend {
-    float: left;
-    font-size: rem-calc(36);
-    font-weight: bold;
-    margin-bottom: $line-height;
-    text-transform: uppercase;
-
-    + * {
-      clear: left;
-    }
-  }
-
-  select {
-    min-height: $line-height * 2;
-
-    @include breakpoint(medium) {
-      &:not(.js-add-language):not(.js-select-language) {
-        width: 50%;
-      }
-    }
-  }
-
-  .globalize-languages,
-  .translatable-fields {
-    @include grid-row-nest;
-    @include grid-column-gutter;
-  }
-
-  .sdg-related-list-selector {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  [type="submit"] {
-    @include regular-button;
-    font-size: map-get($button-sizes, large);
-    margin-top: $line-height;
-  }
-
-  .actions {
-    border: 6px solid $border;
-    border-radius: rem-calc(12);
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: $line-height * 2;
-    padding: $line-height * 2 $line-height;
-    text-align: center;
-
-    @include breakpoint(medium) {
-      width: 75%;
-    }
-  }
+  @extend %public-form;
 }

app/assets/stylesheets/budgets/investments/new.scss

@@ -1,85 +1,7 @@
 .budget-investment-new {
-  $border-width: 4px;
-  @include grid-column-gutter;
-
-  > :first-child:not(.print-info) {
-    @include full-width-background($adjust-padding: true);
-    background: $light;
-    margin-top: -$line-height;
-    padding-top: $line-height;
-  }
+  @extend %public-form-header;
 
   h1 {
-    margin-bottom: 0;
-  }
-
-  header {
-    @include has-fa-icon(building, regular, after);
-    align-items: center;
-    background-color: $body-background;
-    border: $border-width solid;
-    color: $brand-secondary;
-    border-bottom-right-radius: rem-calc(12);
-    border-top-right-radius: rem-calc(12);
-    display: flex;
-    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);
-      padding: $line-height * 2 0;
-
-      @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);
-        }
-      }
-
-      span span {
-        display: block;
-        font-size: 0.75em;
-        margin-top: $line-height / 2;
-      }
-    }
+    @include has-fa-icon(chart-pie, solid, after);
   }
 }

app/assets/stylesheets/debates/form.scss

@@ -0,0 +1,3 @@
+.debate-form {
+  @extend %public-form;
+}

app/assets/stylesheets/debates/new.scss

@@ -0,0 +1,15 @@
+.debate-new {
+  @extend %public-form-header;
+
+  h1 {
+    @include has-fa-icon(comment-alt, regular, after);
+  }
+
+  aside {
+    margin-top: $line-height;
+  }
+
+  .recommendations li::before {
+    color: $debates;
+  }
+}

app/assets/stylesheets/layout.scss

@@ -64,6 +64,20 @@ body {
   }
 }
 
+main {
+  display: block;
+
+  &.budget-investment-new,
+  &.debate-new,
+  &.proposal-new,
+  &.sdg-goals-index,
+  &.sdg-goal-show,
+  &.topic-edit,
+  &.topic-new {
+    @include grid-column-gutter;
+  }
+}
+
 h1,
 h2,
 h3,

app/assets/stylesheets/mixins/forms.scss

@@ -0,0 +1,178 @@
+@import "mixins/icons";
+@import "mixins/layouts";
+
+@mixin public-form-header {
+  $border-width: 4px;
+
+  h1 {
+    margin-bottom: 0;
+  }
+
+  header {
+    $icon-size: $line-height * 4;
+    $padding-right: rem-calc(20);
+    $icon-size-with-padding: $icon-size + $padding-right;
+    $polygon-size: $icon-size / 2;
+    @include background-till-left-of-screen;
+    @include brand-background($brand-secondary);
+    border: $border-width solid $brand-secondary;
+    border-bottom-right-radius: rem-calc(12);
+    border-top-right-radius: rem-calc(12);
+    margin-top: $line-height * 2;
+    padding: $line-height * 2 0;
+    position: relative;
+
+    @include breakpoint(small) {
+      &::after {
+        display: none;
+      }
+    }
+
+    @include breakpoint(large) {
+      $rounding-error: 6px;
+      padding-right: $icon-size-with-padding;
+      background-image: linear-gradient(
+        to right,
+        #{$brand-secondary} 0,
+        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
+        #{$body-background} calc(100% - #{$icon-size-with-padding}),
+        #{$body-background} 100%
+      );
+
+      &::after {
+        background: $body-background;
+        content: "";
+        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
+        display: block;
+        position: absolute;
+        right: calc(#{$icon-size-with-padding} - #{$rounding-error});
+        top: 0;
+        height: 100%;
+        width: $polygon-size;
+      }
+    }
+
+    &::before {
+      top: -$border-width;
+      height: calc(100% + #{$border-width * 2});
+    }
+
+    h1 {
+      $heading-icon-size: $icon-size * 0.85;
+      @include has-fa-icon(building, regular);
+      font-size: rem-calc(36);
+
+      @include breakpoint(small) {
+        &::after,
+        &::before {
+          display: none;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      @include breakpoint(medium) {
+        padding-right: $heading-icon-size * 2.5;
+
+        &::after {
+          display: block;
+          font-size: $heading-icon-size;
+          right: $heading-icon-size;
+        }
+      }
+
+      @include breakpoint(large) {
+        font-size: rem-calc(44);
+
+        &::after {
+          right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
+        }
+
+        &::before {
+          color: $brand-secondary;
+          display: block;
+          font-size: $icon-size;
+          right: $padding-right;
+        }
+      }
+
+      span {
+        display: block;
+        font-size: 0.75em;
+        margin-top: $line-height / 2;
+      }
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+}
+
+%public-form-header {
+  @include public-form-header;
+}
+
+@mixin public-form {
+
+  .required-fields {
+    @include full-width-background($adjust-padding: true);
+    background: $light;
+    margin-bottom: $line-height;
+    padding-top: $line-height;
+  }
+
+  > fieldset > legend {
+    float: left;
+    font-size: rem-calc(36);
+    font-weight: bold;
+    margin-bottom: $line-height;
+    text-transform: uppercase;
+
+    + * {
+      clear: left;
+    }
+  }
+
+  select {
+    min-height: $line-height * 2;
+
+    @include breakpoint(medium) {
+      &:not(.js-add-language):not(.js-select-language) {
+        width: 50%;
+      }
+    }
+  }
+
+  .globalize-languages,
+  .translatable-fields {
+    @include grid-row-nest;
+    @include grid-column-gutter;
+  }
+
+  [type="submit"] {
+    @include regular-button;
+    font-size: map-get($button-sizes, large);
+    margin-top: $line-height;
+  }
+
+  .actions {
+    border: 6px solid $border;
+    border-radius: rem-calc(12);
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: $line-height * 2;
+    padding: $line-height * 2 $line-height;
+    text-align: center;
+
+    @include breakpoint(medium) {
+      width: 75%;
+    }
+  }
+}
+
+%public-form {
+  @include public-form;
+}

app/assets/stylesheets/mixins/layouts.scss

@@ -87,7 +87,7 @@
   position: relative;
 
   &::before {
-    background: inherit;
+    background-color: inherit;
     content: "";
     height: 100%;
     position: absolute;