decidim-core 0.21.0 → 0.22.0

data/app/assets/stylesheets/decidim/modules/_inline-filters.scss

@@ -38,10 +38,13 @@
     width: $dropdown-width;
 
     li{
-      padding: $global-padding;
-
       a{
-        color: $body-font-color;
+        display: block;
+        padding: $global-padding;
+
+        &:hover{
+          text-decoration: underline;
+        }
       }
 
       &:not(:last-child){

data/app/assets/stylesheets/decidim/modules/_input-gallery.scss

@@ -1,6 +1,16 @@
 .gallery__container{
   width: 100%;
 
+  fieldset{
+    border: 1px solid $light-gray;
+    padding: .5rem;
+    margin-bottom: 1rem;
+  }
+
+  legend{
+    padding: .25rem;
+  }
+
   .thumbnail{
     max-height: 100px;
   }

data/app/assets/stylesheets/decidim/modules/_input-mentions.scss

@@ -1,12 +1,9 @@
 @import "tribute";
 
-.mentions__container{
+.mentions__container,
+.hashtags__container{
   width: 100%;
 
-  span{
-    color: $secondary;
-  }
-
   [type=text]{
     white-space: nowrap;
     overflow: hidden;
@@ -27,7 +24,8 @@
     display: block; // firefox
   }
 
-  &.mentions__container--textarea{
+  &.mentions__container--textarea,
+  &.hashtags__container--textarea{
     [contenteditable=true]{
       -webkit-appearance: textfield;
       -moz-appearance: textfield-multiline;
@@ -60,6 +58,7 @@
     position: relative;
     min-width: 100%;
     top: -1rem - rem-calc(1);
+    color: $secondary;
 
     ul{
       //reset list
@@ -82,9 +81,28 @@
       }
     }
 
-    .highlight{
+    .highlight,
+    li:hover{
       background-color: $input-prefix-background;
     }
+
+    .tribute-item{
+      .author__avatar{
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0;
+      }
+
+      .is-group{
+        height: 1.6rem;
+        float: right;
+        font-weight: normal;
+
+        svg{
+          vertical-align: middle;
+        }
+      }
+    }
   }
 
   &.is-active{

data/app/assets/stylesheets/decidim/modules/_input-multiple-mentions.scss

@@ -0,0 +1,5 @@
+@import "tribute";
+
+input.js-multiple-mentions.mentions__container::placeholder{
+  color: $input-multiple-placeholder-color;
+}

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

@@ -9,6 +9,17 @@
   }
 }
 
+.map__help{
+  .skip{
+    @include skip-button;
+  }
+}
+
+.leaflet-container{
+  // Keep it below the second level navigation dropdown
+  z-index: 5;
+}
+
 .map-info{
   background: var(--primary);
   border-radius: $global-radius;

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

@@ -5,6 +5,7 @@ $margin-m: $global-margin * 3;
 $margin-l: $global-margin * 5;
 
 //Sections
+
 .section{
   margin-bottom: $margin-sm;
   word-wrap: break-word;
@@ -19,25 +20,25 @@ $margin-l: $global-margin * 5;
 }
 
 // helpers
-$size:(
+$size: (
   none: 0,
   xs: $margin-xs,
   s: $margin-s,
   sm: $margin-sm,
   m: $margin-m,
-  l: $margin-l
+  l: $margin-l,
 ) !default;
 
-$property:(
+$property: (
   p: padding,
-  m: margin
+  m: margin,
 ) !default;
 
-$side:(
+$side: (
   t: top,
   r: right,
   b: bottom,
-  l: left
+  l: left,
 ) !default;
 
 @mixin make-spaces(){
@@ -56,4 +57,4 @@ $side:(
   }
 }
 
-@include make-spaces()
+@include make-spaces();

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

@@ -3,30 +3,30 @@ $message-padding: 1rem;
 
 /* Messages */
 
-.message{
-  @extend .card;
-}
-
-.message__header{
-  padding: $message-padding;
-}
-
-.message__content{
-  padding: 0 $message-padding $message-padding;
-
-  > :last-child{
-    margin-bottom: 0;
-  }
-
-  p{
-    overflow-wrap: break-word;
+.unread_message__counter{
+  $counter-size: 25px;
+  $counter-font-size: $counter-size - 12px;
+
+  background-color: $secondary;
+  border-radius: 50%;
+  color: $white;
+  font-size: $counter-font-size;
+  font-weight: 600;
+  margin-left: auto;
+  margin-right: 5%;
+  width: $counter-size;
+
+  span{
+    display: block;
+    line-height: $counter-size;
+    text-align: center;
   }
 }
 
 /* Message form */
 
 .add-message{
-  @extend .message;
+  @extend .card;
 
   padding: $message-padding;
 

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

@@ -1,89 +1,92 @@
 //Basic modules
-@import "margins";
-@import "typography";
-@import "title-action";
-@import "buttons";
-@import "forms";
-@import "icons";
-@import "video";
+@import "decidim/modules/margins";
+@import "decidim/modules/typography";
+@import "decidim/modules/title-action";
+@import "decidim/modules/buttons";
+@import "decidim/modules/forms";
+@import "decidim/modules/icons";
+@import "decidim/modules/video";
 
 //Foundation overrides
-@import "reveal";
+@import "decidim/modules/reveal";
 
 //Layout
-@import "layout";
-@import "navbar";
-@import "main-container";
-@import "footer";
-@import "static-pages";
+@import "decidim/modules/layout";
+@import "decidim/modules/navbar";
+@import "decidim/modules/main-container";
+@import "decidim/modules/footer";
+@import "decidim/modules/static-pages";
 
 //Cards and containers
-@import "card-grid";
-@import "cards";
-@import "extra";
-@import "definition-data";
-@import "callout";
+@import "decidim/modules/card-grid";
+@import "decidim/modules/cards";
+@import "decidim/modules/extra";
+@import "decidim/modules/definition-data";
+@import "decidim/modules/callout";
 
 //Shared modules
-@import "comments";
-@import "messages";
-@import "opinion-toggle";
-@import "flag";
-@import "author-avatar";
-@import "address";
-@import "order-by";
-@import "tags";
-@import "input-tags";
-@import "input-mentions";
-@import "input-hashtags";
-@import "list-docs";
-@import "datepicker";
-@import "pagination";
-@import "data-picker";
-@import "progress-bar";
-@import "docs-manager";
-@import "horizontal-tabs";
-@import "conversation";
-@import "badges";
-@import "hover-section";
-@import "list-request";
-@import "floating-helper";
-@import "versions";
+@import "decidim/modules/confirm";
+@import "decidim/modules/comments";
+@import "decidim/modules/messages";
+@import "decidim/modules/opinion-toggle";
+@import "decidim/modules/flag";
+@import "decidim/modules/author-avatar";
+@import "decidim/modules/address";
+@import "decidim/modules/order-by";
+@import "decidim/modules/tags";
+@import "decidim/modules/input-tags";
+@import "decidim/modules/input-mentions";
+@import "decidim/modules/input-multiple-mentions";
+@import "decidim/modules/list-docs";
+@import "decidim/modules/datepicker";
+@import "decidim/modules/pagination";
+@import "decidim/modules/data-picker";
+@import "decidim/modules/progress-bar";
+@import "decidim/modules/docs-manager";
+@import "decidim/modules/horizontal-tabs";
+@import "decidim/modules/conversation";
+@import "decidim/modules/badges";
+@import "decidim/modules/hover-section";
+@import "decidim/modules/list-request";
+@import "decidim/modules/floating-helper";
+@import "decidim/modules/versions";
+@import "decidim/modules/sticky";
+@import "decidim/modules/notification";
 
 //Process elements
-@import "process-header";
-@import "process-info";
-@import "process-nav";
-@import "process-phase";
-@import "timeline";
-@import "filter-tags";
-@import "filters";
-@import "inline-filters";
-@import "reference";
-@import "status-labels";
-@import "process-stats";
+@import "decidim/modules/process-header";
+@import "decidim/modules/process-info";
+@import "decidim/modules/process-nav";
+@import "decidim/modules/process-phase";
+@import "decidim/modules/timeline";
+@import "decidim/modules/filter-tags";
+@import "decidim/modules/filters";
+@import "decidim/modules/inline-filters";
+@import "decidim/modules/reference";
+@import "decidim/modules/status-labels";
+@import "decidim/modules/process-stats";
 
 //Conference elements
-@import "conference-nav";
-@import "conference-speaker";
-@import "conference-programme";
-@import "conference-registration";
-@import "conference-diploma";
-@import "conference-media";
+@import "decidim/modules/conference-nav";
+@import "decidim/modules/conference-speaker";
+@import "decidim/modules/conference-programme";
+@import "decidim/modules/conference-registration";
+@import "decidim/modules/conference-diploma";
+@import "decidim/modules/conference-media";
 
 //User interface
-@import "user-form";
-@import "signup";
+@import "decidim/modules/user-form";
+@import "decidim/modules/signup";
 
 //Additional elements
-@import "share";
-@import "help";
-@import "cookie-bar";
-@import "map";
-@import "omnipresent_banner";
-@import "wizard-steps";
-@import "collapsible-list";
-@import "block-banner";
-@import "fingerprint";
-@import "toggle";
-@import "loading-spinner";
+@import "decidim/modules/share";
+@import "decidim/modules/help";
+@import "decidim/modules/cookie-bar";
+@import "decidim/modules/map";
+@import "decidim/modules/omnipresent_banner";
+@import "decidim/modules/wizard-steps";
+@import "decidim/modules/collapsible-list";
+@import "decidim/modules/block-banner";
+@import "decidim/modules/fingerprint";
+@import "decidim/modules/toggle";
+@import "decidim/modules/loading-spinner";

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

@@ -2,6 +2,7 @@
 
 $navbar-bg: $dark-gray;
 $navbar-bg-hover: rgba(white, .02);
+$navbar-bg-focus: $primary;
 $navbar-color: rgba(white, .5);
 $navbar-color-hover: $white;
 $navbar-active-color: $white;
@@ -13,6 +14,13 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 
 .navbar{
   background: $navbar-bg;
+
+  a,
+  .button{
+    &:focus{
+      outline-color: var(--highlight-alternative);
+    }
+  }
 }
 
 /* Title bar */
@@ -23,6 +31,21 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   @include breakpoint(smallmedium down){
     border-top: 2.125rem solid $dark-gray;
   }
+
+  .skip{
+    @include skip-button;
+
+    &:focus{
+      outline-color: var(--highlight-alternative);
+    }
+  }
+
+  a,
+  .button{
+    &:focus{
+      outline-color: var(--highlight-alternative);
+    }
+  }
 }
 
 .logo-cityhall{
@@ -50,27 +73,93 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 
 .topbar__search{
   position: relative;
+  max-width: 220px; // Safari fix
 
-  input,
-  input:focus{
+  input{
     color: $navbar-color-hover;
-    border: 0;
-    padding-left: $input-padding * 4;
+    border-color: transparent;
     box-shadow: none;
     background: $navbar-active-bg;
+    margin-top: 8px;
+    display: inline-block;
+    border-radius: 4px 0 0 4px;
+    transition: .3s all;
+    height: 2.5rem; //matches input group button height
+
+    &:focus{
+      color: $navbar-color-hover;
+      box-shadow: none;
+      background: $navbar-active-bg;
+      outline-color: var(--highlight-alternative);
+    }
 
     @include breakpoint(medium){
       background: $navbar-bg;
     }
   }
 
-  svg{
-    color: $input-placeholder-color;
-    position: absolute;
-    top: 50%;
-    left: $input-padding;
-    transform: translateY(-50%);
-    opacity: .5;
+  .input-group-button{
+    position: relative;
+    height: 1px; // Fix for Safari and Firefox
+    vertical-align: top;
+  }
+
+  // Fix for Safari and Firefox
+  .button-wrapper{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  button{
+    padding: 5px 10px;
+    border-radius: 0 $button-radius $button-radius 0;
+    transition: .3s all;
+  }
+
+  form:first-child{
+    display: inline-flex;
+  }
+
+  .input-group{
+    margin-bottom: 0;
+  }
+
+  &:not(:focus-within){
+    button{
+      background-color: $navbar-active-bg;
+      color: rgba(white, .5);
+
+      @include breakpoint(medium){
+        background: $navbar-bg;
+      }
+    }
+  }
+
+  &:focus-within{
+    input{
+      background-color: $light-gray;
+      color: $body-font-color;
+      border: 0;
+
+      &::placeholder{
+        color: $dark-medium-gray;
+      }
+    }
+  }
+}
+
+// Hack to fix the top bar display for IE11
+// This cannot be applied to other browsers as the focus borders would be
+// invisible if overflow is hidden on the search element.
+@media all and (-ms-high-contrast: none){
+  *::-ms-backdrop,
+  .topbar__search{
+    overflow: hidden;
   }
 }
 
@@ -79,12 +168,20 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
+  // Fix for Safari
+  > div{
+    flex: 0 0 auto;
+    display: flex;
+
+    &.logo-wrapper{
+      flex: 1 0 auto;
+    }
+  }
 }
 
 .logo-wrapper{
-  display: inline-block;
   line-height: 0;
-  flex-grow: 1;
 
   a{
     display: inline-block;
@@ -108,6 +205,7 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   margin-left: 2rem;
 
   .dropdown > li > a{
+    background: transparent;
     padding-left: 0;
   }
 
@@ -153,14 +251,16 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     }
 
     li{
-      padding: $global-padding  / 2;
+      padding: $global-padding / 2;
 
       a{
         padding: .5rem;
         color: $anchor-color;
 
-        &:hover{
+        &:hover,
+        &:focus{
           color: lighten($body-font-color, 20);
+          text-decoration: underline;
         }
       }
 
@@ -168,9 +268,11 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
         border-bottom: $border;
       }
 
-      &:hover{
+      &:hover,
+      &:focus{
         cursor: pointer;
         background-color: rgba(var(--secondary-rgb), .05);
+        text-decoration: underline;
       }
     }
   }
@@ -196,6 +298,10 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 .topbar__dropmenu > ul > li > a{
   color: $medium-gray;
 
+  &:hover{
+    text-decoration: underline;
+  }
+
   &::after{
     margin-top: -1px !important;
     border-top-color: $medium-gray !important;
@@ -210,10 +316,20 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     left: .5rem;
     margin-left: 0;
 
+    &:hover,
+    &:focus{
+      text-decoration: underline;
+    }
+
     .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
       border-width: 3px;
       right: 10px;
       margin-top: 0;
+
+      &:hover,
+      &:focus{
+        text-decoration: underline;
+      }
     }
   }
 }
@@ -233,18 +349,27 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   padding-right: 2.5rem;
   display: none;
 
+  // hide caret down
+  .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
+    display: none;
+  }
+
   @include breakpoint(medium){
     display: block;
+
+    .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
+      display: block;
+
+      &:hover,
+      &:focus{
+        text-decoration: underline;
+      }
+    }
   }
 
   @media (min-width: (1300 / 16) + em){
     padding-right: 0;
   }
-
-  // hide caret down
-  .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
-    display: none;
-  }
 }
 
 .topbar__user__logged__picture{
@@ -316,8 +441,12 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     color: $medium-gray;
     font-weight: 600;
 
+    @include breakpoint(medium){
+      margin-left: 1rem;
+    }
+
     &:hover{
-      color: $anchor-color;
+      text-decoration: underline;
     }
   }
 
@@ -330,10 +459,20 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     height: 2px;
     border-left: $border;
     vertical-align: middle;
+
+    @include breakpoint(medium){
+      display: none;
+    }
   }
 
-  a:first-of-type::before{
-    display: none;
+  a:first-of-type{
+    @include breakpoint(medium){
+      margin-left: 0;
+    }
+
+    &::before{
+      display: none;
+    }
   }
 }
 
@@ -380,9 +519,11 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
     padding: 1em 2em;
     color: $navbar-color;
 
-    &:hover{
+    &:hover,
+    &:focus{
       background: $navbar-bg-hover;
       color: $navbar-color-hover;
+      text-decoration: underline;
     }
   }
 }
@@ -398,10 +539,10 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 
 /* Main nav */
 .main-nav ul{
+  position: relative;
   padding: 0;
   margin: 0;
   list-style: none;
-  overflow-x: auto;
 
   @include breakpoint(medium){
     -webkit-overflow-scrolling: touch;
@@ -417,6 +558,7 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
 }
 
 .main-nav__link a{
+  position: relative;
   display: block;
   padding: 1em 2em;
   color: $navbar-color;
@@ -424,6 +566,14 @@ $navbar-active-shadow-medium: inset 0 4px 0 0 var(--primary);
   &:hover{
     background: $navbar-bg-hover;
     color: $navbar-color-hover;
+    text-decoration: underline;
+  }
+
+  &:focus{
+    z-index: 1;
+    color: $navbar-color-hover;
+    text-decoration: underline;
+    outline-offset: -2px;
   }
 
   @include breakpoint(medium){