decidim-core 0.15.2 → 0.16.0

data/app/assets/stylesheets/decidim/layouts/_home.scss

@@ -178,7 +178,7 @@
 }
 
 .home-section:nth-of-type(2n+1){
-  background: $light-gray-dark;
+  background-color: $light-gray-dark;
 }
 
 .subhero{

data/app/assets/stylesheets/decidim/modules/_buttons.scss

@@ -21,6 +21,10 @@
       letter-spacing: 0;
     }
   }
+
+  &.button--right{
+    float: right;
+  }
 }
 
 // Overwrite Foundation hover styles in hollow disabled buttons

data/app/assets/stylesheets/decidim/modules/_cards.scss

@@ -446,6 +446,16 @@ $datetime-bg: $primary;
   @include breakpoint(medium){
     padding-left: $card-padding;
   }
+
+  svg{
+    flex-basis: 15%;
+    flex-shrink: 0;
+  }
+
+  svg + div{
+    max-width: calc(85% - #{$global-margin});
+    overflow-wrap: break-word;
+  }
 }
 
 .card--list__icon{
@@ -752,7 +762,7 @@ $datetime-bg: $primary;
     content: " ";
     height: $border-width;
     display: inline-block;
-    background: $card-bg;
+    background-color: $body-background;
     position: absolute;
     left: 0;
     right: 0;
@@ -922,10 +932,16 @@ $datetime-bg: $primary;
 .card__top{
   @extend .card__footer;
 
+  border-top: 0;
+
   .card__content{
     line-height: $global-lineheight;
     padding: $card-padding-small / 4 $card-padding-small;
 
+    > :first-child{
+      flex-shrink: 0;
+    }
+
     @include breakpoint(medium){
       padding: $card-padding / 4 $card-padding;
     }

data/app/assets/stylesheets/decidim/modules/_conference-programme.scss

@@ -96,10 +96,6 @@
     @include breakpoint(medium up){
       > .row:nth-child(2){
         margin-top: -$global-margin * .5;
-
-        > :nth-child(2){
-          margin-top: -$global-margin * .5;
-        }
       }
     }
 

data/app/assets/stylesheets/decidim/modules/_filters.scss

@@ -1,6 +1,4 @@
 //Variables
-
-$filters-bg: darken($light-gray, 2.5);
 $filters-border: $border;
 $filters-padding: 1rem;
 $filters-padding-x: 1rem;
@@ -83,6 +81,43 @@ $filters-padding-y: 1rem;
   .button{
     margin-bottom: 0;
   }
+
+  .section-title{
+    text-transform: uppercase;
+    color: $primary;
+    text-decoration: underline;
+    margin-right: $global-margin;
+  }
+}
+
+.filters__section--general{
+  @extend .filters__section;
+
+  padding: 0;
+
+  &:first-of-type,
+  &:last-of-type{
+    padding: 0;
+  }
+
+  > :first-child{
+    padding: $filters-padding-x $filters-padding-y;
+
+    &:hover{
+      background: $light-gray;
+    }
+  }
+
+  &.no-results{
+    .section-title{
+      color: $muted;
+      text-decoration: none;
+    }
+
+    > *{
+      opacity: .25;
+    }
+  }
 }
 
 .filters__info__title{

data/app/assets/stylesheets/decidim/modules/_floating-helper.scss

@@ -0,0 +1,106 @@
+.floating-helper{
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+
+.floating-helper__layout{
+  position: relative;
+}
+
+.floating-helper__trigger{
+  position: fixed;
+  right: 0;
+  display: inline-flex;
+  cursor: pointer;
+  background-color: $white;
+  border-bottom-left-radius: 100px;
+  border-top-left-radius: 100px;
+
+  @include breakpoint(small only){
+    bottom: $global-margin * 2;
+  }
+
+  @include breakpoint(medium){
+    top: $global-margin * 2;
+    position: absolute;
+  }
+}
+
+.floating-helper__text{
+  color: $secondary;
+  background-color: rgba($secondary, .1);
+  font-size: rem-calc(14);
+  font-weight: $global-weight-bold;
+  border-bottom-left-radius: 100px;
+  border-top-left-radius: 100px;
+  padding: $global-padding / 8 $global-padding / 2 $global-padding / 8 $global-padding;
+}
+
+.floating-helper__icon{
+  color: $white;
+  background-color: $secondary;
+  padding: $global-padding / 8 $global-padding / 2;
+}
+
+.floating-helper__wrapper{
+  @include flex;
+}
+
+.floating-helper__content{
+  background-color: rgba($secondary, .1);
+  border-top: 5px solid $secondary;
+  margin-bottom: $global-margin * 3;
+  padding: $global-padding * 2;
+  width: 100%;
+
+  @include breakpoint(medium){
+    padding: $global-padding * 3 $global-padding * 2 $global-padding * 2;
+  }
+}
+
+.floating-helper__content-inner{
+  position: relative;
+
+  @include breakpoint(medium){
+    @include flexgap($global-margin * 3);
+  }
+}
+
+.floating-helper__icon-big{
+  border-radius: 50%;
+  background-color: rgba($secondary, .1);
+  flex-shrink: 0;
+  color: $secondary;
+
+  @include flex;
+  @include flex-align($x: center, $y: middle);
+  @include square(70px);
+}
+
+.floating-helper__bottom{
+  text-align: right;
+
+  @include breakpoint(medium){
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.floating-helper__link{
+  font-weight: $global-weight-bold;
+  text-decoration: underline;
+}
+
+.floating-helper__content-close{
+  background-color: $secondary;
+  color: $white;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  @include flex;
+  @include flex-align($x: center, $y: middle);
+  @include square(1.5rem);
+}

data/app/assets/stylesheets/decidim/modules/_forms.scss

@@ -1,5 +1,7 @@
 /* Froms foundation overwrites */
 
+$checkboxes-minimum-width: 200px;
+
 .input-group-button button{
   height: 2.5rem;
   padding: .5rem 1rem;
@@ -29,3 +31,23 @@ label > [type='radio']{
     flex-shrink: 0;
   }
 }
+
+.checkboxes{
+  margin-bottom: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  &::after{ /* Align last row to left */
+    min-width: $checkboxes-minimum-width;
+    content: "";
+  }
+
+  label{
+    min-width: $checkboxes-minimum-width;
+
+    input[type=checkbox]{
+      vertical-align: middle;
+    }
+  }
+}

data/app/assets/stylesheets/decidim/modules/_help.scss

@@ -29,6 +29,10 @@
 
 // Extend Foundation defaults
 .tooltip{
+  &.expanded{
+    max-width: 100%;
+  }
+
   &.light{
     background-color: $body-background;
     color: $body-font-color;

data/app/assets/stylesheets/decidim/modules/_layout.scss

@@ -1,5 +1,6 @@
 .wrapper{
   padding: 1.2rem 1rem;
+  position: relative;
 
   @include breakpoint(medium){
     padding: 5rem 1.5rem 3rem;

data/app/assets/stylesheets/decidim/modules/_margins.scss

@@ -7,6 +7,7 @@ $margin-l: $global-margin * 5;
 //Sections
 .section{
   margin-bottom: $margin-sm;
+  word-wrap: break-word;
 
   @include breakpoint(large){
     margin-bottom: $margin-m;

data/app/assets/stylesheets/decidim/modules/_modules.scss

@@ -44,10 +44,10 @@
 @import "docs-manager";
 @import "horizontal-tabs";
 @import "conversation";
-@import "orgchart";
 @import "badges";
 @import "hover-section";
 @import "list-request";
+@import "floating-helper";
 
 //Process elements
 @import "process-header";

data/app/assets/stylesheets/decidim/modules/_navbar.scss

@@ -321,7 +321,7 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 $primary;
     }
   }
 
-  a:first-of-type::after{
+  a::before{
     content: "";
     margin-left: .5rem;
     margin-right: .5rem;
@@ -331,6 +331,10 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 $primary;
     border-left: $border;
     vertical-align: middle;
   }
+
+  a:first-of-type::before{
+    display: none;
+  }
 }
 
 /* Menu icon and off-canvas */

data/app/assets/stylesheets/decidim/modules/_order-by.scss

@@ -4,9 +4,19 @@ $order-border: $border;
 /* Order by styles */
 .order-by{
   margin-bottom: 1rem;
-  display: flex;
+  display: inline-flex;
   align-items: baseline;
   flex-wrap: wrap;
+
+  & + &{
+    @include breakpoint(medium){
+      margin-left: $global-margin;
+    }
+
+    @include breakpoint(large){
+      margin-left: $global-margin * 3;
+    }
+  }
 }
 
 .order-by__dropdown{

data/app/assets/stylesheets/decidim/modules/_process-header.scss

@@ -1,21 +1,48 @@
 .process-header{
-  margin-bottom: $margin-sm;
-
-  @include breakpoint(medium){
-    margin-bottom: $margin-m;
-  }
+  background-image: linear-gradient(to right, rgba($black, .8) 50%, $primary 50%);
 
   .heading2{
     font-weight: bold;
   }
 }
 
+.process-header__inner{
+  position: relative;
+
+  @include flex;
+  @include flex-align($x: center);
+}
+
 .process-header__main{
   background-size: cover;
-  position: relative;
+  position: absolute;
   z-index: 0;
-  display: flex;
-  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: rem-calc(1920);
+  margin: 0 auto;
+  background-color: lighten($dark-gray, 30);
+
+  // decorators
+  @include breakpoint(small){
+    -webkit-clip-path: polygon(0 0, 95% 0, 80% 100%, 0% 100%);
+    clip-path: polygon(0 0, 95% 0, 80% 100%, 0% 100%);
+  }
+
+  @include breakpoint(large){
+    -webkit-clip-path: polygon(0 0, 90% 0, 70% 100%, 0% 100%);
+    clip-path: polygon(0 0, 90% 0, 70% 100%, 0% 100%);
+  }
+
+  @include breakpoint(xlarge){
+    -webkit-clip-path: polygon(0 0, 80% 0, 70% 100%, 0% 100%);
+    clip-path: polygon(0 0, 80% 0, 70% 100%, 0% 100%);
+  }
+
+  @include breakpoint(100rem){
+    -webkit-clip-path: polygon(0 0, 75% 0, 65% 100%, 0% 100%);
+    clip-path: polygon(0 0, 75% 0, 65% 100%, 0% 100%);
+  }
 
   &::after{
     content: "";
@@ -23,6 +50,7 @@
     position: absolute;
     z-index: -1;
     top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba($black, .6);
@@ -32,7 +60,6 @@
 .process-header__container{
   position: relative;
   z-index: 1;
-  padding: 0 0 0 1rem;
 
   @include breakpoint(mediumlarge){
     display: flex;
@@ -52,35 +79,6 @@
   }
 }
 
-.process-header__phase{
-  background: rgba($dark-gray, .8);
-  color: $white;
-  text-align: center;
-  padding: 2rem 1rem;
-  margin-left: -1rem;
-
-  .button{
-    margin-top: 1rem;
-    margin-bottom: 0;
-    color: $white;
-    border-color: $white;
-
-    &:hover,
-    &.is-active{
-      color: $primary;
-      border-color: $primary;
-    }
-  }
-}
-
-.process-header__phase--simple{
-  padding: .5rem 1rem;
-
-  @include breakpoint (medium){
-    padding: 2rem 1rem;
-  }
-}
-
 .process-header__hashtag{
   font-weight: 600;